-
Notifications
You must be signed in to change notification settings - Fork 1
/
App.js
92 lines (69 loc) · 1.85 KB
/
App.js
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
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
*/
import React, { useEffect, useRef, useState } from "react";
import { Animated, View, StyleSheet, Dimensions, TouchableOpacity, Text } from "react-native";
const colors = ['#000000', '#212121']
const size = Dimensions.get("window").width / 10;
const Element = ({native = true}) => {
const randomColor = () => {
return colors[Math.floor(Math.random() * colors.length)];
};
const [color, setColor] = React.useState(randomColor());
const rotation = useRef(new Animated.Value(0)).current;
useEffect(() => {
const interval = setInterval(() => {
setColor(randomColor());
}, Math.floor(Math.random() * 800));
return () => clearInterval(interval);
}, []);
useEffect(() => {
Animated.timing(rotation, {
toValue: Math.random(),
duration: Math.floor(Math.random() * 1000),
useNativeDriver: native,
}).start();
}, [color])
const spin = rotation.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '500deg']
})
return (
<Animated.View style={{ width: size, height: size, backgroundColor: 'black', transform: [{rotate: spin}] }} />
);
};
const Overlay = () => {
return (
<View style={{
position: 'absolute',
top: 200,
width: 100,
height: 100,
backgroundColor: 'white',
}}>
<Text style={{paddingBottom: 20}}>
Animated on the JS thread
</Text>
<Element native={false} infiniteSpin={true}/>
</View>
)
}
function App(): JSX.Element {
return (
<View style={styles.container}>
{new Array(1000).fill("").map((_, index) => <Element key={index} />)}
<Overlay/>
</View>
);
}
const styles = StyleSheet.create({
container: {
display: "flex",
flexDirection: "row",
flexWrap: "wrap"
}
});
export default App;