Rive for React Native Web (⚠️ WIP ⚠️)

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

Table of contents

• ⭐ Rive Overview
• 🚀 Getting Started & API docs
• 🔍 Supported Platforms
• 🤝 Issues and Contributing

Rive Overview

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

Getting Started

Start by installing this package with:

yarn add rive-rnw

Then use it in your app like so:

import Rive from "rive-rnw";

function App() {
  return (
    <Rive
      url="https://cdn.rive.app/animations/vehicles.riv"
      style={{ width: 400, height: 400 }}
    />
  );
}

API Documentation

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.

Examples

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.

Supported Platforms

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

Issues and Contributing

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

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

License

MIT Licensed. Copyright (c) Siddharth Jha 2022.