Rive React Native
A React Native runtime library for Rive.
This library is a wrapper around the iOS/Android runtime, providing a component and ref pattern for React Native applications.
Table of contents
⭐Rive Overview 🚀Getting Started & API docs 🔍Supported Devices 📚Examples 🏃Migration Guides 👨💻Contributing ❓Issues
Rive is a real-time interactive design and animation tool that helps teams create and run interactive animations anywhere. Designers and developers use our collaborative editor to create motion graphics that respond to different states and user inputs. Our lightweight open-source runtime libraries allow them to load their animations into apps, games, and websites.
Follow along with the link below for a quick start in getting Rive React Native integrated into your multi-platform applications.
Getting Started with Rive in React Native
Because this runtime library has a dependency on the Rive Android and Rive iOS runtimes, the supported devices align with each of these dependencies minimum supported devices, as well as the minimum device requirements of the React Native framework.
- iOS: 14.0+
- Minimum SDK version: 21
- Target SDK version: 33
Check out the
example/ folder to run an example application using the Rive React Native runtime. It runs on the local build of this library, and showcases a number of ways to use the Rive component and
useRef hook pattern:
- Setting a Rive file via a URL, or asset in the Android/iOS projects
- Setting layout and loop mode options
- Displaying single or multiple animations / artboards on one component
- Setting up and maniuplating a state machine via inputs
- ...and more!
Using an older version of the runtime and need to learn how to upgrade to the latest version? Check out the migration guides below in our help center that help guide you through version bumps; breaking changes and all!
We love contributions! Check out our contributing docs to get more details into how to run this project, the examples, and more all locally.
Have an issue with using the runtime, or want to suggest a feature/API to help make your development life better? Log an issue in our issues tab! You can also browse older issues and discussion threads there to see solutions that may have worked for common problems.