@react-navigation/stack#TransitionPresets TypeScript Examples

The following examples show how to use @react-navigation/stack#TransitionPresets. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: App.tsx    From BitcoinWalletMobile with MIT License 6 votes vote down vote up 
App = () => {

  useEffect(() => {
    SplashScreen.hide()
  }, [])

  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <SafeAreaProvider>
          <NavigationContainer>
            <View style={{flex:1, backgroundColor:'#1A1E29'}}>
            <StatusBar backgroundColor="#090C14" barStyle="light-content"/>
                <Stack.Navigator mode="card" screenOptions={{...TransitionPresets.SlideFromRightIOS}} initialRouteName="Root" headerMode="none" >
                  <Stack.Screen name="Root" component={RootView} />
                  <Stack.Screen name="CreateStepOne" component={CreateStepOne} />
                  <Stack.Screen name="CreateStepTwo" component={CreateStepTwo} />
                  <Stack.Screen name="Restore" component={Restore} />
                  <Stack.Screen name="PickerView" component={PickerView} />
                  <Stack.Screen name="ScanQRCode" component={ScanQRCode} />
                  <Stack.Screen name="Send" component={Send} />
                </Stack.Navigator>
                </View>
              </NavigationContainer>
        </SafeAreaProvider>
      </PersistGate>
    </Provider>
  );
}
Example #2
Source File: main.tsx    From iotc-cpm-sample with MIT License 6 votes vote down vote up 
function Navigation() {
  return (
    <Stack.Navigator
      initialRouteName={Screens.HOME_SCREEN}
      screenOptions={{
        headerMode,
        header: function ({route, navigation}) {
          return (
            <ApplicationBar
              goBack={navigation.pop}
              hasPrevious={navigation.canGoBack()}
              title={getTitle(route as any)}
            />
          );
        },
        transitionSpec: {
          open: TransitionPresets.DefaultTransition.transitionSpec.open,
          close: {
            ...TransitionPresets.DefaultTransition.transitionSpec.close,
            config: {
              duration: 0,
            },
            animation: 'timing',
          },
        },
      }}>
      <Stack.Screen name={Screens.HOME_SCREEN} component={Home} />
      <Stack.Screen name={Screens.DEVICES_SCREEN} component={Devices} />
      <Stack.Screen name={Screens.PROVIDERS_SCREEN} component={Providers} />
      <Stack.Screen name={Screens.INSIGHT_SCREEN} component={Insight} />
    </Stack.Navigator>
  );
}
Example #3
Source File: App.tsx    From frontatish with MIT License 5 votes vote down vote up 
// const EmptyStatesStack = createStackNavigator();

function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider theme="light">
        <NavigationContainer>
          <Stack.Navigator
            screenOptions={() => ({
              headerShown: false,
              // gestureEnabled: false,
              ...TransitionPresets.SlideFromRightIOS,
            })}
          >
            <Stack.Screen
              name="Home"
              component={HomeScreen}
              options={{ headerShown: false }}
              // initialParams={{ setTheme }}
            />
            <Stack.Screen
              name="SearchbarScreen"
              component={SearchbarScreen}
              options={{ headerShown: false }}
              // initialParams={{ setTheme }}
            />
            {SCREEN_MAPPING.map((item) => (
              <Stack.Screen
                name={item.name}
                component={item.screen}
                key={item.name}
                options={{ headerShown: false }}
              />
            ))}
          </Stack.Navigator>
        </NavigationContainer>
      </ThemeProvider>
    </SafeAreaProvider>
  );
}
Example #4
Source File: RootNavigator.tsx    From nyxo-app with GNU General Public License v3.0 5 votes vote down vote up 
Root: FC = () => (
  <RootStack.Navigator>
    <RootStack.Screen
      name="App"
      options={{ headerShown: false }}
      component={TabNavigator}
    />
    <RootStack.Screen
      name="Auth"
      options={{ headerShown: false }}
      component={AuthNavigator}
    />
    <RootStack.Screen
      name="Week"
      component={CoachingWeek}
      options={{ headerShown: false }}
    />
    <RootStack.Screen
      name="Lesson"
      component={LessonView}
      options={{ headerShown: false }}
    />
    <RootStack.Screen
      name="Purchase"
      component={PurchaseScreen}
      options={{ headerShown: false }}
    />
    <RootStack.Screen
      name="Terveystalo"
      component={Welcome}
      options={{ headerShown: false }}
    />
    <RootStack.Screen
      name="Onboarding"
      component={Onboarding}
      options={{
        headerShown: false,
        ...TransitionPresets.ModalTransition
      }}
    />
  </RootStack.Navigator>
)
Example #5
Source File: theme.ts    From lexicon with MIT License 5 votes vote down vote up 
getTheme = ({ colorScheme, aesthetic }: Config) => {
  const isDarkMode = colorScheme === 'dark';
  if (aesthetic === 'android') {
    FONT_VARIANTS.semiBold = FONT_VARIANTS.bold;
  }
  const colors = colorTheme(isDarkMode);

  return {
    colors,
    fontSizes: FONT_SIZES,
    iconSizes: ICON_SIZES,
    spacing: SPACING,
    fontVariants: FONT_VARIANTS,
    headingFontSizes: HEADING_FONT_SIZES,
    shadow: shadowStyle(isDarkMode),
    navHeader: {
      headerStyle: {
        backgroundColor: colors.background,
      },
      headerTintColor: colors.primary,
      headerTitleStyle: {
        color: colors.textNormal,
        fontSize: FONT_SIZES.l,
      },
      headerTitleAlign: 'center',
      headerBackTitleStyle: {
        color: colors.primary,
        fontSize: FONT_SIZES.m,
      },
      headerBackTitle: t('Back'),
    } as const,
    navModal:
      aesthetic === 'ios' &&
      ({
        headerShown: false,
        gestureEnabled: true,
        cardOverlayEnabled: true,
        ...TransitionPresets.ModalPresentationIOS,
      } as const),
    navNoShadow: {
      headerStyle: {
        shadowOpacity: 0,
        elevation: 0,
        backgroundColor: colors.background,
      },
    },
  };
}
Example #6
Source File: index.tsx    From krmanga with MIT License 5 votes vote down vote up 
function ModalStackScreen() {

    return (
        <ModalStack.Navigator
            mode="modal"
            headerMode="screen"
            screenOptions={() => ({
                ...TransitionPresets.ModalSlideFromBottomIOS,
                cardOverlayEnabled: true,
                gestureEnabled: true,
                headerTitleAlign: "center",
                // headerStatusBarHeight: headerHeight,
                headerBackTitleVisible: false,
                headerTintColor: Color.white,
                headerStyle: {
                    backgroundColor: Color.theme,
                    ...Platform.select({
                        android: {
                            elevation: 0,
                            borderBottomWidth: StyleSheet.hairlineWidth
                        }
                    })
                }
            })}>
            <ModalStack.Screen
                name="Root"
                component={RootStackScreen}
                options={{ headerShown: false }}
            />
            <ModalStack.Screen
                name="Login"
                component={Login}
                options={{
                    headerTitle: "登录"
                }}
            />
            <ModalStack.Screen
                name="Register"
                component={Register}
                options={{
                    headerTitle: "注册"
                }}
            />
            <ModalStack.Screen
                name="AppUpdate"
                component={AppUpdate}
                options={{
                    headerTransparent: true,
                    headerTitle: "",
                    headerLeft: () => {
                        return null;
                    }
                }}
            />
        </ModalStack.Navigator>
    );
}