https://github.com/clearlysid/rive-rnw

A Rive runtime for react-native-web. Write once, Rive anywhere.
https://github.com/clearlysid/rive-rnw

animation react-native react-native-web rive

Last synced: 17 days ago
JSON representation

A Rive runtime for react-native-web. Write once, Rive anywhere.

• Host: GitHub
• URL: https://github.com/clearlysid/rive-rnw
• Owner: clearlysid
• License: mit
• Created: 2022-10-23T04:47:31.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-10-27T03:10:56.000Z (about 2 years ago)
• Last Synced: 2024-10-29T22:38:26.919Z (2 months ago)
• Topics: animation, react-native, react-native-web, rive
• Language: Java
• Homepage: https://clearlysid.github.io/rive-rnw
• Size: 521 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Rive for React Native Web (Beta ⚠️)

![rive-rnw-hero](https://user-images.githubusercontent.com/30227512/197517924-6ac12076-2963-4822-8e61-98e49361a94d.png)

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](https://necolas.github.io/react-native-web/).

## Table of contents

-   ⭐ [Rive Overview](#rive-overview)

-   🚀 [Getting Started & API docs](#getting-started)

-   🔍 [Supported Platforms](#supported-platforms)

-   🤝 [Issues and Contributing](#issues-and-contributing)

## Rive Overview

[Rive](https://rive.app) 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](https://rive.app/)

-   📘 [General help docs](https://help.rive.app/)

-   🛠 [Resources for building in Rive](https://rive.app/resources/)

## Getting Started

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 (

    

  );

}

```

### 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](https://help.rive.app/runtimes/overview/react-native/props).

### Examples

There's a demo provided at `/example` of this repo. It is easy to build off of and works on all platforms mentioned below including the [web](https://clearlysid.github.io/rive-rnw/).

## Supported Platforms

Since this library has a dependency on the [Rive React Native](https://github.com/rive-app/rive-react-native/) and [Rive WASM](https://github.com/rive-app/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](https://github.com/headout). Please raise any issues you encounter on the [Issues](https://github.com/clearlysid/rive-rnw/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](https://github.com/rive-app) for making a great product!

If you like this project, consider starring it on Github ⭐ and following me on [Twitter](https://twitter.com/clearlysid) 🐦.

## License

MIT Licensed. Copyright (c) Siddharth Jha 2022.