react-navigation-stack#createStackNavigator JavaScript Examples

The following examples show how to use react-navigation-stack#createStackNavigator. 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: routes.js From OmniStack-10.0 with MIT License

6 votes

Routes = createAppContainer(
    createStackNavigator({
        Main: {
            screen: Main,
            navigationOptions: {
                title: 'DevRadar'
            },
        },
        Profile: {
            screen: Profile,
            navigationOptions: {
                title: 'Perfil no Github'
            }
        },
    }, {
        defaultNavigationOptions: {
            headerTintColor: '#FFF',
            headerStyle: {
                backgroundColor: '#7D40E7'
            },
        },
    })
)

Example #2

Source File: MainTabNavigator.js From pineapple-reactNative with MIT License

6 votes

CartStack = createStackNavigator(
  {
    Cart: {
      screen: CartScreen,
      navigationOptions: {
        headerTransparent: true,
        headerStyle: styles.header,
        headerTintColor: '#fff',
        title: 'Shopping Cart',
        headerTitleStyle: styles.headerText,
      },
    },
    Payment: {
      screen: PaymentScreen,
      navigationOptions: {
        headerTransparent: true,
        headerStyle: styles.header,
        headerTintColor: '#fff',
        title: 'Confirm Purchase',
        headerTitleStyle: styles.headerText,
      },
    },
    Confirmation: {
      screen: ConfirmationScreen,
      navigationOptions: {
        headerTransparent: true,
        headerStyle: styles.header,
        headerTintColor: '#fff',
        title: 'Order Confirmation',
        headerTitleStyle: styles.headerText,
      },
    },
  },
  config
)

Example #3

Source File: AppNavigator.js From pineapple-reactNative with MIT License

6 votes

StackNavigator = createStackNavigator(
  {
    Splash: {
      screen: SplashScreen,
      navigationOptions: {
        header: null,
        // headerStyle: {
        //   backgroundColor: '#FCB742',
        //   borderBottomWidth: 0,
        // },
        headerBackTitle: 'Log In',
      }
    },
    LogIn: {
      screen: LogInScreen,
      navigationOptions: {
        header: null,
        // headerStyle: {
        //   backgroundColor: '#FCB742',
        //   borderBottomWidth: 0,
        // },
        headerBackTitle: 'Log In',
      }
    },
    SignUp: {
      screen: SignUpScreen,
      navigationOptions: {
        header: null,
        // headerStyle: {
        //   backgroundColor: '#FCB742',
        //   borderBottomWidth: 0,
        // },
        headerBackTitle: 'Log In',
      }
    }
  }
)

Example #4

Source File: AppNavigator.js From pineapple-reactNative with MIT License

6 votes

LoadNavigator = createStackNavigator(
  {
    Home: {
      screen: loadingScreen,
      navigationOptions: {
        header: null,
      }
    }
  },
  {
    initialRouteName: 'Home',
  }
)

Example #5

Source File: AppNavigator.js From iitj-canteen with GNU General Public License v3.0

6 votes

StackNavigator = createStackNavigator(
	{
		IntroScreen: IntroScreen,
		SplashScreen: SplashScreen,
		LoginFlow: SigninScreen,
		MainFlow: Drawer
	},
	{
		initialRouteName: AsyncStorage.getItem('FirstTimeUser') ? 'SplashScreen' : 'IntroScreen',
		headerMode: 'none'
	}
)

Example #6

Source File: AppNavigator.js From iitj-canteen with GNU General Public License v3.0

6 votes

HomeStack = createStackNavigator(
	{
		HomeScreen: HomeScreen,
		DetailScreen: DetailScreen
	},
	{
		initialRouteName: 'HomeScreen',
		headerMode: "none"
	}
)

Example #7

Source File: Router.js From mixpanel-react-native with Apache License 2.0

6 votes

Router = createStackNavigator({
    MixpanelDemo:
    {
        screen: Home,
    },
    Event:
    {
        screen: Event
    },
    Profile:
    {
        screen: Profile
    },
    GDPR:
    {
        screen: GDPR
    },
    Group:
    {
        screen: Group
    }
})

Example #8

Source File: MainNavigator.js From real-frontend with GNU General Public License v3.0

6 votes

ProfileStack = (screenProps) => {
  const Stack = createStackNavigator({
    ProfileSelf: ProfileSelfScreen,
    ProfileEdit: ProfileEditScreen,
    ProfilePhoto: ProfilePhotoScreen,
    Theme: ThemeScreen,
    Privacy: PrivacyScreen,
    Translation: TranslationScreen,
    Settings: SettingsScreen,
    Payout: PayoutScreen,
    Membership: MembershipScreen,
    ProfileArchivedPhoto: ProfileArchivedPhotoScreen,
  }, {
    defaultNavigationOptions: {
      gestureEnabled: true,
      gestureResponseDistance: {
        horizontal: Layout.window.width,
      },
      cardStyle: {
        backgroundColor: screenProps.theme.colors.backgroundPrimary,
      },
    },
  })
  
  Stack.navigationOptions = ({ screenProps }) => ({
    tabBarIcon: ({ focused }) => (
      <TabBarItem focused={focused}>
        <UserIcon fill={screenProps.theme.colors.primaryIcon} />
      </TabBarItem>
    ),
  })

  return Stack
}

Example #9

Source File: MainNavigator.js From real-frontend with GNU General Public License v3.0

6 votes

DatingStack = (screenProps) => {
  const Stack = createStackNavigator({
    Dating: DatingScreen,
  }, {
    defaultNavigationOptions: {
      gestureEnabled: true,
      gestureResponseDistance: {
        horizontal: Layout.window.width,
      },
      cardStyle: {
        backgroundColor: screenProps.theme.colors.backgroundPrimary,
      },
    },
  })
  
  Stack.navigationOptions = ({ navigation, screenProps }) => ({
    tabBarIcon: ({ focused }) => (
      <TabBarItem focused={focused}>
        <HeartIcon fill={screenProps.theme.colors.primaryIcon} />
      </TabBarItem>
    ),
  })

  return Stack
}

Example #10

Source File: MainNavigator.js From real-frontend with GNU General Public License v3.0

6 votes

NotificationsStack = (screenProps) => {
  const Stack = createStackNavigator({
    Notifications: NotificationsScreen,
  }, {
    defaultNavigationOptions: {
      gestureEnabled: true,
      gestureResponseDistance: {
        horizontal: Layout.window.width,
      },
      cardStyle: {
        backgroundColor: screenProps.theme.colors.backgroundPrimary,
      },
    },
  })
  
  Stack.navigationOptions = ({ navigation, screenProps }) => ({
    tabBarIcon: ({ focused }) => (
      <TabBarItem focused={focused}>
        <CreateIcon fill={screenProps.theme.colors.primaryIcon} />
      </TabBarItem>
    ),
    tabBarOnPress: ({ navigation, defaultHandler }) => {
      navigation.navigate('Camera')
    },
  })

  return Stack
}

Example #11

Source File: MainNavigator.js From real-frontend with GNU General Public License v3.0

6 votes

SearchStack = (screenProps) => {
  const Stack = createStackNavigator({
    Search: SearchScreen,
  }, {
    defaultNavigationOptions: {
      gestureEnabled: true,
      gestureResponseDistance: {
        horizontal: Layout.window.width,
      },
      cardStyle: {
        backgroundColor: screenProps.theme.colors.backgroundPrimary,
      },
    },
  })

  Stack.navigationOptions = ({ screenProps }) => ({
    tabBarIcon: ({ focused }) => (
      <TabBarItem focused={focused}>
        <SearchIcon fill={screenProps.theme.colors.primaryIcon} />
      </TabBarItem>
    ),
  })

  return Stack
}

Example #12

Source File: AppNavigation.js From Alfredo-Mobile with MIT License

6 votes

PrimaryNav = createStackNavigator({
  Main: {
    screen: BottomNavigation,
    navigationOptions: ({navigation}) => ({
      headerShown: false
    })
  },
  Account: { screen: Account },
  Category: { screen: Products },
  Home: { screen: Home },
  ProductDetail: { screen: ProductDetail },
  RegisterScreen: { screen: RegisterScreen },
  LoginScreen: { screen: LoginScreen },
  Invoice: { screen: Invoice },
  OrderList: { screen: OrderList },
  ConfirmPayment: { screen: ConfirmPayment },
  CategoryScreen: { screen: CategoryScreen },
}, {
  // Default config for all screens
  initialRouteName: 'Main',
  navigationOptions: {
    headerStyle: styles.header
  }
})

Example #13

Source File: AuthNavigator.js From real-frontend with GNU General Public License v3.0

6 votes

AuthStack = (screenProps) => createStackNavigator({
  Auth: AuthScreen,
  AuthForgot: AuthForgotScreen,
  AuthForgotConfirm: AuthForgotConfirmScreen,
  AuthSignup: AuthSignupScreen,
  AuthSignupConfirm: AuthSignupConfirmScreen,
  AuthOnboard: AuthOnboardScreen,
}, {
  defaultNavigationOptions: {
    gestureEnabled: false,
    gestureResponseDistance: {
      horizontal: 125,
    },
    cardStyle: {
      backgroundColor: screenProps.theme.colors.backgroundPrimary,
    },
  },
})

Example #14

Source File: AppNavigation.js From gDoctor with MIT License

6 votes

AppStack = createStackNavigator({
  MainScreen: {
    screen: BottomNavigation,
    navigationOptions: ({ navigation }) => ({
      headerShown: false
    })
  },

  // Home Stack
  HomeScreen: { screen: HomeScreen },
  DoctorDetail: { screen: DoctorDetailScreen },

  // Inbox Stack
  InboxScreen: { screen: InboxScreen },

  // Account Stack
  AccountScreen: { screen: AccountScreen },
}, {
  // Default config for all screens
  headerMode: 'none',
  initialRouteName: 'MainScreen',
  navigationOptions: {
    headerStyle: styles.header
  }
})

Example #15

Source File: routes.js From devradar with MIT License

6 votes

Routes = createAppContainer(
    createStackNavigator({
        Main: {
            screen: Main,
            navigationOptions: {
                title: 'DevRadar'
            }
        },
        Profile: {
            screen: Profile,
            navigationOptions: {
                title: 'Perfil no Github'
            }
        }
    }, {
        defaultNavigationOptions: {
            headerTintColor: '#FFF',
            headerBackTitleVisible: false,
            headerStyle: {
                backgroundColor: '#7D40E7'
            }
        }
    })
)

Example #16

Source File: App.js From geometry_3d with MIT License

6 votes

Object3DNavigator = createStackNavigator(
  {
    CubeScreen: {
      screen: (props) => <CubeScreen initShape={"cube"} {...props} />,
    },
    SphereScreen: {
      screen: (props) => <SphereScreen initShape={"sphere"} {...props} />,
    },
    BaseLayoutScreen: {
      screen: (props) => (
        <BaseLayoutScreen
          initShape={""}
          params={
            props.navigation && props.navigation.state
              ? props.navigation.state.params
              : null
          }
        />
      ),
    },
    ConeScreen: {
      screen: (props) => <ConeScreen initShape={"cone"} {...props} />,
    },
    OctahedronScreen: {
      screen: (props) => (
        <OctahedronScreen initShape={"octahedron"} {...props} />
      ),
    },
    PrismScreen: {
      screen: (props) => <PrismScreen initShape={"prism"} {...props} />,
    },
  },
  {
    headerMode: "none",
  }
)

Example #17

Source File: App.js From geometry_3d with MIT License

6 votes

AuthStack = createStackNavigator(
  {
    Login: LoginScreen,
    Register: RegisterScreen,
  },
  {
    headerMode: "none",
  }
)

Example #18

Source File: Routes.js From FinDevs with MIT License

6 votes

Routes = createAppContainer(
  createStackNavigator({
    Main: {
      screen: Main,
      navigationOptions: {
        title: 'FinDev'
      }
    },
    Profile: {
      screen: Profile,
      navigationOptions: {
        title: 'Github Profile'
      }
    }
  }, {
    defaultNavigationOptions: {
      headerTintColor: '#FFF',
      headerStyle: {
        backgroundColor: '#8E4DFF',
        

      }
    }
  })
)

Example #19

Source File: routes.js From semana-omnistack-10 with MIT License

6 votes

Routes = createAppContainer(
  createStackNavigator({
    Main: {
      screen: Main,
      navigationOptions: {
        title: 'DevRadar'
      },
    },
    Profile: {
      screen: Profile,
      navigationOptions: {
        title: 'Perfil no Github'
      }
    },
  }, {
    defaultNavigationOptions: {
      headerTintColor: '#FFF',
      headerBackTitleVisible: false,
      headerStyle: {
        backgroundColor: '#7D40E7',
      },
    },
  })
)

Example #20

Source File: AppNavigator.js From mern-stack with MIT License

6 votes

authStack = createStackNavigator(
  {
    SignIn: SignInScreen,
    SignUp: SignUpScreen,
    RequestPasswordReset: RequestPasswordResetScreen,
    RequestVerificationEmail: RequestVerificationEmailScreen,
  },
  { initialRouteName: 'SignIn' }
)

Example #21

Source File: App.js From react-native-booking-app with MIT License

6 votes

AppStack = createStackNavigator({
    Home: HomeScreen,
    Profile: ProfileScreen,
    Booking: BookingScreen,
    About: AboutScreen,
    Locations: LocationScreen,
    LocationsDetail: LocationDetailScreen,
    Contact: ContactUsScreen,
    Reports: ReportScreen,
    SendReport: SendReportScreen,
    AddEditFood: AddEditFoodScreen,
    AddEditWater: AddEditWaterScreen,
    AddEditWeightInch: AddEditWeightInchScreen,
    TakePhoto: TakePhotoScreen,
})

Example #22

Source File: App.js From rn-cartoon-app with MIT License

6 votes

AppStack = createStackNavigator(
  {
    RootPage: {
      screen: RootPage,
      navigationOptions: {
        headerShown: false,
      }
    },
    Brief: {
      screen: Brief,
    },
    ImgPage: {
      screen: ImgPage,
    },
    CategoryList: {
      screen: CategoryList,
    },
    AboutMe: {
      screen: AboutMe,
    }
  },
  {
    mode: 'modal',
    headerMode: 'none',
  }
)

Example #23

Source File: AppStackNavigator.js From barter-app-stage-10 with MIT License

6 votes

AppStackNavigator = createStackNavigator({
  BarterList : {
    screen : HomeScreen,
    navigationOptions:{
      headerShown : false
    }
  },

  ReceiverDetails : {
    screen : ReceiverDetailsScreen,
    navigationOptions:{
      headerShown : false
    }
  },
  Notification : {
     screen : NotificationScreen,
     navigationOptions:{
       headerShown : false
     }
   }
 },


  {
    initialRouteName: 'BarterList'
  }
)

Example #24

Source File: AppStackNavigator.js From barter-app-stage-6 with MIT License

6 votes

AppStackNavigator = createStackNavigator({
  BarterList : {
    screen : HomeScreen,
    navigationOptions:{
      headerShown : false
    }
  },

  ReceiverDetails : {
    screen : ReceiverDetailsScreen,
    navigationOptions:{
      headerShown : false
    }
  },

},
  {
    initialRouteName: 'BarterList'
  }
)

Example #25

Source File: TabNavigator.js From 4noobs-mobile with MIT License

6 votes

HomeStack = createStackNavigator(
  {
    Home: HomeScreen,
    Section: SectionScreen,
  },
  {
    mode: "modal",
  }
)

Example #26

Source File: AppNavigator.js From 4noobs-mobile with MIT License

6 votes

AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Section: SectionScreen,
  },
  {
    mode: "modal",
  }
)

Example #27

Source File: routes.js From SemanaOmnistack10 with MIT License

6 votes

Routes = createAppContainer(
    createStackNavigator({
        Main: {
            screen: Main,
            navigationOptions: {
                title: 'DevRadar'
            }
        },
        Profile: {
            screen: Profile,
            navigationOptions: {
                title: 'Perfil no GitHub'
            }
        }
    }, {
        defaultNavigationOptions: {
            headerStyle: {
                backgroundColor: '#7D40E7',
            },
            headerBackTitleVisible: false,
            headerTintColor: '#FFF'
        }
    })
)

Example #28

Source File: AppStackNavigator.js From book-santa-stage-10 with MIT License

6 votes

AppStackNavigator = createStackNavigator({
  BookDonateList : {
    screen : BookDonateScreen,
    navigationOptions:{
      headerShown : false
    }
  },
  RecieverDetails : {
    screen : RecieverDetailsScreen,
    navigationOptions:{
      headerShown : false
    }
  }
},
  {
    initialRouteName: 'BookDonateList'
  }
)

Example #29

Source File: MainNavigator.js From real-frontend with GNU General Public License v3.0

5 votes

HomeStack = (screenProps) => {
  const Stack = createMaterialTopTabNavigator({
    CameraStack: createStackNavigator({
      Camera: CameraScreen,
    }, {
      initialRouteName: 'Camera',
      headerMode: 'none',
      navigationOptions: {
        cardStyle: {
          backgroundColor: screenProps.theme.colors.backgroundPrimary,
        },
      },
    }),
    FeedStack: createStackNavigator({
      Feed: FeedScreen,
    }, {
      navigationOptions: {
        cardStyle: {
          backgroundColor: screenProps.theme.colors.backgroundPrimary,
        },
      },
    }),
    ChatStack: createStackNavigator({
      Chat: ChatScreen,
    }, {
      navigationOptions: {
        cardStyle: {
          backgroundColor: screenProps.theme.colors.backgroundPrimary,
        },
      },
    }),
  }, {
    initialRouteName: 'FeedStack',
    tabBarComponent: () => null,
    navigationOptions: ({ navigation, screenProps }) => ({
      ...getActiveChildNavigationOptions(navigation, screenProps),
    }),
  })

  Stack.navigationOptions = ({ navigation, screenProps }) => ({
    tabBarIcon: ({ focused }) => (
      <TabBarItem focused={focused}>
        <HomeIcon fill={screenProps.theme.colors.primaryIcon} />
      </TabBarItem>
    ),
    tabBarVisible: navigation.state.routes[navigation.state.index].routeName !== 'CameraStack',
    tabBarOnPress: ({ navigation, defaultHandler }) => {
      const stackIndex = path(['state', 'index'])(navigation)
      const stackRoutes = path(['state', 'routes', stackIndex])(navigation)
      
      const currentIndex = path(['index'])(stackRoutes)
      const currentKey = path(['key'])(stackRoutes)
      const scrollToTop = path(['routes', currentIndex, 'params', 'scrollToTop'])(stackRoutes)

      if (navigation.isFocused() && currentIndex !== 0) {
        navigation.navigate('Feed')
      }

      if (navigation.isFocused() && currentKey !== 'FeedStack') {
        navigation.navigate('Feed')
      }

      if (navigation.isFocused() && typeof scrollToTop === 'function') {
        scrollToTop()
      }

      defaultHandler()
    },
  })
  
  return Stack
}