chore: add example view problem

example/src/pages/EventsDetailView.tsx

@@ -0,0 +1,90 @@
+import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
+import { Fit, RiveView, useRive, useRiveFile } from 'react-native-rive';
+import { type Metadata } from '../helpers/metadata';
+
+/**
+ * A secondary view with a Rive animation
+ */
+export default function EventsDetailView() {
+  const { setHybridRef } = useRive();
+  const { riveFile, isLoading, error } = useRiveFile(
+    require('../../assets/rive/rewards.riv')
+  );
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Detail View</Text>
+      <Text style={styles.subtitle}>
+        This is a separate view with a different Rive animation
+      </Text>
+      <View style={styles.riveContainer}>
+        {isLoading ? (
+          <ActivityIndicator size="large" color="#0000ff" />
+        ) : error ? (
+          <Text style={styles.errorText}>{error}</Text>
+        ) : riveFile ? (
+          <RiveView
+            style={styles.rive}
+            autoPlay={true}
+            fit={Fit.Contain}
+            file={riveFile}
+            hybridRef={setHybridRef}
+          />
+        ) : null}
+      </View>
+      <Text style={styles.instructions}>
+        Press the back button to return to the Events example
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    padding: 20,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    marginTop: 20,
+    marginBottom: 10,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  riveContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5f5f5',
+    borderRadius: 10,
+    overflow: 'hidden',
+  },
+  rive: {
+    width: '100%',
+    height: '100%',
+  },
+  errorText: {
+    color: 'red',
+    textAlign: 'center',
+    padding: 20,
+  },
+  instructions: {
+    fontSize: 14,
+    color: '#999',
+    textAlign: 'center',
+    marginTop: 20,
+    fontStyle: 'italic',
+  },
+});
+
+EventsDetailView.metadata = {
+  name: 'Events Detail',
+  description: 'A secondary view with a Rive animation',
+} satisfies Metadata;

example/src/pages/RiveEventsExample.tsx

@@ -1,4 +1,10 @@
-import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ActivityIndicator,
+  TouchableOpacity,
+} from 'react-native';
 import { useState, useEffect } from 'react';
 import {
   Fit,
@@ -17,7 +23,7 @@ import { type Metadata } from '../helpers/metadata';
  *
  * Demonstrates getting and handling Rive events
  */
-export default function EventsExample() {
+export default function EventsExample({ navigation }: { navigation: any }) {
   const { riveViewRef, setHybridRef } = useRive();
   const { riveFile, isLoading, error } = useRiveFile(
     require('../../assets/rive/rating.riv')
@@ -60,6 +66,14 @@ export default function EventsExample() {
           />
         ) : null}
       </View>
+      <TouchableOpacity
+        style={styles.navigateButton}
+        onPress={() => navigation.navigate('EventsDetailView')}
+      >
+        <Text style={styles.navigateButtonText}>
+          Go to Detail View with Another Rive Animation
+        </Text>
+      </TouchableOpacity>
       {lastEvent && (
         <View style={styles.eventInfo}>
           <Text style={styles.eventTitle}>Last Event:</Text>
@@ -146,6 +160,19 @@ const styles = StyleSheet.create({
     marginTop: 10,
     marginBottom: 5,
   },
+  navigateButton: {
+    backgroundColor: '#007AFF',
+    padding: 15,
+    borderRadius: 10,
+    marginTop: 15,
+    marginBottom: 10,
+  },
+  navigateButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
 });
 
 EventsExample.metadata = {