Run Rive animation in react native example

file.md

App.tsx

import React, {useEffect, useRef} from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import Rive from 'rive-react-native';

function App(): JSX.Element {
  const animRef = useRef<any>(null);

  const playAnimation = () => {
    if (animRef.current) {
      animRef.current.play('Pressed_wrong');
    }
  };

  useEffect(() => {
    if (animRef.current) {
      animRef.current.play('Pressed_wrong_static');
    }
  }, []);

  return (
    <View style={styles.container}>
      <View style={styles.animationContainer}>
        <Rive
          ref={animRef}
          style={styles.rivBox}
          resourceName={'foundit'}
          artboardName="Shiba_inu"
          stateMachineName="Pressed"
        />
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity style={styles.btnBox} onPress={playAnimation}>
          <Text style={styles.btnText}>Fire</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  animationContainer: {
    width: '100%',
    height: '80%',
  },
  rivBox: {
    width: '100%',
    height: '100%',
  },
  buttonContainer: {
    width: '100%',
    height: '20%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  btnBox: {
    backgroundColor: 'blue',
    width: '35%',
    height: '35%',
    borderRadius: 12,
    justifyContent: 'center',
    alignItems: 'center',
  },
  btnText: {
    fontSize: 35,
    color: '#FFFFFF',
    fontWeight: '500',
  },
});

example

screen-capture.1.webm