From 026490b0f395b787363f2ea02a94f802a1be9187 Mon Sep 17 00:00:00 2001 From: Arnaud AMBROSELLI Date: Tue, 23 Jul 2024 11:02:24 +0200 Subject: [PATCH] fix: custom bootsplash --- expo/src/Router.js | 52 +++++----------- expo/src/components/CustomBootsplash.js | 60 +++++++++++-------- expo/src/components/userSurvey/Question.js | 4 +- .../userSurvey/QuestionMultipleChoice.js | 4 +- .../Quizzs/UserSurvey/UserSurveyStart.js | 4 +- 5 files changed, 55 insertions(+), 69 deletions(-) diff --git a/expo/src/Router.js b/expo/src/Router.js index 510acb669..3774ab65c 100644 --- 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,15 +104,12 @@ const TabsNavigator = ({ navigation }) => { tabBarInactiveTintColor: "#767676", keyboardHidesTabBar: true, lazy: true, - }} - > + }}> , - tabBarIcon: ({ size, color }) => ( - - ), + tabBarIcon: ({ size, color }) => , }} component={GainsNavigator} /> @@ -126,9 +117,7 @@ const TabsNavigator = ({ navigation }) => { name="CRAVING" options={{ tabBarLabel: (props) => , - tabBarIcon: ({ size, color }) => ( - - ), + tabBarIcon: ({ size, color }) => , }} component={CravingNavigator} /> @@ -136,9 +125,7 @@ const TabsNavigator = ({ navigation }) => { name="CONSO_FOLLOW_UP_NAVIGATOR" options={{ tabBarLabel: (props) => , - tabBarIcon: ({ size, color }) => ( - - ), + tabBarIcon: ({ size, color }) => , }} component={ConsoFollowupNavigator} /> @@ -146,9 +133,7 @@ const TabsNavigator = ({ navigation }) => { name="HEALTH" options={{ tabBarLabel: (props) => , - tabBarIcon: ({ size, color }) => ( - - ), + tabBarIcon: ({ size, color }) => , }} component={HealthNavigator} /> @@ -156,9 +141,7 @@ const TabsNavigator = ({ navigation }) => { name="INFOS" options={{ tabBarLabel: (props) => , - tabBarIcon: ({ size, color }) => ( - - ), + tabBarIcon: ({ size, color }) => , }} component={Infos} /> @@ -190,14 +173,10 @@ const App = () => { <> + initialRouteName={initialRouteName}> - + @@ -211,8 +190,7 @@ const Root = () => { screenOptions={{ headerShown: false, }} - initialRouteName="APP" - > + initialRouteName="APP"> @@ -301,15 +279,13 @@ const Router = () => { API.navigation = navigationRef.current; }} onStateChange={onNavigationStateChange} - linking={deepLinkingConfig} - > + linking={deepLinkingConfig}> + }}> { 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 ( - - - - - + + + ); }; -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 index 11fe71a50..8050719cb 100644 --- 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 index 595d81fc5..8513ef5cc 100644 --- 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 index 9cd67c46a..39e8b726d 100644 --- 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"); }}> Plus tard