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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
AuthStack = createStackNavigator(
  {
    Login: LoginScreen,
    Register: RegisterScreen,
  },
  {
    headerMode: "none",
  }
)
Example #18
Source File: Routes.js    From FinDevs with MIT License 6 votes vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
HomeStack = createStackNavigator(
  {
    Home: HomeScreen,
    Section: SectionScreen,
  },
  {
    mode: "modal",
  }
)
Example #26
Source File: AppNavigator.js    From 4noobs-mobile with MIT License 6 votes vote down vote up 
AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Section: SectionScreen,
  },
  {
    mode: "modal",
  }
)
Example #27
Source File: routes.js    From SemanaOmnistack10 with MIT License 6 votes vote down vote up 
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 vote down vote up 
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 vote down vote up 
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
}