FilesExpand file tree

 main

/

MeshExample.tsx

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

53 lines (50 loc) · 1.33 KB

 main

/

MeshExample.tsx

Top

File metadata and controls

• Code
• Blame

53 lines (50 loc) · 1.33 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

import * as React from 'react';

import { Button, SafeAreaView, StyleSheet, ScrollView } from 'react-native';

import Rive, { RiveRef } from 'rive-react-native';

const url =

'https://public.uat.rive.app/community/runtime-files/148-325-tape.riv';

const STATE_MACHINE_NAME = 'State Machine 1';

export default function MeshExample() {

const riveRef = React.useRef<RiveRef>(null);

const [isHovered, setIsHovered] = React.useState(true);

return (

<SafeAreaView style={styles.safeAreaViewContainer}>

<ScrollView contentContainerStyle={styles.container}>

<Button

title="Toggle Mesh State Machine"

onPress={() => {

setIsHovered(!isHovered);

riveRef.current?.setInputState(

STATE_MACHINE_NAME,

'Hover',

!isHovered

);

}}

/>

<Rive

ref={riveRef}

url={url}

style={styles.animation}

autoplay={true}

stateMachineName={STATE_MACHINE_NAME}

/>

</ScrollView>

</SafeAreaView>

);

}

const styles = StyleSheet.create({

safeAreaViewContainer: {

flex: 1,

},

container: {

flexGrow: 1,

alignItems: 'center',

justifyContent: 'center',

marginBottom: 150,

},

animation: {

width: '100%',

height: 400,

marginVertical: 20,

},

});