React Native SDK Wrapper for Rive

Let’s talk about your project

Let's connect

-

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

Rive is an interactive design tool which helps to create real-time animations for any platform. The tool is a successor to two apps, Flare and Memo, which were used for creating animated characters. As of today, it has around 75k registered users and this number is always on the rise.

Table of contents:

Heading 2

Expanding the user base with Rive SDK bindings to React Native

However popular, Rive couldn’t use the potential of the market to the full because they didn’t have their Software Development Kit (SDK) in React Native. This means the tool wasn’t accessible to all users, and that was definitely something to change. We were asked to take care of Rive SDK. The goal of this project was to create a React Native library that integrates iOS and Android implementations of Rive SDK, and allows for easy use in a cross-platform application.

To satisfy the client’s needs, we had to create a library that would enable easy implementation, maintenance, and would meet the React Native community standards at the same time.

Both for Android and iOS

To start with, we needed to create the release process, both for Android and iOS. We suggested an API based on our understanding of the features provided by the Rive Android library. We implemented integration with Rive SDK for Android and then created an example app to show usage of our newly made library. This was also a good opportunity to test if everything was working properly. After we saw everything was fine from the React Native side, we moved on to do the same for iOS.

At the next step, the Github Action workflow was created to make it possible for Rive developers to release new versions of the React Native library that we built. To automate the process of releasing the library, we integrated it in a pipeline. This facilitates the process and also makes the library available for public use on platforms such as CocoaPods or Maven.

Partnership model

Throughout the project, we adopted an event-driven approach and showed a lot of flexibility and initiative. We moved away from the original plan just because we arrived at a better solution: more declarative API. The client quickly embraced the idea as it meant they could release animations for Android and iOS straightaway.

It also turned out to be budget-friendly because our solution meant less working time on our end. Last but not least, what we suggested actually helped to avoid a number of issues – we looked into the initial idea carefully and diagnosed quite a few problems that would occur if we stuck to the original plan.

Results

We implemented native binding for Rive Runtime for iOS and Android. Our work resulted in creating a React Native library which allows using the same features seamlessly both on Android and iOS platforms.

Having the library is a big competitive advantage for Rive and something that guarantees a nice developer experience.

Also, thanks to our work, the client had the opportunity to improve the product by fixing the bugs we found (we came across bugs all the time).