-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathApp.tsx
127 lines (112 loc) · 2.76 KB
/
App.tsx
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import { StatusBar } from "expo-status-bar";
import { AppState, StyleSheet, Text, View } from "react-native";
import {
addChangeListener,
startListening,
removeListener,
disableListening,
} from "./modules/watch-module";
import Animated, {
useAnimatedStyle,
useSharedValue,
} from "react-native-reanimated";
import { useEffect, useRef } from "react";
function Home() {
const xPosition = useSharedValue(0);
const yPosition = useSharedValue(0);
const zPosition = useSharedValue(0);
const appState = useRef(AppState.currentState);
useEffect(() => {
startListening();
addChangeListener((val) => {
xPosition.value = val.x;
yPosition.value = val.y;
});
return () => {
removeListener();
};
}, []);
useEffect(() => {
const subscription = AppState.addEventListener("change", (nextAppState) => {
if (nextAppState === "inactive") {
disableListening();
removeListener();
}
if (
appState.current.match(/inactive|background/) &&
nextAppState === "active"
) {
startListening();
addChangeListener((val) => {
xPosition.value = val.x;
yPosition.value = val.y;
});
}
appState.current = nextAppState;
});
return () => {
subscription.remove();
};
}, []);
const style = useAnimatedStyle(() => {
const xRotationVal = xPosition.value * 90;
const yRotationVal = yPosition.value * 90;
return {
height: 225,
width: 225,
display: "flex",
backgroundColor: "black",
justifyContent: "center",
borderRadius: 40,
transform: [
{
perspective: 300,
},
{
rotateX: `${yRotationVal}deg`,
},
{
rotateY: `${xRotationVal}deg`,
},
],
};
}, [xPosition, yPosition, zPosition]);
return (
<View style={styles.container}>
<StatusBar style="auto" />
<Animated.View style={style}>
<View style={{ justifyContent: "center", alignItems: "center" }}>
<Text style={{ color: "white" }}>Hello, world!</Text>
</View>
<View
style={{
backgroundColor: "#3b3b3b",
height: 50,
justifyContent: "center",
alignItems: "center",
marginTop: 10,
marginHorizontal: 30,
borderRadius: 20,
}}
>
<Text style={{ color: "white" }}>SEND</Text>
</View>
</Animated.View>
</View>
);
}
export default function App() {
return (
<View style={styles.container}>
<Home />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});