Rive runtime for react-native-web
npm install rive-rnwThis library is a wrapper around Rive's iOS/Android runtime and the Web/Canvas runtime, providing a singular component and ref pattern for cross-platform applications built using react-native-web.
- ⭐ Rive Overview
- 🚀 Getting Started & API docs
- 🔍 Supported Platforms
- 🤝 Issues and Contributing
Rive is a real-time interactive design and animation tool that helps teams create and run interactive animations anywhere. This lightweight library allows developers to load Rive animations into their apps.
- 🏡 Rive Homepage
- 📘 General help docs
- 🛠 Resources for building in Rive
Start by installing this package with:
``bash`
yarn add rive-rnw
Then use it in your app like so:
`jsx
import Rive from "rive-rnw";
function App() {
return (
style={{ width: 400, height: 400 }}
/>
);
}
`
This API is a superset of the official React Native Runtime API. For a detailed list of props and methods available to you and for more advanced use-cases, refer to this documentation.
I've provided a demo at /example` of this repo. It works on all platforms mentioned below and is easy to build off of — here's the 🌐 Web Link.
Since this library has a dependency on the Rive React Native and Rive WASM 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+
- Android:
- Minimum SDK version: 21
- Target SDK version: 31
- Browsers: All major browsers
I'm constantly trying to improve this package and plan to use it for work projects at @headout. Please raise any issues you encounter on the Issues page.
I would also love for more people to start contributing to open-source. Any PRs with improvements, bugfixes or documentation are always welcome!
Thanks to the Rive team for making a great product!
If you like this project, consider giving it a star ⭐ on Github and following me on Twitter 🐦.
MIT Licensed. Copyright (c) Siddharth Jha 2022.