update code

App.js

@@ -19,9 +19,36 @@ 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(() => {
@@ -33,6 +60,25 @@ let App = () => {
       <Provider store={store}>
         <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>
   );
 };

ios/Invest/BootSplash.storyboard

@@ -17,7 +17,7 @@
                         <autoresizingMask key="autoresizingMask"/>
                         <subviews>
                             <imageView autoresizesSubviews="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" image="BootSplashLogo" translatesAutoresizingMaskIntoConstraints="NO" id="3lX-Ut-9ad">
-                                <rect key="frame" x="127.5" y="313" width="120" height="41"/>
+                                <rect key="frame" x="77.5" y="296.5" width="220" height="74"/>
                                 <accessibility key="accessibilityConfiguration">
                                     <accessibilityTraits key="traits" image="YES" notEnabled="YES"/>
                                 </accessibility>
@@ -40,6 +40,6 @@
         </scene>
     </scenes>
     <resources>
-        <image name="BootSplashLogo" width="120" height="41"/>
+        <image name="BootSplashLogo" width="220" height="74"/>
     </resources>
 </document>

src/Screens/Action/Wallet/Tab/Success.js

@@ -68,7 +68,7 @@ const Success = (props) => {
   return (
     <View style={{flex: 1}}>
       <FlatList
-        keyExtractor={(item) => item.transection_id}
+        keyExtractor={(item) => item.transection_id + 'a'}
         refreshing={isRefresh}
         onRefresh={onRefresh}
         onEndReachedThreshold={0.01}

src/Screens/Action/Wallet/Tab/Watting.js

@@ -68,7 +68,7 @@ const Watting = (props) => {
   return (
     <View style={{flex: 1}}>
       <FlatList
-        keyExtractor={(item) => item.transection_id}
+        keyExtractor={(item) => item.transection_id + 'a'}
         refreshing={isRefresh}
         onRefresh={onRefresh}
         onEndReachedThreshold={0.01}