1 | import React, { useEffect, useState, useRef } from 'react';
|
2 | import { Animated, StyleSheet, Text, NativeModules, NativeEventEmitter, View } from 'react-native';
|
3 | import { SafeAreaView } from 'react-native-safe-area-context';
|
4 | const NativeDevLoadingView = NativeModules.DevLoadingView;
|
5 | const nativeDevLoadingViewEventEmitter = new NativeEventEmitter(NativeDevLoadingView);
|
6 | export default function DevLoadingView() {
|
7 | const [isDevLoading, setIsDevLoading] = useState(false);
|
8 | const [isAnimating, setIsAnimating] = useState(false);
|
9 | const translateY = useRef(new Animated.Value(0)).current;
|
10 | useEffect(() => {
|
11 | function handleShowMessage({ message }) {
|
12 |
|
13 |
|
14 | if (message !== 'Refreshing...') {
|
15 | return;
|
16 | }
|
17 |
|
18 |
|
19 |
|
20 | translateY.setValue(0);
|
21 | setIsDevLoading(true);
|
22 | }
|
23 | function handleHide() {
|
24 |
|
25 |
|
26 | setIsAnimating(true);
|
27 | setIsDevLoading(false);
|
28 | Animated.timing(translateY, {
|
29 | toValue: 150,
|
30 | delay: 1000,
|
31 | duration: 350,
|
32 | useNativeDriver: true,
|
33 | }).start(({ finished }) => {
|
34 | if (finished) {
|
35 | setIsAnimating(false);
|
36 | translateY.setValue(0);
|
37 | }
|
38 | });
|
39 | }
|
40 | nativeDevLoadingViewEventEmitter.addListener('devLoadingView:showMessage', handleShowMessage);
|
41 | nativeDevLoadingViewEventEmitter.addListener('devLoadingView:hide', handleHide);
|
42 | return function cleanup() {
|
43 | nativeDevLoadingViewEventEmitter.removeListener('devLoadingView:showMessage', handleShowMessage);
|
44 | nativeDevLoadingViewEventEmitter.removeListener('devLoadingView:hide', handleHide);
|
45 | };
|
46 | }, [translateY]);
|
47 | if (isDevLoading || isAnimating) {
|
48 | return (React.createElement(Animated.View, { style: [styles.animatedContainer, { transform: [{ translateY }] }], pointerEvents: "none" },
|
49 | React.createElement(SafeAreaView, { style: styles.banner, edges: ['bottom'] },
|
50 | React.createElement(View, { style: styles.contentContainer },
|
51 | React.createElement(View, { style: { flexDirection: 'row' } },
|
52 | React.createElement(Text, { style: styles.text }, isDevLoading ? 'Refreshing...' : 'Refreshed')),
|
53 | React.createElement(View, { style: { flex: 1 } },
|
54 | React.createElement(Text, { style: styles.subtitle }, isDevLoading ? 'Using Fast Refresh' : "Don't see your changes? Reload the app"))))));
|
55 | }
|
56 | else {
|
57 | return null;
|
58 | }
|
59 | }
|
60 | const styles = StyleSheet.create({
|
61 | animatedContainer: {
|
62 | position: 'absolute',
|
63 | bottom: 0,
|
64 | left: 0,
|
65 | right: 0,
|
66 | zIndex: 42,
|
67 | },
|
68 | banner: {
|
69 | flex: 1,
|
70 | overflow: 'visible',
|
71 | backgroundColor: 'rgba(0,0,0,0.75)',
|
72 | },
|
73 | contentContainer: {
|
74 | flex: 1,
|
75 | paddingTop: 10,
|
76 | paddingBottom: 5,
|
77 | alignItems: 'center',
|
78 | justifyContent: 'center',
|
79 | textAlign: 'center',
|
80 | },
|
81 | text: {
|
82 | color: '#fff',
|
83 | fontSize: 15,
|
84 | },
|
85 | subtitle: {
|
86 | color: 'rgba(255,255,255,0.8)',
|
87 | },
|
88 | });
|
89 |
|
\ | No newline at end of file |