rive-app / rive-app/rive-react-native

RiveReactNativeView was not found

Open
#131 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
783
Forks
81
Avg merge
3d 6h
Merged PRs (30d)
3

Description

<-- Thanks for using Rive!

If something isn't working like you expected, please:

If you think you found a bug or if you can't find what you're looking for
in our docs, fill out the template below.

-->

Description

Trying to Explore Rive Animation in React Native. Created the new project using react-native CLI . I installed the rive-react-native using yarn. Imported the Rive from rive-react-native but it's throwing the error that "RiveReactNativeView was not found in a UI Manager"

Provide a Repro

Here is my App.js
import React from 'react';

import Rive from 'rive-react-native';

import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
} from 'react-native';

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

export default App;

-->

Source .riv/.rev file

<--
Attaching runtime-exported .riv file that reproduces the issue is immensely helpful for our team to identify the problem as fast as possible and fix it.
Please also include the source (.rev) by downloading a backup from the Editor.

N.B. Because GitHub only supports certain file types use a ZIP archive to upload .riv/.rev files to this issue.

You can also privately share the .riv/.rev file with us at hello@rive.app.
-->

Expected behavior

<-- A clear and concise description of what you expected to happen. -->

Screenshots

<-- If applicable, add screenshots to help explain your problem. -->

Screenshot

Device & Versions (please complete the following information)
  • Device: [e.g. Android Emulator, iOS Simulator]
  • OS: [e.g. Android SDK API Level 30, iOS 14.5]
  • NPM Version: [Copy-paste the output of npm --version e.g.: 7.10.2]
Additional context

<-- Add any other context about the problem here. -->

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the App.js reproduction and the rive-react-native import, then reproduce the report using a project created with the React Native CLI. Inspect how RiveReactNativeView is exposed to the UI Manager. Done means the Rive component renders without the reported UI Manager error.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.