@react-navigation/stack#CardStyleInterpolators TypeScript Examples

OnboardingRoutes = () => (
  <Stack.Navigator mode="modal" headerMode="none" initialRouteName="Welcome" screenOptions={() => ({ gestureEnabled: false })}>
    <Stack.Screen name="Welcome" component={Welcome} />
    <Stack.Screen name="Location" component={Location} options={{ cardStyleInterpolator: CardStyleInterpolators.forScaleFromCenterAndroid }} />
    <Stack.Screen name="LocationIOS" component={LocationIOS} options={{ cardStyleInterpolator: CardStyleInterpolators.forScaleFromCenterAndroid }} />
    <Stack.Screen name="Bluetooth" component={BluetoothOnboarding} options={{ cardStyleInterpolator: CardStyleInterpolators.forScaleFromCenterAndroid }} initialParams={{ showUsageLink: true }} />
    <Stack.Screen name="Battery" component={BatteryOnboarding} options={{ cardStyleInterpolator: CardStyleInterpolators.forScaleFromCenterAndroid }} initialParams={{ showSkip: true }} />
    <Stack.Screen name="FilterDrivingOnBoarding" component={FilterDrivingOnBoarding} options={{ cardStyleInterpolator: CardStyleInterpolators.forScaleFromCenterAndroid }} />
    <Stack.Screen name="LocationHistoryOnBoarding" component={LocationHistoryOnBoarding} options={{ cardStyleInterpolator: CardStyleInterpolators.forScaleFromCenterAndroid }} />
    <Stack.Screen name="Notifications" component={Notifications} options={{ cardStyleInterpolator: CardStyleInterpolators.forScaleFromCenterAndroid }} />
    <Stack.Screen name="AllSet" component={AllSet} options={{ cardStyleInterpolator: CardStyleInterpolators.forScaleFromCenterAndroid }} />
  </Stack.Navigator>
)

RootNavigator = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
          gestureDirection: "horizontal",
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
          transitionSpec: {
            open: TransitionSpecs.TransitionIOSSpec,
            close: TransitionSpecs.TransitionIOSSpec,
          },
        }}
      >
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

DrawerStack = ({ navigation, route }: DrawerStackProps) => {
  const { exposures } = useSelector<Store, ExposuresReducer>(state => state.exposures);
  const [initialRouteName, setInitialRouteName] = useState('');
  const [showBLEPermission] = useState(undefined);

  useEffect(() => {
    AsyncStorage.getItem(INIT_ROUTE_NAME)
      .then(initRouteString => setInitialRouteName(initRouteString ?? DEFAULT_SCREEN))
      .catch(() => setInitialRouteName(DEFAULT_SCREEN));
  }, []);

  useEffect(() => {
    if (initialRouteName !== '' && exposures?.length > 0) {
      if (route.state?.routes && !route.state.routes.some(({ name }) => name === 'ExposureDetected')) {
        navigation.navigate('ExposureDetected');
      }
    }
  }, [exposures, initialRouteName, route]);
  if (!initialRouteName) { return null; }


  return (
    <Stack.Navigator gestureEnabled={false} mode="modal" headerMode="none" initialRouteName={initialRouteName} screenOptions={() => ({ gestureEnabled: false })}>
      <Stack.Screen name="ScanHome" component={ScanHome} options={{ cardStyleInterpolator: CardStyleInterpolators.forScaleFromCenterAndroid }} initialParams={{ showBleInfo: showBLEPermission !== 'true' }} />
      <Stack.Screen name="ExposuresHistory" component={ExposuresHistory} options={{ cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS }} />
      <Stack.Screen name="LocationHistory" component={LocationHistory} options={{ cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS }} />
      <Stack.Screen name="FilterDriving" component={FilterDriving} options={{ cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS }} />
      <Stack.Screen name="ShareLocations" component={ShareLocations} options={{ cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS }} />
      <Stack.Screen name="ChangeLanguageScreen" component={ChangeLanguageScreen} options={{ cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS }} />
      <Stack.Screen name="ExposureDetected" component={ExposureDetected} gestureEnabled={false} options={{ cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS }} />
      <Stack.Screen name="ExposureInstructions" component={ExposureInstructions} gestureEnabled={false} options={{ cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS }} initialParams={{ showEdit: false }} />
      <Stack.Screen name="ExposureRelief" component={ExposureRelief} options={{ cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS }} />
      <Stack.Screen name="ExposuresHistoryEdit" component={ExposuresHistoryEdit} options={{ cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS }} />
      <Stack.Screen name="ExposureHistoryRelief" component={ExposureHistoryRelief} options={{ cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS }} />
      <Stack.Screen name="Bluetooth" component={BluetoothModal} options={{ cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS }} />
      <Stack.Screen name="BluetoothSettings" component={BluetoothSettings} options={{ cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS }} />
      <Stack.Screen name="Battery" component={BatteryModal} options={{ cardStyleInterpolator: CardStyleInterpolators.forRevealFromBottomAndroid }} />
      <Stack.Screen name="BatterySettings" component={BatterySettings} options={{ cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS }} />
      <Stack.Screen name="BluetoothDenied" component={BluetoothDeniedModal} options={{ cardStyleInterpolator: CardStyleInterpolators.forRevealFromBottomAndroid }} />
    </Stack.Navigator>
  );
}

Navigation: FC<Navigation> = ({
  notification,
  exposureNotificationClicked,
  completedExposureOnboarding,
  setState
}) => {
  const {t} = useTranslation();
  const {accessibility} = useApplication();
  const {getTranslation} = useAgeGroupTranslation();
  const app = useApplication();

  useEffect(() => {
    (isMountedRef as MutableRefObject<boolean>).current = true;
    return () => {
      (isMountedRef as MutableRefObject<boolean>).current = false;
    };
  }, []);

  useEffect(() => {
    if (Platform.OS !== 'ios') {
      return;
    }

    if (navigationRef.current && notification) {
      navigationRef.current.navigate(ScreenNames.closeContact);

      setState((s) => ({...s, notification: null}));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [notification]);

  useEffect(() => {
    if (Platform.OS !== 'android') {
      return;
    }

    if (navigationRef.current && exposureNotificationClicked) {
      navigationRef.current.navigate(ScreenNames.closeContact);
      setState((s) => ({...s, exposureNotificationClicked: null}));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [exposureNotificationClicked]);

  const initialScreen =
    app.user && completedExposureOnboarding
      ? ScreenNames.dashboard
      : ScreenNames.ageConfirmation;

  return (
    <NavigationContainer
      ref={(e) => {
        notificationHooks.navigation = e as NavigationContainerRef;
        (navigationRef as MutableRefObject<NavigationContainerRef | null>).current = e;
      }}>
      <Stack.Navigator
        screenOptions={{
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
          cardStyle: {backgroundColor: 'transparent'},
          gestureEnabled: true,
          gestureDirection: 'horizontal',
          animationEnabled: !accessibility.reduceMotionEnabled
        }}
        initialRouteName={initialScreen}
        headerMode="float"
        mode="modal">
        {Screens(t, getTranslation).map((screen, index) => (
          // @ts-ignore
          <Stack.Screen {...screen} key={`screen-${index}`} />
        ))}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Loading: FunctionComponent<Props> = (
  {
    isInitLocale,
    isRTL,
    showLoader,
    showChangeLanguage,
    strings,
    locale,
    externalUrls,
    showWebview,
    usageType,
    showForceUpdate,
    shouldForce,
    showForceTerms,
    termsVersion,
    isOnboarding,
    initLocale,
    toggleWebview,
    checkForceUpdate,
    setOnboardingRoutes
  }
) => {
  const shouldShowForceTerms = useRef(false);

  const [initialRoute, setInitialRoute] = useState('');

  useEffect(() => {
    registerBLEListeners();
    appLoadingActions();
  }, []);

  useEffect(() => {
    if (!showWebview && shouldShowForceTerms.current) {
      store().dispatch({ type: SHOW_FORCE_TERMS, payload: { terms: termsVersion } });
      shouldShowForceTerms.current = false;
    }
  }, [showWebview]);

  const appLoadingActions = async () => {
    try {
      await updateLocationsTimesToUTC();
      await initConfig();
      initLocale();
      subscribeToTopic();

      !IS_IOS && await store().dispatch({ type: RESET_EXPOSURES }); // first thing - clear the redux store to fix the android duplications bug

      const notFirstTime = await AsyncStorage.getItem(IS_FIRST_TIME);

      if (notFirstTime === null) {
        return setInitialRoute('Welcome');
      }

      await onBoardingCompletedActions();
    } catch (error) {
      setInitialRoute('Welcome');
      onError({ error });
    }
  };

  const onBoardingCompletedActions = async () => {
    try {
      setOnboardingRoutes(false);
      const dbSick = new IntersectionSickDatabase();

      await migrateIntersectionSickDatabase(dbSick);
      // don't init config second time
      ResetMessaging(false);

      await purgeSamplesDB();
      await clusterLocationsOnAppUpdate();
      startForegroundTimer();

      // remove intersections older then 2 weeks
      await dbSick.purgeIntersectionSickTable(moment().subtract(2, 'week').unix() * 1000);
      // await dbSick.deleteAll()
      const exposures = await dbSick.listAllRecords();

      await store().dispatch(setExposures(exposures.map((exposure: any) => ({ properties: { ...exposure } }))));

      const firstPointTS = JSON.parse(await AsyncStorage.getItem(FIRST_POINT_TS) || 'false');
      firstPointTS && store().dispatch({ type: UPDATE_FIRST_POINT, payload: firstPointTS });

      setInitialRoute('Home');
    } catch (error) {
      setInitialRoute('Home');
      onError({ error });
    }
  };

  const onSeeTerms = () => {
    store().dispatch({ type: HIDE_FORCE_TERMS });
    shouldShowForceTerms.current = true;
    setTimeout(() => toggleWebview(true, USAGE_ON_BOARDING), 300);
  };

  const onApprovedTerms = async () => {
    store().dispatch({ type: HIDE_FORCE_TERMS });
    await AsyncStorage.setItem(CURRENT_TERMS_VERSION, JSON.stringify(termsVersion));
    checkForceUpdate();
  };

  const Stack = createStackNavigator();

  return (
    (!isInitLocale || !initialRoute) ? null : (
      <View style={styles.container}>
        <Stack.Navigator mode="modal" headerMode="none" initialRouteName={initialRoute} screenOptions={() => ({ gestureEnabled: false })}>
          {isOnboarding ? <Stack.Screen name="onBoarding" component={OnboardingRoutes} options={{ cardStyleInterpolator: CardStyleInterpolators.forScaleFromCenterAndroid }} />
            : <Stack.Screen name="Home" component={Home} options={{ cardStyleInterpolator: CardStyleInterpolators.forScaleFromCenterAndroid }} initialParams={{ isRTL }} />}
        </Stack.Navigator>

        <Loader isVisible={showLoader} />
        <ChangeLanguage isVisible={showChangeLanguage} />
        <GeneralWebview isVisible={showWebview} locale={locale} externalUrls={externalUrls} closeWebview={() => toggleWebview(false, '')} usageType={usageType} />
        <ForceUpdate isVisible={showForceUpdate} shouldForce={shouldForce} strings={strings} />
        <ForceTerms isVisible={showForceTerms} isRTL={isRTL} strings={strings} onSeeTerms={onSeeTerms} onApprovedTerms={onApprovedTerms} />
      </View>
    )
  );
}

Screens = (t: TFunction, getTranslation: GetTranslation) => {
  const noHeader = {
    header: () => null,
    headerShown: false
  };

  return [
    {
      name: ScreenNames.ageConfirmation,
      component: AgeConfirmation,
      options: {
        title: t('viewNames:age'),
        ...noHeader,
        cardStyle: {
          backgroundColor: colors.primaryPurple
        }
      }
    },
    {
      name: ScreenNames.ageUnder,
      component: AgeUnder,
      options: {
        title: t('viewNames:ageUnder'),
        ...noHeader,
        cardStyle: {
          backgroundColor: colors.primaryPurple
        }
      }
    },
    {
      name: ScreenNames.ageSorting,
      component: AgeSorting,
      options: {
        title: getTranslation('viewNames:ageSorting'),
        ...noHeader
      }
    },
    {
      name: ScreenNames.locationConfirmation,
      component: LocationConfirmation,
      options: {
        title: t('viewNames:location'),
        ...noHeader,
        cardStyle: {
          backgroundColor: colors.primaryPurple
        }
      }
    },
    {
      name: ScreenNames.onboarding,
      component: Onboarding,
      options: {
        title: t('viewNames:onboarding'),
        ...noHeader,
        cardStyle: {}
      }
    },
    {
      name: ScreenNames.askPermissions,
      component: Onboarding,
      options: {
        title: t('viewNames:onboarding'),
        ...noHeader,
        cardStyle: {}
      }
    },
    {
      name: ScreenNames.dashboard,
      component: Dashboard,
      options: {
        ...noHeader,
        cardStyle: {backgroundColor: colors.white}
      }
    },
    {
      name: ScreenNames.tracing,
      component: Tracing,
      options: {
        ...noHeader,
        title: t('viewNames:tracing'),
        cardStyle: {backgroundColor: colors.greenBackground},
        cardStyleInterpolator:
          CardStyleInterpolators.forRevealFromBottomAndroid,
        gestureEnabled: true,
        gestureDirection: 'vertical'
      }
    },
    {
      name: ScreenNames.about,
      component: About,
      options: {
        ...noHeader,
        title: t('viewNames:about'),
        cardStyle: {backgroundColor: colors.notificationYellowTint},
        cardStyleInterpolator:
          CardStyleInterpolators.forRevealFromBottomAndroid,
        gestureEnabled: true,
        gestureDirection: 'vertical'
      }
    },
    {
      name: ScreenNames.community,
      component: Community,
      options: {
        ...noHeader,
        title: t('viewNames:community'),
        cardStyle: {backgroundColor: colors.lilac},
        cardStyleInterpolator:
          CardStyleInterpolators.forRevealFromBottomAndroid,
        gestureEnabled: true,
        gestureDirection: 'vertical'
      }
    },
    {
      name: ScreenNames.tests,
      component: Tests,
      options: {
        ...noHeader,
        title: t('viewNames:tests'),
        cardStyle: {backgroundColor: colors.backgroundYellow},
        cardStyleInterpolator:
          CardStyleInterpolators.forRevealFromBottomAndroid,
        gestureEnabled: true,
        gestureDirection: 'vertical'
      }
    },
    {
      name: ScreenNames.testsAdd,
      component: TestsAdd,
      options: {
        ...noHeader,
        title: t('viewNames:testsAdd'),
        cardStyle: {backgroundColor: colors.backgroundYellow},
        cardStyleInterpolator:
          CardStyleInterpolators.forRevealFromBottomAndroid,
        gestureEnabled: true,
        gestureDirection: 'vertical'
      }
    },
    {
      name: ScreenNames.testsResult,
      component: TestsResult,
      options: {
        ...noHeader,
        title: t('viewNames:testsResult'),
        cardStyle: {backgroundColor: colors.backgroundYellow},
        cardStyleInterpolator:
          CardStyleInterpolators.forRevealFromBottomAndroid,
        gestureEnabled: true,
        gestureDirection: 'vertical'
      }
    },
    {
      name: ScreenNames.settings,
      component: Settings,
      options: {
        ...noHeader,
        title: t('viewNames:settings'),
        cardStyle: {backgroundColor: colors.darkPurple},
        cardStyleInterpolator:
          CardStyleInterpolators.forRevealFromBottomAndroid,
        gestureEnabled: true,
        gestureDirection: 'vertical'
      }
    },
    {
      name: ScreenNames.closeContact,
      component: CloseContact,
      options: {
        ...noHeader,
        title: t('viewNames:closeContact'),
        cardStyle: {backgroundColor: colors.errorRedTint},
        cardStyleInterpolator:
          CardStyleInterpolators.forRevealFromBottomAndroid,
        gestureEnabled: true,
        gestureDirection: 'vertical'
      }
    },
    {
      name: ScreenNames.terms,
      component: Terms,
      options: {
        title: t('viewNames:terms'),
        ...noHeader,
        cardStyle: {backgroundColor: colors.white},
        cardStyleInterpolator:
          Platform.OS === 'ios'
            ? CardStyleInterpolators.forHorizontalIOS
            : CardStyleInterpolators.forRevealFromBottomAndroid,
        gestureEnabled: true,
        gestureDirection: Platform.OS === 'ios' ? 'horizontal' : 'vertical'
      }
    },
    {
      name: ScreenNames.dataPolicy,
      component: DataPolicy,
      options: {
        title: t('viewNames:dataPolicy'),
        ...noHeader,
        cardStyle: {backgroundColor: colors.white}
      }
    },
    {
      name: ScreenNames.leave,
      component: Leave,
      options: {
        title: t('viewNames:leave'),
        ...noHeader,
        cardStyle: {backgroundColor: colors.white}
      }
    },
    {
      name: ScreenNames.debug,
      component: Debug,
      options: {
        title: t('viewNames:debug'),
        ...noHeader,
        cardStyle: {backgroundColor: colors.white}
      }
    },
    {
      name: ScreenNames.pause,
      component: Pause,
      options: {
        title: t('viewNames:pause'),
        ...noHeader,
        cardStyle: {},
        cardStyleInterpolator: CardStyleInterpolators.forModalPresentationIOS,
        gestureEnabled: true,
        gestureDirection: 'vertical'
      }
    },
    {
      name: ScreenNames.yourDataModal,
      component: YourDataModal,
      options: {
        title: t('viewNames:yourDataModal'),
        ...noHeader,
        cardStyle: {backgroundColor: colors.transparent},
        cardStyleInterpolator:
          Platform.OS === 'ios'
            ? CardStyleInterpolators.forVerticalIOS
            : CardStyleInterpolators.forRevealFromBottomAndroid,
        gestureEnabled: true,
        gestureDirection: 'vertical'
      }
    },
    {
      name: ScreenNames.testResultModal,
      component: TestResultModal,
      options: {
        title: t('viewNames:testResultModal'),
        ...noHeader,
        cardStyle: {backgroundColor: colors.transparent},
        cardStyleInterpolator:
          Platform.OS === 'ios'
            ? CardStyleInterpolators.forVerticalIOS
            : CardStyleInterpolators.forRevealFromBottomAndroid,
        gestureEnabled: true,
        gestureDirection: 'vertical'
      }
    },
    {
      name: ScreenNames.calculatorModal,
      component: CalculatorModal,
      options: {
        ...noHeader,
        title: t('viewNames:calculatorModal'),
        cardStyle: {backgroundColor: colors.backgroundYellow},
        cardStyleInterpolator:
          CardStyleInterpolators.forRevealFromBottomAndroid,
        gestureEnabled: true,
        gestureDirection: 'vertical'
      }
    },
    {
      name: ScreenNames.sendNotice,
      component: SendNotice,
      options: {
        ...noHeader,
        title: t('viewNames:sendNotice'),
        cardStyle: {backgroundColor: colors.backgroundYellow},
        cardStyleInterpolator:
          CardStyleInterpolators.forRevealFromBottomAndroid,
        gestureEnabled: true,
        gestureDirection: 'vertical'
      }
    }
  ];
}

function RootStackScreen() {
    return (
        <RootStack.Navigator
            headerMode="float"
            screenOptions={{
                headerTitleAlign: "center",
                headerBackTitleVisible: false,
                headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
                cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
                gestureEnabled: true,
                gestureDirection: "horizontal",
                // headerStatusBarHeight: headerHeight,
                headerTintColor: Color.white,
                headerStyle: {
                    backgroundColor: Color.theme,
                    ...Platform.select({
                        android: {
                            elevation: 0,
                            borderBottomWidth: StyleSheet.hairlineWidth
                        }
                    })
                }
            }}>
            <RootStack.Screen
                name="BottomTabs"
                options={{
                    headerTransparent: true,
                    headerTitle: ""
                }}
                component={BottomTabs} />
            <RootStack.Screen
                name="Brief"
                component={Brief}
                options={{
                    headerTransparent: true,
                    headerTitle: "",
                    cardStyle: { backgroundColor: Color.page_bg },
                    headerLeft: () => {
                        return null;
                    }
                }}
            />
            <RootStack.Screen
                name="CategorySetting"
                component={CategorySetting}
                options={{
                    headerTitle: "分类设置"
                }}
            />
            <RootStack.Screen
                name="Search"
                component={Search}
                options={{
                    headerTransparent: true,
                    headerTitle: "",
                    headerLeft: () => {
                        return null;
                    }
                }}
            />
            <RootStack.Screen
                name="MangaView"
                component={MangaView}
                options={{
                    headerTransparent: true,
                    headerTitle: "",
                    cardStyle: { backgroundColor: Color.black },
                    headerLeft: () => {
                        return null;
                    }
                }}
            />
            <RootStack.Screen
                name="Guess"
                component={Guess}
            />
            <RootStack.Screen
                name={"Download"}
                component={Download}
                options={{
                    headerTitle: "下载"
                }}
            />
            <RootStack.Screen
                name={"DownloadManage"}
                component={DownloadManage}
                options={{
                    headerTitle: "下载管理"
                }}
            />
            <RootStack.Screen
                name={"ChapterManage"}
                component={ChapterManage}
            />
        </RootStack.Navigator>
    );
}