iOS and Android apps with React Native - React Navigation stack example

rn-react-navigation-stack.js

import React from 'react';
import { StackNavigator, DrawerNavigator } from 'react-navigation';

import Loading from './screens/Loading';
import Login from './screens/Login';
import Home from './screens/Home';
import Posts from './screens/Posts';
import Post from './screens/Post';
import Settings from './screens/Settings';
import SideMenu from './screens/SideMenu';

/**
 * Main screens that require authentication.
 */
const Authenticated = StackNavigator(
  {
    Home: { screen: Home },
    Posts: { screen: Posts },
    Post: { screen: Post },
    Settings: { screen: Settings },
  },
);

/**
 * Main navigation stack. Handle non-authenticated and authenticated screens.
 * It is defined as a DrawerNavigator, so the side menu appears on top of the headers.
 * Use custom side menu component to disable only some screens as menu buttons.
 */
const AppNavigation = DrawerNavigator(
  {
    Loading: { screen: Loading },
    Login: { screen: Login },
    Authenticated: { screen: Authenticated },
  },
  {
    drawerWidth: 250,
    contentComponent: SideMenu,
  },
);

export default AppNavigation;