diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 204db432..75f29e77 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -9,7 +9,8 @@ We want this community to be friendly and respectful to each other. Please follo This project is a monorepo managed using [Yarn workspaces](https://yarnpkg.com/features/workspaces). It contains the following packages: - The library package in the root directory. -- An example app in the `example/` directory. +- A vanilla React Native example app in the `example/` directory. +- An Expo example app in the `expo-example/` directory. To get started with the project, run `yarn` in the root directory to install the required dependencies for each package: @@ -21,26 +22,26 @@ yarn This project uses Nitro Modules. If you're not familiar with how Nitro works, make sure to check the [Nitro Modules Docs](https://nitro.margelo.com/). -You need to run [Nitrogen](https://nitro.margelo.com/docs/nitrogen) to generate the boilerplate code required for this project. The example app will not build without this step. +You need to run [Nitrogen](https://nitro.margelo.com/docs/nitrogen) to generate the boilerplate code required for this project. -Run **Nitrogen** in following cases: - -- When you make changes to any `*.nitro.ts` files. -- When running the project for the first time (since the generated files are not committed to the repository). - -To invoke **Nitrogen**, use the following command: +Run **Nitrogen** when you make changes to any `*.nitro.ts` files: ```sh yarn nitrogen ``` -The [example app](/example/) demonstrates usage of the library. You need to run it to test any changes you make. +This also runs automatically via the `prepare` script when you run `yarn`. + +The example apps demonstrate usage of the library. You need to run one to test any changes you make. -It is configured to use the local version of the library, so any changes you make to the library's source code will be reflected in the example app. Changes to the library's JavaScript code will be reflected in the example app without a rebuild, but native code changes will require a rebuild of the example app. +Both are configured to use the local version of the library, so any changes you make to the library's source code will be reflected in the example apps. Changes to the library's JavaScript code will be reflected without a rebuild, but native code changes will require a rebuild. -If you want to use Android Studio or XCode to edit the native code, you can open the `example/android` or `example/ios` directories respectively in those editors. To edit the Objective-C or Swift files, open `example/ios/RiveExample.xcworkspace` in XCode and find the source files at `Pods > Development Pods > react-native-rive`. +To edit native code in Xcode or Android Studio, you can use: -To edit the Java or Kotlin files, open `example/android` in Android studio and find the source files at `react-native-rive` under `Android`. +```sh +yarn dev:ios # Opens iOS project in Xcode +yarn dev:android # Opens Android project in Android Studio +``` You can use various commands from the root directory to work with the project. @@ -62,14 +63,6 @@ To run the example app on iOS: yarn example ios ``` -To confirm that the app is running with the new architecture, you can check the Metro logs for a message like this: - -```sh -Running "RiveExample" with {"fabric":true,"initialProps":{"concurrentRoot":true},"rootTag":1} -``` - -Note the `"fabric":true` and `"concurrentRoot":true` properties. - Make sure your code passes TypeScript and ESLint. Run the following to verify: ```sh @@ -134,8 +127,6 @@ The `package.json` file contains various scripts for common tasks: ### Sending a pull request -> **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github). - When you're sending a pull request: - Prefer small pull requests focused on one change. diff --git a/README.md b/README.md index 262be6be..edb63bed 100644 --- a/README.md +++ b/README.md @@ -4,63 +4,50 @@ Rive React Native 2.0 ## Requirements -- React Native 0.79 or later -- Xcode 16.0 or later +- **React Native**: 0.78 or later (0.79+ recommended for better Android error messages) +- **Expo SDK**: 53 or later (for Expo users) +- **iOS**: 15.1 or later +- **Android**: SDK 24 (Android 7.0) or later +- **Xcode**: 16.4 or later +- **JDK**: 17 or later +- **Nitro Modules**: 0.25.2 or later ## Known Issues -- Error message on Android will not have descriptive messages, this is a [known issue](https://github.com/mrousavy/nitro/issues/382) in React Native and is fixed in RN 0.80 +- Error messages on Android in React Native 0.78-0.79 may not be descriptive, this is a [known issue](https://github.com/mrousavy/nitro/issues/382) in React Native and is fixed in RN 0.80 ## Installation ```sh npm install react-native-rive react-native-nitro-modules +``` > `react-native-nitro-modules` is required as this library relies on [Nitro Modules](https://nitro.margelo.com/). -``` ## Usage ```js -import { - Fit, - RiveView, - type RiveFile, - type RiveViewMethods, - type RiveViewProps, - RiveFileFactory, -} from 'react-native-rive'; -import type { HybridView } from 'react-native-nitro-modules'; -import { useRef } from 'react'; - -// Load Rive files using different methods: -// 1. From URL -const riveFile: RiveFile = await RiveFileFactory.fromURL('https://cdn.rive.app/animations/vehicles.riv'); - -// 2. From Resource (local file) -const riveFile: RiveFile = await RiveFileFactory.fromResource('rewards'); - -// 3. From ArrayBuffer -const arrayBuffer: ArrayBuffer = await downloadFileAsArrayBuffer(url); -const riveFile: RiveFile = await RiveFileFactory.fromBytes(arrayBuffer); - -// Create a ref for the RiveView -const riveRef = useRef>(null); - -// Create a RiveView component - { - if (ref) { - riveRef.current = ref; - } - }, - }} -/> +import { Fit, RiveView, useRiveFile } from 'react-native-rive'; + +function App() { + const { riveFile } = useRiveFile({ + url: 'https://cdn.rive.app/animations/vehicles.riv', + }); + + if (!riveFile) { + return null; + } + + return ( + console.error('Rive error:', error.message)} + style={{ width: '100%', height: 400 }} + /> + ); +} ``` ## Native SDK Version Customization @@ -158,7 +145,7 @@ The following runtime features are currently supported: | Rive Audio | βœ… | Full Rive audio playback supported | | `useRive()` hook | βœ… | Convenient hook to access the Rive View ref after load | | `useRiveFile()` hook | βœ… | Convenient hook to load a Rive file | -| `RiveView` error handling | 🚧 | Error handler for failed view operations | +| `RiveView` error handling | βœ… | Error handler for failed view operations | | `source` .riv file loading | βœ… | Conveniently load .riv files from JS source | | Renderer options | ❌ | Single renderer option available (Rive) | diff --git a/example/README.md b/example/README.md index 3e2c3f85..6f5d430b 100644 --- a/example/README.md +++ b/example/README.md @@ -11,10 +11,6 @@ First, you will need to run **Metro**, the JavaScript build tool for React Nativ To start the Metro dev server, run the following command from the root of your React Native project: ```sh -# Using npm -npm start - -# OR using Yarn yarn start ``` @@ -25,10 +21,6 @@ With Metro running, open a new terminal window/pane from the root of your React ### Android ```sh -# Using npm -npm run android - -# OR using Yarn yarn android ``` @@ -51,10 +43,6 @@ bundle exec pod install For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html). ```sh -# Using npm -npm run ios - -# OR using Yarn yarn ios ``` @@ -62,36 +50,6 @@ If everything is set up correctly, you should see your new app running in the An This is one way to run your app β€” you can also build it directly from Android Studio or Xcode. -## Step 3: Modify your app - -Now that you have successfully run the app, let's make changes! - -Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes β€”Β this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh). - -When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload: - -- **Android**: Press the R key twice or select **"Reload"** from the **Dev Menu**, accessed via Ctrl + M (Windows/Linux) or Cmd ⌘ + M (macOS). -- **iOS**: Press R in iOS Simulator. - -## Congratulations! :tada: - -You've successfully run and modified your React Native App. :partying_face: - -### Now what? - -- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps). -- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started). - # Troubleshooting If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page. - -# Learn More - -To learn more about React Native, take a look at the following resources: - -- [React Native Website](https://reactnative.dev) - learn more about React Native. -- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment. -- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**. -- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts. -- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native. diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index 77139433..f8ed5f9d 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -1357,6 +1357,32 @@ PODS: - React-jsiexecutor - React-RCTFBReactNativeSpec - ReactCommon/turbomodule/core + - react-native-rive (0.1.0): + - DoubleConversion + - glog + - hermes-engine + - NitroModules + - RCT-Folly (= 2024.11.18.00) + - RCTRequired + - RCTTypeSafety + - React-Core + - React-debug + - React-Fabric + - React-featureflags + - React-graphics + - React-hermes + - React-ImageManager + - React-jsi + - React-NativeModulesApple + - React-RCTFabric + - React-renderercss + - React-rendererdebug + - React-utils + - ReactCodegen + - ReactCommon/turbomodule/bridging + - ReactCommon/turbomodule/core + - RiveRuntime (= 6.12.0) + - Yoga - react-native-safe-area-context (5.6.2): - DoubleConversion - glog @@ -1754,32 +1780,6 @@ PODS: - React-logger (= 0.79.2) - React-perflogger (= 0.79.2) - React-utils (= 0.79.2) - - Rive (0.1.0): - - DoubleConversion - - glog - - hermes-engine - - NitroModules - - RCT-Folly (= 2024.11.18.00) - - RCTRequired - - RCTTypeSafety - - React-Core - - React-debug - - React-Fabric - - React-featureflags - - React-graphics - - React-hermes - - React-ImageManager - - React-jsi - - React-NativeModulesApple - - React-RCTFabric - - React-renderercss - - React-rendererdebug - - React-utils - - ReactCodegen - - ReactCommon/turbomodule/bridging - - ReactCommon/turbomodule/core - - RiveRuntime (= 6.12.0) - - Yoga - RiveRuntime (6.12.0) - RNCPicker (2.11.4): - DoubleConversion @@ -1874,6 +1874,7 @@ DEPENDENCIES: - React-logger (from `../node_modules/react-native/ReactCommon/logger`) - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`) - React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`) + - react-native-rive (from `../..`) - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`) - React-oscompat (from `../node_modules/react-native/ReactCommon/oscompat`) @@ -1906,7 +1907,6 @@ DEPENDENCIES: - ReactAppDependencyProvider (from `build/generated/ios`) - ReactCodegen (from `build/generated/ios`) - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) - - Rive (from `../..`) - "RNCPicker (from `../node_modules/@react-native-picker/picker`)" - RNGestureHandler (from `../node_modules/react-native-gesture-handler`) - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) @@ -1996,6 +1996,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon" React-microtasksnativemodule: :path: "../node_modules/react-native/ReactCommon/react/nativemodule/microtasks" + react-native-rive: + :path: "../.." react-native-safe-area-context: :path: "../node_modules/react-native-safe-area-context" React-NativeModulesApple: @@ -2060,8 +2062,6 @@ EXTERNAL SOURCES: :path: build/generated/ios ReactCommon: :path: "../node_modules/react-native/ReactCommon" - Rive: - :path: "../.." RNCPicker: :path: "../node_modules/@react-native-picker/picker" RNGestureHandler: @@ -2109,6 +2109,7 @@ SPEC CHECKSUMS: React-logger: 368570a253f00879a1e4fea24ed4047e72e7bbf3 React-Mapbuffer: c04fcda1c6281fc0a6824c7dcc1633dd217ac1ec React-microtasksnativemodule: ca2804a25fdcefffa0aa942aa23ab53b99614a34 + react-native-rive: 7e008c7a01eba3d71d98813f77b4221699290990 react-native-safe-area-context: bc59472155ffb889a1ffe16c19a04c0cd451562b React-NativeModulesApple: 452b86b29fae99ed0a4015dca3ad9cd222f88abf React-oscompat: ef5df1c734f19b8003e149317d041b8ce1f7d29c @@ -2141,7 +2142,6 @@ SPEC CHECKSUMS: ReactAppDependencyProvider: d5dcc564f129632276bd3184e60f053fcd574d6b ReactCodegen: fda99a79c866370190e162083a35602fdc314e5d ReactCommon: 4d0da92a5eb8da86c08e3ec34bd23ab439fb2461 - Rive: b83a5c913ae79218b9e33f22bbe77d860de54eec RiveRuntime: 8d819993126145fbf5a73089e7634b14b9aa577f RNCPicker: 83c74db2de8274d8a8f3e18d91dea174a708f8c4 RNGestureHandler: bff91bb5ab5688265c70f74180ef718b94f33fe3 diff --git a/expo-example/README.md b/expo-example/README.md index 48dd63ff..44605290 100644 --- a/expo-example/README.md +++ b/expo-example/README.md @@ -1,4 +1,4 @@ -# Welcome to your Expo app πŸ‘‹ +# Expo Example This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app). @@ -7,33 +7,20 @@ This is an [Expo](https://expo.dev) project created with [`create-expo-app`](htt 1. Install dependencies ```bash - npm install + yarn install ``` 2. Start the app ```bash - npx expo start + yarn start ``` -In the output, you'll find options to open the app in a +In the output, you'll find options to open the app in a: - [development build](https://docs.expo.dev/develop/development-builds/introduction/) - [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/) - [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/) -- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo - -You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction). - -## Get a fresh project - -When you're ready, run: - -```bash -npm run reset-project -``` - -This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing. ## Learn more @@ -41,10 +28,3 @@ To learn more about developing your project with Expo, look at the following res - [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides). - [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web. - -## Join the community - -Join our community of developers creating universal apps. - -- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute. -- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions. diff --git a/Rive.podspec b/react-native-rive.podspec similarity index 97% rename from Rive.podspec rename to react-native-rive.podspec index 9c4ddd9f..126df3ca 100644 --- a/Rive.podspec +++ b/react-native-rive.podspec @@ -31,7 +31,7 @@ end Pod::UI.puts "react-native-rive: Rive iOS SDK #{rive_ios_version}" Pod::Spec.new do |s| - s.name = "Rive" + s.name = "react-native-rive" s.version = package["version"] s.summary = package["description"] s.homepage = package["homepage"]