@react-navigation/stack#CardStyleInterpolators JavaScript Examples

The following examples show how to use @react-navigation/stack#CardStyleInterpolators. 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.js    From MoviesDaily with MIT License 6 votes vote down vote up 
AppNavigator = () => {
  return (
    <Stack.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerTitle: false,
        headerTransparent: true,
        headerBackTitleVisible: false,
        headerShown: false,
      }}
    >
      <Stack.Screen name="Home" component={HomeDrawerNavigator} options={{ headerShown: false }} />
      <Stack.Screen name="MovieDetail" component={MovieDetailScreen} />
      <Stack.Screen name="TVDetail" component={TVDetailScreen} />
      <Stack.Screen
        name="Search"
        component={SearchScreen}
        options={{
          cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS,
          gestureDirection: "vertical",
        }}
      />
      <Stack.Screen name="Webview" component={WebViewScreen} />
      <Stack.Screen name="Movielist" component={MovieListScreen} />
      <Stack.Screen name="Movieseason" component={MovieSeasonScreen} />
    </Stack.Navigator>
  );
}
Example #2
Source File: routes.js    From be-the-hero with MIT License 6 votes vote down vote up 
export default function Routes() {
  return (
    <NavigationContainer>
      <AppStack.Navigator
        screenOptions={{
          gestureEnabled: true,
          gestureDirection: 'horizontal',
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
          headerShown: false,
        }}
      >
        <AppStack.Screen name="Incidents" component={Incidents} />
        <AppStack.Screen name="Detail" component={Detail} />
      </AppStack.Navigator>
    </NavigationContainer>
  );
}
Example #3
Source File: navigation.js    From reddit-clone with MIT License 6 votes vote down vote up 
function RootScreen() {
  const { theme } = React.useContext(ThemeContext)
  return (
    <NavigationContainer theme={theme === 'light' ? DefaultTheme : DarkTheme}>
      <RootStack.Navigator
        screenOptions={{
          headerShown: false,
          cardStyle: { backgroundColor: 'transparent' },
          cardStyleInterpolator: CardStyleInterpolators.forModalPresentationIOS,
          gestureEnabled: true,
          gestureDirection: 'vertical'
        }}
        mode="modal"
      >
        <RootStack.Screen name="Tab" component={MyTabs} />
        <RootStack.Screen name="SignModal" component={SignScreens} />
      </RootStack.Navigator>
    </NavigationContainer>
  )
}
Example #4
Source File: App.js    From Turbo-Browser with MIT License 5 votes vote down vote up 
NavigationContainerComponent = () => {
  const Stack = createStackNavigator();

  const appInfo = useSelector((state) => state.appInfo);

  return (
    <NavigationContainer>
      <Stack.Navigator 
      screenOptions={ appInfo.animationDirection ? {
        
      } : {
        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS
      }}
      initialRouteName={Home}>
        <Stack.Screen
          name="Home"
          component={Home}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="Search"
          component={Search}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="IncognitoSearch"
          component={IncognitoSearch}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="Incognito"
          component={Incognito}
          options={{ 
            headerShown: false,
            animations: {
              
            }
          }}
        />
        <Stack.Screen
          name="Bookmarks"
          component={Bookmarks}
          options={{ headerShown: false }}
        />
          <Stack.Screen
          name="History"
          component={History}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="Help"
          component={Help}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="Settings"
          component={Settings}
          options={{ headerShown: false }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
Example #5
Source File: App.js    From Cosmos with MIT License 4 votes vote down vote up 
render() {
    const {state} = this.context;
    return (
      <Stack.Navigator
        key={state.box}
        initialRouteName="ProfileScreen"
        keyboardHandlingEnabled={true}
        mode="modal"
        lazy={true}
        headerMode="screen">
        <Stack.Screen
          options={{
            header: ({navigation}) => {
              return (
                <AppHeader
                  iconRight="edit-2"
                  onPressRight={() => navigation.navigate('Setting')}
                />
              );
            },
          }}
          name="ProfileScreen"
          component={ProfileScreen}
        />
        <Stack.Screen
          options={{
            gestureDirection: 'horizontal',
            cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
            transitionSpec: {
              animation: 'spring',
              open: TransitionSpecs.TransitionIOSSpec,
              close: TransitionSpecs.TransitionIOSSpec,
            },
            header: ({navigation}) => {
              return (
                <AppHeader
                  iconLeft="arrow-left"
                  onPressLeft={() => navigation.goBack()}
                />
              );
            },
          }}
          name="Postview"
          component={PostViewScreen}
        />
        <Stack.Screen
          options={{
            gestureDirection: 'horizontal',
            cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
            transitionSpec: {
              animation: 'spring',
              open: TransitionSpecs.TransitionIOSSpec,
              close: TransitionSpecs.TransitionIOSSpec,
            },
            header: ({navigation}) => {
              return (
                <AppHeader
                  iconLeft="arrow-left"
                  onPressLeft={() => navigation.goBack()}
                />
              );
            },
          }}
          name="Setting"
          component={MainSettingsScreen}
        />
        <Stack.Screen
          options={{
            gestureDirection: 'horizontal',
            cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
            transitionSpec: {
              animation: 'spring',
              open: TransitionSpecs.TransitionIOSSpec,
              close: TransitionSpecs.TransitionIOSSpec,
            },
            header: ({navigation}) => {
              return (
                <AppHeader
                  iconLeft="arrow-left"
                  onPressLeft={() => navigation.goBack()}
                />
              );
            },
          }}
          name="CommentScreen"
          component={CommentScreen}
        />
      </Stack.Navigator>
    );
  }
Example #6
Source File: App.js    From Cosmos with MIT License 4 votes vote down vote up 
render() {
    const {state} = this.context;
    return (
      <Stack.Navigator
        key={state.box}
        initialRouteName="HomeScreen"
        keyboardHandlingEnabled={true}
        lazy={true}
        headerMode="screen">
        <Stack.Screen
          options={{
            header: ({navigation}) => {
              return (
                <AppHeader
                  title={state.box === '' ? 'Cosmos' : state.box}
                  onPressLeft={() =>
                    navigation.navigate('BoxScreen', {boxName: state.box})
                  }
                  iconRight="box"
                  onPressRight={() => navigation.navigate('ListCircle')}
                />
              );
            },
          }}
          name="HomeScreen"
          component={HomeScreen}
        />
        <Stack.Screen
          options={{
            gestureDirection: 'horizontal',
            cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
            transitionSpec: {
              animation: 'spring',
              open: TransitionSpecs.TransitionIOSSpec,
              close: TransitionSpecs.TransitionIOSSpec,
            },
            header: ({navigation}) => {
              return (
                <AppHeader
                  iconLeft="arrow-left"
                  onPressLeft={() => navigation.goBack()}
                  title={state.box === '' ? 'Cosmos' : state.box}
                />
              );
            },
          }}
          name="BoxScreen"
          component={BoxScreen}
        />
        <Stack.Screen
          options={{
            gestureDirection: 'horizontal',
            cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
            transitionSpec: {
              animation: 'spring',
              open: TransitionSpecs.TransitionIOSSpec,
              close: TransitionSpecs.TransitionIOSSpec,
            },
            header: ({navigation}) => {
              return (
                <AppHeader
                  iconLeft="arrow-left"
                  onPressLeft={() => navigation.goBack()}
                />
              );
            },
          }}
          name="ListCircle"
          component={ListBoxesScreen}
        />
        <Stack.Screen
          options={{
            gestureDirection: 'horizontal',
            cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
            transitionSpec: {
              animation: 'spring',
              open: TransitionSpecs.TransitionIOSSpec,
              close: TransitionSpecs.TransitionIOSSpec,
            },
            header: ({navigation}) => {
              return (
                <AppHeader
                  iconLeft="arrow-left"
                  onPressLeft={() => navigation.goBack()}
                />
              );
            },
          }}
          name="Postview"
          component={PostViewScreen}
        />
        <Stack.Screen
          options={{
            gestureDirection: 'horizontal',
            cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
            transitionSpec: {
              animation: 'spring',
              open: TransitionSpecs.TransitionIOSSpec,
              close: TransitionSpecs.TransitionIOSSpec,
            },
            header: ({navigation}) => {
              return (
                <AppHeader
                  iconLeft="arrow-left"
                  onPressLeft={() => navigation.goBack()}
                />
              );
            },
          }}
          name="CommentScreen"
          component={CommentScreen}
        />
        <Stack.Screen
          options={{
            gestureDirection: 'horizontal',
            cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
            transitionSpec: {
              animation: 'spring',
              open: TransitionSpecs.TransitionIOSSpec,
              close: TransitionSpecs.TransitionIOSSpec,
            },
            header: ({navigation}) => {
              return (
                <AppHeader
                  iconLeft="arrow-left"
                  onPressLeft={() => navigation.goBack()}
                />
              );
            },
          }}
          name="ProfileScreen"
          component={ProfileScreen}
        />
      </Stack.Navigator>
    );
  }