chore: pages has only index but no calculated stuff => pages list, also old app should use PageList

Author: mfazekas

example/src/App.tsx

@@ -7,52 +7,12 @@ import {
 } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
-import RiveFileLoadingExample from './pages/RiveFileLoadingExample';
-import DataBindingExample from './pages/RiveDataBindingExample';
-import TemplatePage from './pages/TemplatePage';
-import EventsExample from './pages/RiveEventsExample';
-import StateMachineInputsExample from './pages/RiveStateMachineInputsExample';
-import TextRunExample from './pages/RiveTextRunExample';
-import OutOfBandAssets from './pages/OutOfBandAssets';
-
-const Examples = [
-  {
-    title: 'Rive File Loading Examples',
-    screenId: 'RiveFileLoading',
-    component: RiveFileLoadingExample,
-  },
-  {
-    title: 'Rive Data Binding Example',
-    screenId: 'RiveDataBinding',
-    component: DataBindingExample,
-  },
-  {
-    title: 'Rive Events Example',
-    screenId: 'RiveEvents',
-    component: EventsExample,
-  },
-  {
-    title: 'Rive State Machine Inputs Example',
-    screenId: 'RiveStateMachineInputs',
-    component: StateMachineInputsExample,
-  },
-  {
-    title: 'Rive Text Run Example',
-    screenId: 'RiveTextRun',
-    component: TextRunExample,
-  },
-  {
-    title: 'Out of band assets',
-    screenId: 'OutOfBandAssets',
-    component: OutOfBandAssets,
-  },
-  { title: 'Template Page', screenId: 'Template', component: TemplatePage },
-] as const;
+import { PagesList } from './PagesList';
 
 type RootStackParamList = {
   Home: undefined;
 } & {
-  [K in (typeof Examples)[number]['screenId']]: undefined;
+  [K in (typeof PagesList)[number]['id']]: undefined;
 };
 
 const Stack = createStackNavigator<RootStackParamList>();
@@ -62,13 +22,13 @@ function HomeScreen({ navigation }: { navigation: any }) {
     <ScrollView style={styles.container}>
       <Text style={styles.header}>Rive React Native Examples</Text>
       <View style={styles.buttonContainer}>
-        {Examples.map(({ title, screenId }) => (
+        {PagesList.map(({ id, name }) => (
           <TouchableOpacity
-            key={screenId}
+            key={id}
             style={styles.button}
-            onPress={() => navigation.navigate(screenId)}
+            onPress={() => navigation.navigate(id)}
           >
-            <Text style={styles.buttonText}>{title}</Text>
+            <Text style={styles.buttonText}>{name}</Text>
           </TouchableOpacity>
         ))}
       </View>
@@ -95,12 +55,12 @@ export default function App() {
           component={HomeScreen}
           options={{ title: 'Rive Examples' }}
         />
-        {Examples.map(({ screenId, component, title }) => (
+        {PagesList.map(({ id, component, name }) => (
           <Stack.Screen
-            key={screenId}
-            name={screenId}
+            key={id}
+            name={id}
             component={component}
-            options={{ title }}
+            options={{ title: name }}
           />
         ))}
       </Stack.Navigator>

example/src/PagesList.ts

@@ -0,0 +1,23 @@
+import type { Metadata } from './helpers/metadata';
+import * as Pages from './pages';
+
+type PageIds = keyof typeof Pages;
+type PageType = React.ComponentType & { metadata?: Metadata };
+
+const PageEntries = Object.entries(Pages) as [PageIds, PageType][];
+
+export type PageItem = {
+  id: PageIds;
+  name: string;
+  description: string;
+  component: React.ComponentType;
+};
+
+const PagesList: PageItem[] = PageEntries.map(([key, Component]) => ({
+  id: key,
+  name: Component.metadata?.name ?? key,
+  description: Component.metadata?.description ?? '',
+  component: Component,
+}));
+
+export { PagesList };

example/src/pages/metadata.ts example/src/helpers/metadata.tsexample/src/pages/metadata.ts renamed to example/src/helpers/metadata.ts

@@ -13,7 +13,7 @@ import {
   RiveView,
 } from 'react-native-rive';
 import { Picker } from '@react-native-picker/picker';
-import { type Metadata } from './metadata';
+import { type Metadata } from '../helpers/metadata';
 
 export default function StateMachine() {
   const [uri, setUri] = React.useState('https://picsum.photos/id/372/500/500');

example/src/pages/OutOfBandAssets.tsx

@@ -12,7 +12,7 @@ import {
   useRiveTrigger,
   useRiveFile,
 } from 'react-native-rive';
-import { type Metadata } from './metadata';
+import { type Metadata } from '../helpers/metadata';
 
 export default function WithRiveFile() {
   const { riveFile, isLoading, error } = useRiveFile(

example/src/pages/RiveDataBindingExample.tsx

@@ -8,7 +8,7 @@ import {
   type RiveEvent,
   RiveEventType,
 } from 'react-native-rive';
-import { type Metadata } from './metadata';
+import { type Metadata } from '../helpers/metadata';
 
 export default function EventsExample() {
   const { riveViewRef, setHybridRef } = useRive();

example/src/pages/RiveEventsExample.tsx

@@ -14,7 +14,7 @@ import {
 } from 'react-native-rive';
 import { useState, useEffect } from 'react';
 import { downloadFileAsArrayBuffer } from '../helpers/fileHelpers';
-import { type Metadata } from './metadata';
+import { type Metadata } from '../helpers/metadata';
 
 const LOADING_METHODS = {
   SOURCE: 'Source',

example/src/pages/RiveFileLoadingExample.tsx

@@ -1,7 +1,7 @@
 import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
 import { useEffect } from 'react';
 import { Fit, RiveView, useRive, useRiveFile } from 'react-native-rive';
-import { type Metadata } from './metadata';
+import { type Metadata } from '../helpers/metadata';
 
 export default function StateMachineInputsExample() {
   const { riveViewRef, setHybridRef } = useRive();

example/src/pages/RiveStateMachineInputsExample.tsx

@@ -1,7 +1,7 @@
 import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
 import { useEffect } from 'react';
 import { Fit, RiveView, useRive, useRiveFile } from 'react-native-rive';
-import { type Metadata } from './metadata';
+import { type Metadata } from '../helpers/metadata';
 
 export default function TextRunExample() {
   const { riveViewRef, setHybridRef } = useRive();

example/src/pages/RiveTextRunExample.tsx

@@ -1,5 +1,5 @@
 import { View, Text, StyleSheet } from 'react-native';
-import { type Metadata } from './metadata';
+import { type Metadata } from '../helpers/metadata';
 
 export default function TemplatePage() {
   return (