-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
95 lines (87 loc) · 2.21 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
import React from 'react';
import {
StyleSheet,
StatusBar,
SafeAreaView,
Platform,
UIManager,
} from 'react-native';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
import {RecoilRoot, useRecoilValue} from 'recoil';
import Home from './src/homeScreen';
import {ThemeProvider} from '@shopify/restyle';
import {theme} from './src/theme/theme';
import {palette} from './src/theme';
import {Loader, Message, NetworkStatus} from './src/components';
import {networkState} from './src/atoms';
import Animated, {
useAnimatedStyle,
withTiming,
Easing,
} from 'react-native-reanimated';
if (
Platform.OS === 'android' &&
UIManager.setLayoutAnimationEnabledExperimental
) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
const NetworBarAnimation = () => {
const [networkBar, setNetworkBar] = React.useState(false);
const isOnline = useRecoilValue(networkState);
React.useEffect(() => {
let id: NodeJS.Timeout;
if (!isOnline) {
setNetworkBar(true);
} else {
id = setTimeout(() => {
setNetworkBar(false);
}, 2000);
}
return () => {
clearTimeout(id);
};
}, [isOnline, networkBar]);
const animatedStyles = useAnimatedStyle(() => {
return {
opacity: withTiming(networkBar ? 1 : 0, {
duration: 400,
easing: Easing.ease,
}),
height: withTiming(networkBar ? 30 : 0, {
duration: 400,
easing: Easing.ease,
}),
};
}, [networkBar]);
return (
<Animated.View style={[animatedStyles]}>
<NetworkStatus status={isOnline} />
</Animated.View>
);
};
const App = () => {
return (
<RecoilRoot>
<ThemeProvider theme={theme}>
<GestureHandlerRootView style={styles.container}>
<SafeAreaView style={styles.container}>
<StatusBar barStyle={'light-content'} />
<Message>
<Loader>
<Home />
<NetworBarAnimation />
</Loader>
</Message>
</SafeAreaView>
</GestureHandlerRootView>
</ThemeProvider>
</RecoilRoot>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: palette.black,
},
});
export default App;