Rive

React Native SDK Wrapper for Rive

We helped Rive, an interactive design tool, reach a broader audience by creating a React Native library that integrates its SDK for iOS and Android.

Services:

Product Development and Growth

Adoption of a Cross-Platform Approach

Development Efficiency Boost

CLIENT INFO

Rive is an interactive design tool which helps to create real-time animations for any platform.

Industry

IT & Software

Company type

SME

Region

North America

tech INFO

We created a React Native library integrating Rive SDK for iOS and Android, enabling cross-platform usage, and automated release workflows.

Technologies

React Native

Platforms

iOS | Android

Tech Stack

TypeScript | Kotlin | Objective-C

highlights

Before 14.5s

After 2.5s

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

Expanded market reach

Cross-platform support

Comprehensive integration

Automated pipeline

Cost efficiency

Improved developer experience

CHALLENGE

We were asked to manage 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.

work done

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

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.

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.

Enhanced app performance by over 200%.
Improved Core Web Vitals metrics to meet Google's standards.
Reduced refresh time to ~2s with Fast Refresh feature.
Improve code quality and ongoing efforts to add advanced functionalities

RESULTS

NATIVE BINDING

We implemented native binding for Rive Runtime for iOS and Android.

REACT NATIVE LIBRARY

Our work resulted in the creation of a React Native library that enables seamless feature compatibility across both Android and iOS platforms.

COMPETITIVE ADVANTAGE

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

PRODUCT IMPROVEMENT

Thanks to our work, the client had the opportunity to improve the product by fixing the bugs we found.

CALLSTACK APPROACH

Throughout the project, we adopted an event-driven approach and demonstrated flexibility and initiative. We deviated from the original plan to implement a better solution: a more declarative API. The client quickly embraced this idea as it allowed them to release animations for Android and iOS immediately.

This solution reduced the required working time and was also budget-friendly. Additionally, our careful analysis of the initial idea helped us diagnose and avoid several potential problems.

Case studies

“Callstack played an essential role in helping us release our mobile app to the market. They helped us set up and optimise our mobile ecosystem.”

Donovan Isherwood - Engineering Manager

Thriva

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

Senior Developer Advocate

at Amazon Web Services

Get in touch

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

Home

Case Studies

Rive

React Native SDK Wrapper for Rive

Let’s talk about your project

Let's connect

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).