chore: refactor examples to have metadata in each example

Author: mfazekas

eslint.config.mjs

@@ -20,6 +20,7 @@ export default defineConfig([
     plugins: { prettier },
     rules: {
       'react/react-in-jsx-scope': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
       'prettier/prettier': [
         'error',
         {

example/src/pages/OutOfBandAssets.tsx

@@ -13,6 +13,7 @@ import {
   RiveView,
 } from 'react-native-rive';
 import { Picker } from '@react-native-picker/picker';
+import { type Metadata } from './metadata';
 
 export default function StateMachine() {
   const [uri, setUri] = React.useState('https://picsum.photos/id/372/500/500');
@@ -142,3 +143,9 @@ const styles = StyleSheet.create({
     alignSelf: 'stretch',
   },
 });
+
+StateMachine.metadata = {
+  name: 'Out-of-Band Assets',
+  description:
+    'Shows how to load referenced assets like fonts and images that are not embedded in the Rive file',
+} satisfies Metadata;

example/src/pages/RiveDataBindingExample.tsx

@@ -12,6 +12,7 @@ import {
   useRiveTrigger,
   useRiveFile,
 } from 'react-native-rive';
+import { type Metadata } from './metadata';
 
 export default function WithRiveFile() {
   const { riveFile, isLoading, error } = useRiveFile(
@@ -113,6 +114,12 @@ function DataBindingExample({
   );
 }
 
+WithRiveFile.metadata = {
+  name: 'Data Binding',
+  description:
+    'Shows data binding with view models, including number, string, color properties and triggers',
+} satisfies Metadata;
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

example/src/pages/RiveEventsExample.tsx

@@ -8,6 +8,7 @@ import {
   type RiveEvent,
   RiveEventType,
 } from 'react-native-rive';
+import { type Metadata } from './metadata';
 
 export default function EventsExample() {
   const { riveViewRef, setHybridRef } = useRive();
@@ -140,3 +141,8 @@ const styles = StyleSheet.create({
     marginBottom: 5,
   },
 });
+
+EventsExample.metadata = {
+  name: 'Events',
+  description: 'Demonstrates how to listen to and handle Rive events',
+} satisfies Metadata;

example/src/pages/RiveFileLoadingExample.tsx

@@ -14,6 +14,7 @@ import {
 } from 'react-native-rive';
 import { useState, useEffect } from 'react';
 import { downloadFileAsArrayBuffer } from '../helpers/fileHelpers';
+import { type Metadata } from './metadata';
 
 const LOADING_METHODS = {
   SOURCE: 'Source',
@@ -141,6 +142,12 @@ export default function RiveFileLoadingExample() {
   );
 }
 
+RiveFileLoadingExample.metadata = {
+  name: 'File Loading',
+  description:
+    'Demonstrates different methods to load Rive files: from source, URL, resource, and ArrayBuffer',
+} satisfies Metadata;
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

example/src/pages/RiveStateMachineInputsExample.tsx

@@ -1,6 +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';
 
 export default function StateMachineInputsExample() {
   const { riveViewRef, setHybridRef } = useRive();
@@ -82,3 +83,9 @@ const styles = StyleSheet.create({
     padding: 20,
   },
 });
+
+StateMachineInputsExample.metadata = {
+  name: 'State Machine Inputs',
+  description:
+    'Shows how to get and set state machine input values programmatically',
+} satisfies Metadata;

example/src/pages/RiveTextRunExample.tsx

@@ -1,6 +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';
 
 export default function TextRunExample() {
   const { riveViewRef, setHybridRef } = useRive();
@@ -79,3 +80,9 @@ const styles = StyleSheet.create({
     padding: 20,
   },
 });
+
+TextRunExample.metadata = {
+  name: 'Text Run',
+  description:
+    'Demonstrates getting and setting text run values in Rive animations',
+} satisfies Metadata;

example/src/pages/TemplatePage.tsx

@@ -1,4 +1,5 @@
 import { View, Text, StyleSheet } from 'react-native';
+import { type Metadata } from './metadata';
 
 export default function TemplatePage() {
   return (
@@ -9,6 +10,11 @@ export default function TemplatePage() {
   );
 }
 
+TemplatePage.metadata = {
+  name: 'Template',
+  description: 'A template page for creating new Rive examples',
+} satisfies Metadata;
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

example/src/pages/index.ts

@@ -0,0 +1,23 @@
+import type { Metadata } from './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

@@ -0,0 +1,4 @@
+export type Metadata = {
+  name: string;
+  description: string;
+};