REGISTER
arrow icon

Rive

React Native SDK Wrapper for Rive

hire us
No items found.

INTRODUCTION

Expanding the user base with <cyan>Rive SDK<cyan> bindings to React Native

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.

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.

APPROACH

The approach and <cyan>work done<cyan>

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.

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.

React Native SDK on Android and 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.

SOLUTION

<cyan>Partnership<cyan> 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.

Rive SDK - results


No items found.

OUTCOME & BENEFITS

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

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

contact

Let's work together!

Need help with React or React Native? Let us know!

I hereby agree for sending me by Callstack.io Sp. z o.o. with seat in Wrocław, by means of electronic communication to the e-mail address indicated by me, commercial information, within the meaning of the Act of 18 July 2002 on the provision of electronic services. For details see our Privacy Policy.