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.
01
CODE REFACTORING
Kicked off the project with refactoring the whole socket.MIGRATION Migrated the codebase to TypeScript.
02
MIGRATION
Migrated the codebase to TypeScript.
03
DEPENDENCIES
Upgraded major dependencies such as Expo, React Navigation, and React Query.
04
PAYMENTS
Created two options: In-app purchase with Google Play or App Store and credit card payment.
05
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.
01
RN PAPER
Forked the React Native Paper library.
02
ci
Established continuous integration for automated code updates.
03
testing
Set up a Storybook for component testing.
04
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
01
Together
we acted as staff augmentation within Advantys’ team.
02
Engaged
in collaborative problem-solving and solution exploration.
03
supervised
by Advantys' CTO, the project utilized GitHub, Notion, and Slack for communication.
01
migrating
from a custom server-side rendering (SSR) solution to Next.js
02
Focusing
on Core Web Vitals metrics
03
Optimizing
a large shared JS bundle
04
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.
01
strong
architecture with professional maintenance and continuous updates
02
high
code coverage with quality-compliant unit and integration tests
03
Comprehensive
testing, including end-to-end.
04
Faster
time-to-market with mobile process automation.
05
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
“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
We optimized the client’s mobile app performance and introduced a custom tool to measure performance regressions. We set up performance tests and documentation to enable a seamless transition of knowledge with the in-house team of developers.
Client Info
Entain is one of the world’s largest sports betting and gaming entertainment groups.
Industry
Commercial gaming
Company type
Enterprise
Region
Australia, Asia & Oceania
Tech Info
Performance optimization project with the best practices, approaches & tech solutions
Technologies
React Native | Native
Platforms
iOS | Android
Stack
Redux | Tanstack | Reassure | GraphQL
Performance Boost
87.5%
In 87.5% of the screens, the number of rerenders decreased or remained the same, which affected the acceleration of the initial performance.
In brief
Greenbits is a company equipping stores with hardware and software to weight and sell their products. Our goal was to create a mobile application for Android tablets which can work as a station to weight products and print labels with QR code.
A mobile app that works as a station to weight products and print labels with QR code
The major challenge with developing the app was to integrate the external hardware. There were a few basic requirements:
it should work with Zebra label printers and jewelry scales
this integration should be possible via USB, Bluetooth, and network
there should be an option of searching new devices, printing and measuring the weight.
Another big problem to solve was to make application network issues resistant. It had to work in both online and offline environments. The requirements were as following:
it should work without internet connection,
there should be an option of performing some actions in offline mode,
the data should be up to date all the time.
Combining Java and JavaScript
It was no surprise that nobody has created any React Native library to communicate with peripheral label printers and scales before. We had to move part of our development from JavaScript to native Java. We could have proceeded with one of the two possible approaches:
using an external Java SDK,
writing everything from scratch.
To support the offline mode we had even more options. This happens to be a common problem, so there were many available solutions out there:
use Realm Database to store whole offline data and synchronize data using WebSockets when online,
use advanced caching solution to cumulate data offline while using the application,
synchronize all data with API while starting the application,
not allowing any actions to be performed in offline mode,
queue every action in offline mode and call them after going back online.
External library that adds an offline mode to any React Native application
First of all, we had to deal with the hardware integration. We chose to use an existing third-party Java SDKs. We have created a Java module with standardized API which can be used in our React Native app. It allows to search devices via different connections, connect with detected devices and use it (for printing and reading weight). Source
After dealing with the hardware integration we started to think about the best solution for implementing an offline mode. We've decided to combine two different approaches together. We used Realm to store all important data. And we decided to synchronize it using WebSockets (in online mode) and also to fetch all data on every application launch and after going back online. This combined solution allowed us to be sure that the data in the application will always be up to date, even after a long period of being in an offline mode.
We also decided to queue every action when the app is in offline mode. We created a queue in Realm Database to allow case when a user does something in offline mode, then closes the app, opens it again and goes back to online mode. Every qued action should be called after that. We prepared this solution as a standalone offline library which can be used also in the other clients’ applications. The library allows to describe the shape of every data entity. There is also an option of configuring API endpoints for each data type and the behavior of WebSocket synchronization. Source
Hardware module and offline library that can be used across all clients’ applications
After months of developing we have managed to meet all requirements and this was the result of our work:
an external React Native module allowing native connections with some hardware,
an external library which can be used to easily add an offline mode to any React Native application,
an Android application using above modules to support store workers and allowing to measure the weight of products and printing labels with code.