diff --git a/example/assets/rive/quick_start.riv b/example/assets/rive/quick_start.riv new file mode 100644 index 00000000..588a0ad0 Binary files /dev/null and b/example/assets/rive/quick_start.riv differ diff --git a/example/src/pages/QuickStart.tsx b/example/src/pages/QuickStart.tsx new file mode 100644 index 00000000..71cf909f --- /dev/null +++ b/example/src/pages/QuickStart.tsx @@ -0,0 +1,105 @@ +/* + Rive React Native Quick Start (Nitro) + + Resources: + - Getting Started: https://rive.app/docs/runtimes/react-native/react-native + - Data Binding: https://rive.app/docs/runtimes/data-binding +*/ + +import { useEffect, useMemo } from 'react'; +import { Button, View, StyleSheet } from 'react-native'; +import { SafeAreaView } from 'react-native-safe-area-context'; +import { + RiveView, + useRive, + useRiveFile, + useRiveNumber, + useRiveTrigger, + Fit, + DataBindMode, +} from '@rive-app/react-native'; +import type { Metadata } from '../helpers/metadata'; + +export default function QuickStart() { + const { riveFile } = useRiveFile( + require('../../assets/rive/quick_start.riv') + ); + const { riveViewRef, setHybridRef } = useRive(); + const viewModelInstance = useMemo( + () => riveViewRef?.getViewModelInstance(), + [riveViewRef] + ); + + const { value: health, setValue: setHealth } = useRiveNumber( + 'health', + viewModelInstance + ); + + const { trigger: gameOverTrigger } = useRiveTrigger( + 'gameOver', + viewModelInstance, + { onTrigger: () => console.log('Game Over Triggered') } + ); + + useEffect(() => { + setHealth(9); + }, [setHealth]); + + const handleTakeDamage = () => { + if (health !== undefined) { + setHealth(health - 7); + riveViewRef!.play(); + } + }; + + const handleMaxHealth = () => { + setHealth(100); + riveViewRef!.play(); + }; + + const handleGameOver = () => { + setHealth(0); + gameOverTrigger(); + riveViewRef!.play(); + }; + + return ( + + + {riveFile && ( + + )} + +