Extending React Native Capabilities by Adding Native Extensions

Let’s talk about your project

Let's connect
Callstack Cosmos
Callstack Cosmos

“Callstack made the perfect staff augmentation partner. Their engineers proved to be a crucial part of our mobile app relaunch project.”

Brian Aznar
Engineering Director of Major League Soccer

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.
Commercial gaming
Company type
Australia, Asia & Oceania
Tech Info
Performance optimization project with the best practices, approaches & tech solutions
React Native | Native
iOS | Android
Redux | Tanstack | Reassure | GraphQL

Performance Boost


In 87.5% of the screens, the number of rerenders decreased or remained the same, which affected the acceleration of the initial performance.

React Universe

In brief

The client had a conventional mobile application for platforms – iOS and Android. They decided for a complete restart with a brand new design. The client built a prototype in React Native just to prove that this idea might be correct. Then we joined the project to help make this dream happen. We have been there from the very beginning to help solve the various issues which came along with the React Native project where we have a strong level of expertise.

Restarting the official app of Major League Soccer

Deliver a great cross-platform user experience and reuse as much code as possible

As the client introduced us to their app, customers, and requirements, we had to make decisions about crucial points of the future app:

  • The project structure
  • Which navigation solution should we use
  • Do we have the necessary tools for custom features? (Video player, Chromecast)
  • Tech stack reuse (client already had a website with backend)
  • Communication with a less technical group (designers, testers)

The application had to be ready for various resolutions – it needed to support tablets and mobiles. Also, because the new design of the app contains impressive and sophisticated gesture and controls, we had to come up with a good abstraction – a declarative animation approach.

Keep it native where you need to and go for JavaScript where you can

Keep it native where you need to and go for JavaScript where you can

Major League Soccer app screen

Since we knew that the app is going to be pretty complex and demanding, therefore, we decided to implement and use many native modules. The first thing was the navigation. We knew that having JavaScript based navigation would be an overkill to the app of this size, that’s why we decided to go for native-based navigation.

Our client already had working solutions to handle things like video playback and push notifications on the native side, so we decided not to force them to change their current approach, but rather port their current solutions to the JS world as native modules.

Brightcove Player

We’ve created a private implementation of Brightcove player to match the needs of our client, including additional functionality, for example, stopping background music to let the user listen to video sound only.

Major League Soccer app screen

Brownfield solution for Video Gallery Screen

Another solution created for the video gallery is its Brownfield equivalent – a full native screen embedding React Native inside it. We recreated native video gallery using Kotlin for Android and Swift for iOS. Then, we embedded the React Native view inside of it, to let it control video from within JavaScript.

This approach allows having updates to your application, without the need for sending it to the Store for review (thanks to OTA (Over the air) updates for React Native).

Code Reusability

React Native gives the great opportunity of combining the power of native code and the composability of React components and we managed to benefit from this.

Our client had a working website written in React and a GraphQL based backend. The client side was using react-apollo, which allowed us to handle all of the communication with the API and state management via GraphQL higher order components and also reuse some code from the website.

Auto Deploy solution

We also knew that we’d be working with a team of less technical people like designers, testers and product owners. It was clear to us that we need a great continuous integration and delivery system, so everyone had a clear idea in what shape the app is.

Major League Soccer app data

We set up an environment that is friendly for both developers and the other team members. As soon as pull requests pass the checks and are merged to the main branch, our alfa deployment tasks are invoked – and soon deployed and distributed via the App Center to testers (notifying them along the way).

Major League Soccer app data

We have also implemented Google Analytics and Crashlytics to precisely measure the app's performance. Finally – we managed to profile the app via the native IDEs, eliminate the bottlenecks and submit the app to AppStore and Google Play.

Major League Soccer app data

Performant cross-platform application with components shared across the stack

We’ve helped our client to successfully deliver the app for both platforms, meeting the deadline.

Major League Soccer app screen

Overall, the launch was really successful – our client was happy with the outcome and the cooperation and app users are happy with our work.

download app App Store
download app Google Play

The challenges we’ve solved so far

Related services


Product Development and Growth

Callstack illustration

get in touch

Fill in the form and tell us a little bit about your enquiry. We’ll get back to you promptly to discuss your requirements.

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