Rive-rnw NPM | npm.io

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

rive-rnw-hero

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.

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.

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!