/
App copy.js
89 lines (84 loc) · 2.03 KB
/
App copy.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
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import React, {useRef, useEffect} from 'react';
import {
SafeAreaView,
Image,
Text,
View,
StyleSheet,
Animated,
Dimensions,
} from 'react-native';
const App: () => React$Node = () => {
const logoAnim = useRef(new Animated.Value(0)).current;
const moveAnim = useRef(new Animated.Value(0)).current;
const fadeAnim = useRef(new Animated.Value(0)).current;
useEffect(() => {
Animated.timing(logoAnim, {
duration: 3000,
toValue: 1,
delay: 2500,
useNativeDriver: true,
}).start();
Animated.sequence([
Animated.timing(moveAnim, {
duration: 2000,
toValue: Dimensions.get('window').width / 1.1,
delay: 0,
useNativeDriver: false,
}),
Animated.timing(moveAnim, {
duration: 2000,
toValue: 0,
delay: 0,
useNativeDriver: false,
}),
]).start();
Animated.timing(fadeAnim, {
duration: 2000,
toValue: 1,
delay: 2500,
useNativeDriver: true,
}).start();
}, [logoAnim, moveAnim, fadeAnim]);
return (
<SafeAreaView style={styles.container}>
<View style={styles.contentContainer}>
<Animated.Image
style={{width: 100, height: 100, opacity: logoAnim}}
source={require('./assets/images/logo.png')}
/>
<Animated.View style={{flexDirection: 'row', marginLeft: moveAnim}}>
<Animated.Text style={[styles.logoText]}>D</Animated.Text>
<Animated.Text style={[styles.logoText, {opacity: fadeAnim}]}>
evscamp
</Animated.Text>
</Animated.View>
</View>
</SafeAreaView>
);
};
export default App;
export const styles = StyleSheet.create({
container: {
display: 'flex',
flex: 1,
backgroundColor: '#52b372',
},
logoText: {
fontSize: 35,
marginTop: 20,
color: 'white',
fontWeight: '700',
},
contentContainer: {
top: '40%',
alignItems: 'center',
},
});