animation test for menu

Author: tslater

App.tsx

@@ -1,21 +1,17 @@
-import { StatusBar } from 'expo-status-bar';
 import { StyleSheet, Text, View } from 'react-native';
-import { OOBAssetRiveTest } from './OOBAssetRiveTest';
+import { RiveTest } from './RiveTest';
 
 export default function App() {
   return (
     <View style={styles.container}>
-      <OOBAssetRiveTest />
-      <Text>Open up App.tsx to start working on your app!</Text>
-      <StatusBar style="auto" />
+      <RiveTest />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: 'pink',
     alignItems: 'center',
     justifyContent: 'center',
   },

OOBAssetRiveTest.tsx

@@ -0,0 +1,49 @@
+import type React from "react";
+import { SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';
+import Rive,  { Alignment, Fit, type RNRiveError } from 'rive-react-native';
+// @ts-ignore
+import resolveAssetSource from "react-native/Libraries/Image/resolveAssetSource";
+
+
+// detects if it is an http or file url
+const stringIsUrl = (uri: string) => {
+  return uri.startsWith("http") || uri.startsWith("file");
+};
+
+export const RiveTest = () => {
+
+  // this allows the rive asset to be loaded locally using require() in expo during development AND in production
+  const source = require('./assets/main_menu.riv');
+  const resolved = resolveAssetSource(source);
+  const uriIsUrl = stringIsUrl(resolved.uri);
+
+  return (
+    <SafeAreaView style={styles.safeAreaViewContainer}>
+        <Rive
+          autoplay={true}
+          fit={Fit.FitWidth}
+          alignment={Alignment.BottomCenter}
+          style={styles.box}
+          // stateMachineName="State Machine 1"
+          // artboardName="Artboard"
+          onError={(riveError: RNRiveError) => {
+            console.log(riveError);
+          }}
+          resourceName={!uriIsUrl ? resolved.uri : undefined}
+          url={uriIsUrl ? resolved.uri : undefined}
+        />
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeAreaViewContainer: {
+    flex: 1,
+    width: '100%',
+  },
+  box: {
+    width: '100%',
+    height: 500,
+    marginVertical: 20,
+  },
+});

RiveTest.tsx

@@ -9,12 +9,12 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "expo": "~52.0.30",
+    "expo": "^52.0.43",
     "expo-dev-client": "~5.0.11",
     "expo-status-bar": "~2.0.1",
     "react": "18.3.1",
     "react-native": "0.76.6",
-    "rive-react-native": "^8.4.0"
+    "rive-react-native": "^9.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",