fix: custom bootsplash

SocialGouv · Jul 23, 2024 · 026490b · 026490b
1 parent faffad2
commit 026490b
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 69 deletions.
diff --git a/expo/src/Router.js b/expo/src/Router.js
@@ -21,19 +21,14 @@ import useAppState from "./services/useAppState";
 import { logEvent } from "./services/logEventsWithMatomo";
 import { storage } from "./services/storage";
 import TextStyled from "./components/TextStyled";
-import CustomBootsplash, {
-  showBootSplashState,
-} from "./components/CustomBootsplash";
+import CustomBootsplash, { showBootSplashState } from "./components/CustomBootsplash";
 import CalendarIcon from "./components/illustrations/CalendarIcon";
 import API from "./services/api";
 import CravingNavigator from "./scenes/Craving/CravingNavigator";
 import NewFeaturePopupDisplay from "./services/NewFeaturePopup";
 import { deepLinkingConfig } from "./services/deepLink";
 import EnvironmentIndicator from "./components/EnvironmentIndicator";
-import NPSScreen, {
-  useCheckNeedNPS,
-  useNPSNotif,
-} from "./scenes/NPS/NPSScreen";
+import NPSScreen, { useCheckNeedNPS, useNPSNotif } from "./scenes/NPS/NPSScreen";
 import Super_NPSScreen from "./scenes/NPS/Super_NPSScreen";
 import Inactivity_NPSScreen from "./scenes/NPS/Inactivity_NPSScreen";
 import NotificationService from "./services/notifications";
@@ -94,8 +89,7 @@ const TabsNavigator = ({ navigation }) => {
             // 1. one modal LEAVING_CRAVING_MODAL that we show EVERYTIME the users leaves EXCEPT
             // 2. the second modal STRATEGY_MODAL_TO_NPS that triggers the user to go to the NPS screen
             // if we show STRATEGY_MODAL_TO_NPS, we don't show LEAVING_CRAVING_MODAL
-            const isTimeToAskNPS =
-              dayjsInstance().diff(firstTimeCraving, "day") >= 7;
+            const isTimeToAskNPS = dayjsInstance().diff(firstTimeCraving, "day") >= 7;
             const CravingToNPSModal = storage.getBoolean("@CravingToNPSModal");
             if (isTimeToAskNPS && !CravingToNPSModal) {
               storage.set("@CravingToNPSModal", true);
@@ -110,55 +104,44 @@ const TabsNavigator = ({ navigation }) => {
           tabBarInactiveTintColor: "#767676",
           keyboardHidesTabBar: true,
           lazy: true,
-        }}
-      >
+        }}>
         <Tabs.Screen
           name="GAINS_NAVIGATOR"
           options={{
             tabBarLabel: (props) => <Label {...props}>Suivi</Label>,
-            tabBarIcon: ({ size, color }) => (
-              <FollowUpIcon size={size} color={color} />
-            ),
+            tabBarIcon: ({ size, color }) => <FollowUpIcon size={size} color={color} />,
           }}
           component={GainsNavigator}
         />
         <Tabs.Screen
           name="CRAVING"
           options={{
             tabBarLabel: (props) => <Label {...props}>Craving</Label>,
-            tabBarIcon: ({ size, color }) => (
-              <CravingIcon size={size} color={color} />
-            ),
+            tabBarIcon: ({ size, color }) => <CravingIcon size={size} color={color} />,
           }}
           component={CravingNavigator}
         />
         <Tabs.Screen
           name="CONSO_FOLLOW_UP_NAVIGATOR"
           options={{
             tabBarLabel: (props) => <Label {...props}>Calendrier</Label>,
-            tabBarIcon: ({ size, color }) => (
-              <CalendarIcon size={size} color={color} />
-            ),
+            tabBarIcon: ({ size, color }) => <CalendarIcon size={size} color={color} />,
           }}
           component={ConsoFollowupNavigator}
         />
         <Tabs.Screen
           name="HEALTH"
           options={{
             tabBarLabel: (props) => <Label {...props}>Santé</Label>,
-            tabBarIcon: ({ size, color }) => (
-              <GuidanceIcon size={size} color={color} />
-            ),
+            tabBarIcon: ({ size, color }) => <GuidanceIcon size={size} color={color} />,
           }}
           component={HealthNavigator}
         />
         <Tabs.Screen
           name="INFOS"
           options={{
             tabBarLabel: (props) => <Label {...props}>Infos</Label>,
-            tabBarIcon: ({ size, color }) => (
-              <InfosIcon size={size} color={color} />
-            ),
+            tabBarIcon: ({ size, color }) => <InfosIcon size={size} color={color} />,
           }}
           component={Infos}
         />
@@ -190,14 +173,10 @@ const App = () => {
     <>
       <AppStack.Navigator
         screenOptions={{ headerShown: false }}
-        initialRouteName={initialRouteName}
-      >
+        initialRouteName={initialRouteName}>
         <AppStack.Screen name="WELCOME" component={WelcomeScreen} />
         <AppStack.Screen name="USER_SURVEY_START" component={UserSurveyStart} />
-        <AppStack.Screen
-          name="USER_SURVEY_FROM_ONBOARDING"
-          component={UserSurvey}
-        />
+        <AppStack.Screen name="USER_SURVEY_FROM_ONBOARDING" component={UserSurvey} />
         <AppStack.Screen name="TABS" component={TabsNavigator} />
       </AppStack.Navigator>
     </>
@@ -211,8 +190,7 @@ const Root = () => {
       screenOptions={{
         headerShown: false,
       }}
-      initialRouteName="APP"
-    >
+      initialRouteName="APP">
       <RootStack.Screen name="APP" component={App} />
       <RootStack.Screen name="USER_SURVEY_NOTIF" component={UserSurveyNotif} />
       <RootStack.Screen name="USER_SURVEY" component={UserSurvey} />
@@ -301,15 +279,13 @@ const Router = () => {
           API.navigation = navigationRef.current;
         }}
         onStateChange={onNavigationStateChange}
-        linking={deepLinkingConfig}
-      >
+        linking={deepLinkingConfig}>
         <ModalsStack.Navigator
           initialRouteName="ROUTER"
           screenOptions={{
             headerShown: false,
             presentation: "transparentModal",
-          }}
-        >
+          }}>
           <ModalsStack.Screen
             name="ROUTER"
             component={Root}

diff --git a/expo/src/components/CustomBootsplash.js b/expo/src/components/CustomBootsplash.js
@@ -1,41 +1,51 @@
-import React from "react";
-import { Dimensions, Modal } from "react-native";
+import React, { useEffect, useRef } from "react";
+import { Image, Dimensions, Animated, StyleSheet } from "react-native";
 import { atom, useRecoilValue } from "recoil";
-import styled from "styled-components";
 
-// waiting for RNBootSplah.show to come back
+// waiting for RNBootSplash.show to come back
 export const showBootSplashState = atom({
   key: "showBootSplashState",
   default: false,
 });
 
 const CustomBootsplash = () => {
   const showBootSplash = useRecoilValue(showBootSplashState);
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: showBootSplash ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+  }, [fadeAnim, showBootSplash]);
+
+  if (!showBootSplash && fadeAnim._value === 0) return null;
 
   return (
-    <Modal visible={showBootSplash} animationType="fade">
-      <FullScreen>
-        <StyledImage source={require("../assets/images/Icon.png")} />
-      </FullScreen>
-    </Modal>
+    <Animated.View style={[styles.fullScreen, { opacity: fadeAnim }]}>
+      <Image source={require("../assets/images/Icon.png")} style={styles.image} />
+    </Animated.View>
   );
 };
 
-const FullScreen = styled.View`
-  height: 100%;
-  width: 100%;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  justify-content: center;
-  align-items: center;
-  background-color: #3e309f;
-`;
-
-const StyledImage = styled.Image`
-  width: ${Dimensions.get("window").width / 2}px;
-  height: ${Dimensions.get("window").width / 2}px;
-`;
+const styles = StyleSheet.create({
+  fullScreen: {
+    position: "absolute",
+    height: "100%",
+    width: "100%",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#3e309f",
+  },
+  image: {
+    width: Dimensions.get("window").width / 2,
+    height: Dimensions.get("window").width / 2,
+  },
+});
 
 export default CustomBootsplash;
diff --git a/expo/src/components/userSurvey/Question.js b/expo/src/components/userSurvey/Question.js
@@ -87,9 +87,9 @@ const Question = ({
                     navigation.push(`QUIZZ_QUESTION_${questionIndex + 1 + 1}`);
                   } else {
                     if (from === "NEW_USER") {
-                      navigation.navigate("TABS");
-                      await new Promise((res) => setTimeout(res));
                       setShowBootsplash(true);
+                      await new Promise((res) => setTimeout(res, 100));
+                      navigation.navigate("TABS");
                       return;
                     }
                     navigation.navigate("QUIZZ_RESULTS");

diff --git a/expo/src/components/userSurvey/QuestionMultipleChoice.js b/expo/src/components/userSurvey/QuestionMultipleChoice.js
@@ -116,9 +116,9 @@ const QuestionMultipleChoice = ({
                   navigation.push(`QUIZZ_QUESTION_${questionIndex + 1 + 1}`);
                 } else {
                   if (from === "NEW_USER") {
-                    navigation.navigate("TABS");
-                    await new Promise((res) => setTimeout(res));
                     setShowBootsplash(true);
+                    await new Promise((res) => setTimeout(res, 100));
+                    navigation.navigate("TABS");
                     return;
                   }
                   navigation.navigate("QUIZZ_RESULTS");

diff --git a/expo/src/scenes/Quizzs/UserSurvey/UserSurveyStart.js b/expo/src/scenes/Quizzs/UserSurvey/UserSurveyStart.js
@@ -38,9 +38,9 @@ const UserSurveyStart = ({ navigation, route }) => {
             onPress={async () => {
               logEvent({ category: "QUIZZ_USER_SURVEY", action: "USER_SURVEY_START_SKIP" });
               // TODO: fix user survey still appearing after bootsplash hide
-              navigation.navigate("TABS");
-              await new Promise((res) => setTimeout(res));
               setShowBootsplash(true);
+              await new Promise((res) => setTimeout(res, 100));
+              navigation.navigate("TABS");
             }}>
             <Skip>Plus tard</Skip>
           </TouchableOpacity>