rive-nitro-react-native/example/src/exercisers/ResponsiveLayouts.tsx at 7116ac7ad94bbe9967ba350bb675e458480d041a · rive-app/rive-nitro-react-native · GitHub

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import { useState, useRef, useEffect } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Button,
  ActivityIndicator,
  useWindowDimensions,
} from 'react-native';
import {
  Fit,
  RiveView,
  useRiveFile,
  type RiveViewRef,
} from '@rive-app/react-native';
import { type Metadata } from '../shared/metadata';

/**
 * Demonstrates responsive layouts using Fit.Layout and layoutScaleFactor
 *
 * See https://rive.app/docs/runtimes/layout
 */
export default function ResponsiveLayoutsExample() {
  const { riveFile, isLoading, error } = useRiveFile(
    require('../../assets/rive/layouts_demo.riv')
  );
  const [scaleFactor, setScaleFactor] = useState(4.0);
  const riveRef = useRef<RiveViewRef>(null);
  const { width, height } = useWindowDimensions();

  useEffect(() => {
    riveRef.current?.playIfNeeded();
  }, [width, height]);

  const increaseScale = () => {
    setScaleFactor((prev) => prev + 0.5);
    riveRef.current?.playIfNeeded();
  };
  const decreaseScale = () => {
    setScaleFactor((prev) => Math.max(0.5, prev - 0.5));
    riveRef.current?.playIfNeeded();
  };

  return (
    <View style={styles.container}>
      {isLoading ? (
        <ActivityIndicator size="large" color="#0000ff" />
      ) : error ? (
        <Text style={styles.errorText}>{error.message}</Text>
      ) : riveFile ? (
        <RiveView
          hybridRef={{ f: (ref) => (riveRef.current = ref) }}
          file={riveFile}
          fit={Fit.Layout}
          layoutScaleFactor={scaleFactor}
          style={styles.rive}
          autoPlay={true}
        />
      ) : null}
      <View style={styles.controls}>
        <Text style={styles.label}>Layout Scale Factor</Text>
        <View style={styles.scaleControls}>
          <Button title="-" onPress={decreaseScale} />
          <View style={styles.scaleText}>
            <Text>{scaleFactor.toFixed(1)}x</Text>
          </View>
          <Button title="+" onPress={increaseScale} />
        </View>
      </View>
    </View>
  );
}

ResponsiveLayoutsExample.metadata = {
  name: 'Responsive Layouts',
  description: 'Interactive layout scale factor controls',
} satisfies Metadata;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  rive: {
    width: '100%',
    flex: 1,
  },
  controls: {
    padding: 16,
    alignItems: 'center',
  },
  scaleControls: {
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: 16,
    gap: 16,
  },
  scaleText: {
    minWidth: 50,
    alignItems: 'center',
  },
  label: {
    fontSize: 16,
    fontWeight: '500',
    marginTop: 16,
  },
  errorText: {
    color: 'red',
    textAlign: 'center',
    padding: 20,
    flex: 1,
  },
});