Skip to content

Commit 6067cd8

Browse files
mfazekasmfazekas
authored
chore: add an expo based example as well (#20)
* refactor: simplify example menu * chore: expo-eample * chore: refactor examples to have metadata in each example * chore: expo-examples * chore: enable react-compiler * chore: pages has only index but no calculated stuff => pages list, also old app should use PageList * fix prepare
1 parent d1f2353 commit 6067cd8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+5558
-320
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,8 @@ android/keystores/debug.keystore
7171

7272
# Expo
7373
.expo/
74+
expo-example/ios
75+
expo-example/android
7476

7577
# Turborepo
7678
.turbo/

‎eslint.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export default defineConfig([
2020
plugins: { prettier },
2121
rules: {
2222
'react/react-in-jsx-scope': 'off',
23+
'@typescript-eslint/no-unused-vars': 'off',
2324
'prettier/prettier': [
2425
'error',
2526
{

‎example/babel.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const root = path.resolve(__dirname, '..');
77
module.exports = getConfig(
88
{
99
presets: ['module:@react-native/babel-preset'],
10+
plugins: [['babel-plugin-react-compiler', {}]],
1011
},
1112
{ root, pkg }
1213
);

‎example/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"@react-native/metro-config": "0.79.2",
3131
"@react-native/typescript-config": "0.79.2",
3232
"@types/react": "^19.0.0",
33+
"babel-plugin-react-compiler": "^1.0.0",
3334
"react-native-builder-bob": "^0.40.10"
3435
},
3536
"engines": {

‎example/src/App.tsx‎

Lines changed: 20 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,12 @@ import {
77
} from 'react-native';
88
import { NavigationContainer } from '@react-navigation/native';
99
import { createStackNavigator } from '@react-navigation/stack';
10-
import RiveFileLoadingExample from './pages/RiveFileLoadingExample';
11-
import DataBindingExample from './pages/RiveDataBindingExample';
12-
import TemplatePage from './pages/TemplatePage';
13-
import EventsExample from './pages/RiveEventsExample';
14-
import StateMachineInputsExample from './pages/RiveStateMachineInputsExample';
15-
import TextRunExample from './pages/RiveTextRunExample';
16-
import OutOfBandAssets from './pages/OutOfBandAssets';
10+
import { PagesList } from './PagesList';
1711

1812
type RootStackParamList = {
1913
Home: undefined;
20-
RiveFileLoading: undefined;
21-
RiveDataBinding: undefined;
22-
RiveEvents: undefined;
23-
RiveStateMachineInputs: undefined;
24-
RiveTextRun: undefined;
25-
Template: undefined;
26-
OutOfBandAssets: undefined;
14+
} & {
15+
[K in (typeof PagesList)[number]['id']]: undefined;
2716
};
2817

2918
const Stack = createStackNavigator<RootStackParamList>();
@@ -33,50 +22,15 @@ function HomeScreen({ navigation }: { navigation: any }) {
3322
<ScrollView style={styles.container}>
3423
<Text style={styles.header}>Rive React Native Examples</Text>
3524
<View style={styles.buttonContainer}>
36-
<TouchableOpacity
37-
style={styles.button}
38-
onPress={() => navigation.navigate('RiveFileLoading')}
39-
>
40-
<Text style={styles.buttonText}>Rive File Loading Examples</Text>
41-
</TouchableOpacity>
42-
<TouchableOpacity
43-
style={styles.button}
44-
onPress={() => navigation.navigate('RiveDataBinding')}
45-
>
46-
<Text style={styles.buttonText}>Rive Data Binding Example</Text>
47-
</TouchableOpacity>
48-
<TouchableOpacity
49-
style={styles.button}
50-
onPress={() => navigation.navigate('RiveEvents')}
51-
>
52-
<Text style={styles.buttonText}>Rive Events Example</Text>
53-
</TouchableOpacity>
54-
<TouchableOpacity
55-
style={styles.button}
56-
onPress={() => navigation.navigate('RiveStateMachineInputs')}
57-
>
58-
<Text style={styles.buttonText}>
59-
Rive State Machine Inputs Example
60-
</Text>
61-
</TouchableOpacity>
62-
<TouchableOpacity
63-
style={styles.button}
64-
onPress={() => navigation.navigate('RiveTextRun')}
65-
>
66-
<Text style={styles.buttonText}>Rive Text Run Example</Text>
67-
</TouchableOpacity>
68-
<TouchableOpacity
69-
style={styles.button}
70-
onPress={() => navigation.navigate('OutOfBandAssets')}
71-
>
72-
<Text style={styles.buttonText}>Out of band assets</Text>
73-
</TouchableOpacity>
74-
<TouchableOpacity
75-
style={styles.button}
76-
onPress={() => navigation.navigate('Template')}
77-
>
78-
<Text style={styles.buttonText}>Template Page</Text>
79-
</TouchableOpacity>
25+
{PagesList.map(({ id, name }) => (
26+
<TouchableOpacity
27+
key={id}
28+
style={styles.button}
29+
onPress={() => navigation.navigate(id)}
30+
>
31+
<Text style={styles.buttonText}>{name}</Text>
32+
</TouchableOpacity>
33+
))}
8034
</View>
8135
</ScrollView>
8236
);
@@ -101,41 +55,14 @@ export default function App() {
10155
component={HomeScreen}
10256
options={{ title: 'Rive Examples' }}
10357
/>
104-
<Stack.Screen
105-
name="RiveFileLoading"
106-
component={RiveFileLoadingExample}
107-
options={{ title: 'Rive File Loading' }}
108-
/>
109-
<Stack.Screen
110-
name="RiveDataBinding"
111-
component={DataBindingExample}
112-
options={{ title: 'Rive Data Binding' }}
113-
/>
114-
<Stack.Screen
115-
name="RiveEvents"
116-
component={EventsExample}
117-
options={{ title: 'Rive Events' }}
118-
/>
119-
<Stack.Screen
120-
name="RiveStateMachineInputs"
121-
component={StateMachineInputsExample}
122-
options={{ title: 'Rive State Machine Inputs' }}
123-
/>
124-
<Stack.Screen
125-
name="RiveTextRun"
126-
component={TextRunExample}
127-
options={{ title: 'Rive Text Runs' }}
128-
/>
129-
<Stack.Screen
130-
name="OutOfBandAssets"
131-
component={OutOfBandAssets}
132-
options={{ title: 'Out of Band Asset' }}
133-
/>
134-
<Stack.Screen
135-
name="Template"
136-
component={TemplatePage}
137-
options={{ title: 'Template' }}
138-
/>
58+
{PagesList.map(({ id, component, name }) => (
59+
<Stack.Screen
60+
key={id}
61+
name={id}
62+
component={component}
63+
options={{ title: name }}
64+
/>
65+
))}
13966
</Stack.Navigator>
14067
</NavigationContainer>
14168
);

‎example/src/PagesList.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import type { Metadata } from './helpers/metadata';
2+
import * as Pages from './pages';
3+
4+
type PageIds = keyof typeof Pages;
5+
type PageType = React.ComponentType & { metadata?: Metadata };
6+
7+
const PageEntries = Object.entries(Pages) as [PageIds, PageType][];
8+
9+
export type PageItem = {
10+
id: PageIds;
11+
name: string;
12+
description: string;
13+
component: React.ComponentType;
14+
};
15+
16+
const PagesList: PageItem[] = PageEntries.map(([key, Component]) => ({
17+
id: key,
18+
name: Component.metadata?.name ?? key,
19+
description: Component.metadata?.description ?? '',
20+
component: Component,
21+
}));
22+
23+
export { PagesList };

‎example/src/helpers/metadata.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export type Metadata = {
2+
name: string;
3+
description: string;
4+
};

‎example/src/pages/OutOfBandAssets.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
RiveView,
1414
} from 'react-native-rive';
1515
import { Picker } from '@react-native-picker/picker';
16+
import { type Metadata } from '../helpers/metadata';
1617

1718
export default function StateMachine() {
1819
const [uri, setUri] = React.useState('https://picsum.photos/id/372/500/500');
@@ -142,3 +143,9 @@ const styles = StyleSheet.create({
142143
alignSelf: 'stretch',
143144
},
144145
});
146+
147+
StateMachine.metadata = {
148+
name: 'Out-of-Band Assets',
149+
description:
150+
'Shows how to load referenced assets like fonts and images that are not embedded in the Rive file',
151+
} satisfies Metadata;

‎example/src/pages/RiveDataBindingExample.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
useRiveTrigger,
1313
useRiveFile,
1414
} from 'react-native-rive';
15+
import { type Metadata } from '../helpers/metadata';
1516

1617
export default function WithRiveFile() {
1718
const { riveFile, isLoading, error } = useRiveFile(
@@ -113,6 +114,12 @@ function DataBindingExample({
113114
);
114115
}
115116

117+
WithRiveFile.metadata = {
118+
name: 'Data Binding',
119+
description:
120+
'Shows data binding with view models, including number, string, color properties and triggers',
121+
} satisfies Metadata;
122+
116123
const styles = StyleSheet.create({
117124
container: {
118125
flex: 1,

‎example/src/pages/RiveEventsExample.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
type RiveEvent,
99
RiveEventType,
1010
} from 'react-native-rive';
11+
import { type Metadata } from '../helpers/metadata';
1112

1213
export default function EventsExample() {
1314
const { riveViewRef, setHybridRef } = useRive();
@@ -140,3 +141,8 @@ const styles = StyleSheet.create({
140141
marginBottom: 5,
141142
},
142143
});
144+
145+
EventsExample.metadata = {
146+
name: 'Events',
147+
description: 'Demonstrates how to listen to and handle Rive events',
148+
} satisfies Metadata;

0 commit comments

Comments
 (0)