Dream11: Chat Performance and Custom UI Library

CLIENT INFO

Dream11 is the world’s largest fantasy sports platform, with over 120 million users.

Industry

Fantasy sports

Company type

Enterprise

Region

Asia-Pacific (APAC)

tech INFO

We optimized chat functionality with advanced techniques and created a custom UI component library.

Technologies

React Native | JavaScript

Platforms

iOS | Android

Tech Stack

React Native Paper | Hermes | Storybook

KEY OPTIMIZATION GAINS (IN MAXIMUM VALUES):

500%

QUICKER PARSING OF CRYPTO MODELS

Let's connect

Before 14.5s

After 2.5s

35k

lines of code

months of work

800

code commits

88%

decreased shimmer render time

50%

quicker load times for chats on subsequent visits

50%

faster rendering time for chats

18%

less frame junk when scrolling

before

The refresh time was 5-11 seconds

after

The refresh time was reduced to ~2 s

Instant Preview

Developers can instantly preview code changes on real devices without a complex setup.

Let's connect

CHALLENGE

Dream11 aimed to provide a seamless user experience during a high-traffic cricket tournament. The goal was time-sensitive as the tournament was around the corner. In view of the fact that we also wanted to ensure the in-house team could smoothly develop the app in the future, our collaboration focused on two main areas:

Optimizing chat performance to deliver a smooth user experience to prevent churn and brand reputation issues.
Creating a new design system with reference to the React Native Paper library to make further development more cost and time-efficient.

WORK DONE

Optimizing chat performance

First, we cleaned up the codebase from React Native anti-patterns, libraries, and components misusage. Then, we introduced the DMAIC optimization cycle, taking the following steps:

define

Identified confirmed/reported issues such as re-renders and created a backlog for potential improvements.

measure

Used Macro tool measurements.

ANALYZE

Selected the most promising performance changes.

IMPROVE

Implemented changes following React Native best practices.

CONTROL

Re-measured with the Marco tool and compared to the 4.58.0 native version.

Deployment

Developed the release process for both Android and iOS.

API DESIGN

Proposed an API based on the Rive Android library features.

INTEGRATION

Implemented Rive SDK integration for Android and created an example app for testing.

iOS SUPPORT

Extended the integration to iOS after successful Android testing.

AUTOMATION

Created a Github Action workflow for automated library releases.

PUBLIC RELEASE

Made the library publicly available on platforms like CocoaPods and Maven.

DEPENDENCIES

Managing dependencies, including Expo and react-native packages for each new release.

RELEASES

Automating the release process with custom GitHub Actions.

TRAINING

Providing React Native training through pair programming, code reviews, and workshops.

Performance analysis let us identify critical areas that we wanted to optimize in the first place because that would bring the biggest benefits for the app’s users. In our experts’ opinion, the problems that needed immediate addressing included slow rendering time of chats, slow load times on chats for subsequent visits, frame junk when scrolling, slow parsing of crypto nodes, and slow parsing of data models.

‍

Performance Findings and Optimizations

Rendering time

Minimized bundle size (50 MB to 11 MB).
Eliminated unnecessary re-renders, reducing average mounting time by 30%.
Switched to Hermes, improving initial load time by 60-70%.

Load times

Reused Android Fragment of React Native Chat screen for subsequent visits, making navigation to chat screen instant.
Implemented Flashlist instead of Flatlist, enhancing chat screen performance to 21 FPS on low-end devices.

SETUP PROCESS

CREATING A CUSTOM UI COMPONENT LIBRARY

Before developing components, we received Figma mockup designs and acceptance criteria. Using these, we refined the tasks, with the Dream11 team available to clarify any doubts.

Loosely Coupled Mini-Apps

Ensuring independence between mini-apps while maintaining necessary communication was a priority. The team addressed this by:

Isolating client states and minimizing shared states.
Allowing server state sharing through a centralized query client.

Navigation Complexity

Balancing centralized and decentralized navigation posed challenges. A centralized approach was chosen to simplify integration during initial development, with flexibility for future changes.

Dependency Maintenance

Managing native and JavaScript dependencies required meticulous configuration, streamlined by tools like rnx-align-deps and Re.Pack’s shared fields.

CODE REFACTORING

Kicked off the project with refactoring the whole socket.MIGRATION Migrated the codebase to TypeScript.

MIGRATION

Migrated the codebase to TypeScript.

DEPENDENCIES

Upgraded major dependencies such as Expo, React Navigation, and React Query.

PAYMENTS

Created two options: In-app purchase with Google Play or App Store and credit card payment.

linking

Sorted out links, integrated content, and implemented html rendering.

We provided full front-end support, project configuration, feature parity, and expert advice on technical and user experience. We also implemented a new design guideline, including dark mode with auto theme detection.

RN PAPER

Forked the React Native Paper library.

Established continuous integration for automated code updates.

testing

Set up a Storybook for component testing.

design

Developed the basis of the design – color, layout, and typography.

Once we had the basics down, we started working on the UI library components. The components we developed included: AppBar, TextField. Button, Icon Button, Toast, which included animation and swipe-to-dismiss, Match Status, Search, and many more!

Apart from all the fixes and improvements, we provided metrics that should be tracked over time so the client knows exactly what to monitor and correct to maintain great performance levels long term.

16.8s

App start time, before 48.5s

8.6s

Report screen load time, before 15.9s

2.5s

Sending a message, before 14.5s

60FPS

Average FPS on LHN

2.6s

Search screen load time, before 11.8s

Together

we acted as staff augmentation within Advantys’ team.

Engaged

in collaborative problem-solving and solution exploration.

supervised

by Advantys' CTO, the project utilized GitHub, Notion, and Slack for communication.

migrating

from a custom server-side rendering (SSR) solution to Next.js

Focusing

on Core Web Vitals metrics

Optimizing

a large shared JS bundle

Introducing

Fast Refresh for accelerated development iterations

The introduction of Fast Refresh in Next.js further accelerated development iterations. All in all, it contributed to an enhanced user and developer experience.In a span of several months, our team effectively overhauled the AutoZone app's performance, which initially struggled on both desktop and mobile devices. To find out more about the whole AutoZone project, head over to the case study on main case study title.

strong

architecture with professional maintenance and continuous updates

high

code coverage with quality-compliant unit and integration tests

Comprehensive

testing, including end-to-end.

Faster

time-to-market with mobile process automation.

New PoC

features like biometrics and mobile health kit integration.

Last but not least, our collaboration significantly enhanced the knowledge of Thriva's development team regarding React and React Native.

Students new to programming and React Native
Web developers unfamiliar with device APIs and native apps
Native developers exploring web app frameworks and React Native's UX potential
React Native developers prototyping and sharing ideas
Library maintainers creating examples and documentation
Users providing reproducible cases for bug reports
Speakers and workshop presenters conducting live coding sessions

RESULTS

As a result of our partnership, Dream11 now has:

More performant app that fulfills the needs of its end-users.
Time and cost-efficient solution for future development.

Sports fans with low-end Android devices enjoy a smoother and faster chat. The performance improvement directly impacts business metrics, such as churn rate or new customer acquisition.

Moreover, a tailored UI component library allows the in-house team to develop the app faster, reducing costs for new screens. Users also enjoy an improved experience as buttons and components behave consistently across the app.

Your Success Story is Next

Let's connect

CALLSTACK APPROACH

Case studies

“The collaboration was great throughout, with Callstack engineers seamlessly working as part of our agile teams.”

Gareth Jenkins - Head of Engineering Trades Product

Checkatrade

get in touch

Trusted by

“The team at Callstack are the most experienced and trusted engineers in the React Native community and ecosystem.”

Nader Dabit

DevRel + XD at EigenLayer / EigenDA

at Amazon Web Services

This information will be used only to contact you. For details, check our Privacy Policy.

In brief

Dream11 is the world’s largest fantasy sports platform, with over 120 million users. The app allows users to create fantasy teams based on real players and participate in virtual events.

The company wanted to achieve two goals. Firstly, the app had to provide a seamless user experience for people using it on low- and medium-end devices to enjoy virtual sports tournaments in real time.

Table of contents:

Challenge

Performance optimization

Key Optimization Gains

Delivering the library

More performant app and time and cost-efficient solution for future development

Challenge

This goal was time-sensitive as a cricket tournament was coming up. As it’s one of the most popular sports in India, Dream11 wanted to be ready for the influx of users.

Secondly, we wanted to ensure that the in-house team could seamlessly develop the app in the future. That’s why we created a custom components library.

That’s why our collaboration focused on two main areas:

Optimizing chat performance to deliver a smooth user experience to prevent churn and brand reputation issues.‍
Creating a new design system with reference to the React Native Paper library to make further development more cost and time-efficient.

First, we cleaned up the codebase from React Native anti-patterns, libraries, and components misusage. Once we cleaned the codebase, we introduced the DMAIC optimization cycle.
‍

Performance optimization

The DMAIC cycle looks like this:

Step 1 – Define – laser focus on already confirmed/reported issues such as re-renders and the creation of a backlog of potential performance improvements.

Step 2 – Measure – Macro tool measurements.

Step 3 – Analyze – selection of the most promising performance changes.

Step 4 – Improve – implementation in line with the latest React Native best practices.

Step 5 – Control – the Marco tool measurement re-run compared to the 4.58.0 native version.

To identify all areas that need improvement, we profiled the whole app. The comprehensive approach combined with the DMAIC methodology allowed us to pinpoint the issues that would help our client achieve its business goals.

Performance Analysis

We began our work with performance analysis. We analyzed four areas of focus:

Initial load of Chat List
Loading of messages in the Chat window
Scrolling Through the Chat List
Scrolling Through the Chat Window

In our experts’ opinion, the most critical problems of the app that needed immediate addressing included slow rendering time of chats, slow load times on chats for subsequent visits, frame junk when scrolling, slow parsing of crypto nodes, and slow parsing of data models.

Performance Findings

Performance analysis allowed us to prepare a list of performance findings – areas that we wanted to optimize in the first place because they yield the biggest benefits for the app’s users.

Slow rendering time on chats

The first problem we needed to tackle was slow rendering time on chats. This was top priority for Dream11, as slow chats had a direct negative impact on user experience.

To optimize the rendering time, we had to improve several aspects of the app.

First, we minimize the bundle size. We excluded parts unrelated to the chat from the bundle to do that. Ultimately, we reduced the bundle size from 50 MB to 11 MB.

We got rid of unnecessary re-renders. This improvement allowed us to optimize multiple parts of the Chat screen. As a result, we reduced the average mounting time by 30%.

Our initial performance analysis discovered that the app uses a JS bundle instead of highly-optimized Hermes. That caused React Native to parse much data when the Chat mounted. This change improved the initial load time between 60 and 70%.

In the next step, we disabled lazy loading. Lazy loading consumed additional resources during important interactions. Disabling lazy loading improved the totla screen mount time by 5% on low-end devices, as the app doesn’t have to parse extra chunks in memory.

Another performance issues we solved was shimmers optimization. We replaced the implementation done with Animated Gradients and replaced it with NativeShimmers. This action improved rendering of shimmers by over 60%. But we didn’t stop there. Further optimization with the MaskedView approach allowed us to reach a final 88% improvement.

And last but not least, we calculated Animated styles only for already mounted components. We optimized the mounting time for each Chat message by 40%.

Slow load times on chats for subsequent visits

The Android Fragment of the React Native Chat screen wasn’t reused when the user came back from the home tab to the chat. That resulted in unnecessary re-mounting of the whole screen.

That change resulted in subsequent navigation to chat screen being instant.

Frame junk when scrolling chat screen

Another performance aspect we wanted to improve was frame junk when scrolling. We encountered this problem while profiling chat screen. To make the experience more user-friendly, we decided to implement Flashlist instead of Flatlist. We enhance the chat screen to 21 FPS on low-end devices

Slow parsing of crypto-nodes

In Dream11 app, the SendBird data is parsed into models. The models used a lot of resources and included decrypting data using crypto-js.

To solve this issue, we introduced rect-native-quick-crypto the time to parse improved by 90% on a real device.

Slow parsing of data models

As explained above, data from sendBird was parsed into models. These models were associated with each item in the list. As the models were bloated with unnecessary data, we analysed them and removed the data models didn’t need to operate. As a result, we observed a decrease in the component mounting time.

Key Optimization Gains

The optimization introduced by our team directly impacted user experience. We were able to address the issues that we uncovered during the performance analysis phase.

The key gains included:

up to 500% quicker parsing of crypto models, thanks to switching to more performant modules.
50% faster rendering time for chats. We were able to achieve it by simplifying logic.
up to 50% quicker load times for chats on subsequent visits, thanks to optimized memoisation.
decreasing shimmer render time by 88% due to using MaskedViewNativeShimmer approach.
up to 18% less frame junk when scrolling by using Native Stack Navigator and Flashlist
‍

Delivering the library

Before developing components, we received mockup designs created in Figma and acceptance criteria for each element.

an image showing custom UI library components

Using the Figma models and acceptance criteria, we refined the tasks. The Dream11 team was available to dispel any doubts.

We divided the project into four parts:

Setup,
Design foundations,
Development of the components, and
Testing

First, we set up a fork based on the React Native Paper library.

To automate the integration of the code written by two of our React Native developers, we set up continuous integration. The code was always up to date regardless of who was working on the project.

Finally, we set up a Storybook to test the components.

In the second part, we developed the basis of the design – color, layout, and typography.

Once we had the basics down, we started working on the UI library components.

The components we developed included:

AppBar,
TextField.
Button,
Icon Button,
Toast, which included animation and swipe-to-dismiss,
Match Status,
Search, and
many more!

After development, we performed unit, integration, and accessibility tests and ran the storybook stories for every component.

We presented finished components during demo sessions to Dream11’s key stakeholders. During the meetings, we received feedback and implemented it later on. But, because we got comprehensive explanation and acceptance criteria initially, most components were accepted on the first try.

More performant app and time and cost-efficient solution for future development

As a result of our partnership, Dream11 now has a performant app that fulfills the needs of its end-users. Sports fans with low-end Android devices enjoy a smoother and faster chat. The performance improvement directly impacts business metrics, such as churn rate or new customer acquisition.

Moreover, a UI component library tailored to their needs. The in-house team can develop the app faster, thus reducing the costs of building new screens. Moreover, the users can enjoy an improved user experience as buttons and other components behave consistently across the app.