import React, {useEffect, useRef, useState} from 'react'; import {Animated, Dimensions, StyleSheet, Text, View} from 'react-native'; import BootSplash from 'react-native-bootsplash'; import {Provider} from 'react-redux'; import {createStore, applyMiddleware} from 'redux'; import rootReducer from './src/Reducers/index'; import RootView from './src/RootView'; import createSagaMiddleware from 'redux-saga'; import rootSaga from './src/Saga/rootSaga'; import FirebaseNotification from './src/helper/FirebaseNotification'; let bootSplashLogo = require('./src/assets/images/iconSplash.png'); let fakeApiCallWithoutBadNetwork = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); const sagaMiddleware = createSagaMiddleware(); let store = createStore(rootReducer, applyMiddleware(sagaMiddleware)); sagaMiddleware.run(rootSaga); let App = () => { let [bootSplashIsVisible, setBootSplashIsVisible] = useState(true); let [bootSplashLogoIsLoaded, setBootSplashLogoIsLoaded] = useState(false); let opacity = useRef(new Animated.Value(1)); let translateY = useRef(new Animated.Value(0)); let init = async () => { // You can uncomment this line to add a delay on app startup await fakeApiCallWithoutBadNetwork(1000); await BootSplash.hide(); Animated.stagger(250, [ Animated.spring(translateY.current, { useNativeDriver: true, toValue: -50, }), Animated.spring(translateY.current, { useNativeDriver: true, toValue: Dimensions.get('window').height, }), ]).start(); Animated.timing(opacity.current, { useNativeDriver: true, toValue: 0, duration: 150, delay: 350, }).start(() => { setBootSplashIsVisible(false); }); }; useEffect(() => { init(); }, []); return ( <View style={styles.container}> <Provider store={store}> <FirebaseNotification /> <RootView /> </Provider> {bootSplashIsVisible && ( <Animated.View style={[ StyleSheet.absoluteFill, styles.bootsplash, {opacity: opacity.current}, ]}> <Animated.Image source={bootSplashLogo} fadeDuration={0} onLoadEnd={() => setBootSplashLogoIsLoaded(true)} style={[ styles.logo, {transform: [{translateY: translateY.current}]}, ]} /> </Animated.View> )} </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, }, text: { fontSize: 24, fontWeight: '700', margin: 20, lineHeight: 30, color: '#333', textAlign: 'center', }, bootsplash: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#1C6AF6', }, logo: { width: 220, height: 80, resizeMode: 'contain', }, }); export default App;