How to use react-navigation-stack - 10 common examples

navigationOptions.navigation.openDrawer();
        }}
      />
    ),
  }),
);
ProfileNav.path = '';
ProfileNav.navigationOptions = {
  tabBarIcon: createTabBarIcon('profile'),
};

function createTabBarIcon(name) {
  return ({ focused }) => ;
}

const Media = createStackNavigator(
  {
    MediaScreen,
    EditMedia,
  },
  {
    // initialRouteName: 'EditMedia',
  },
);
Media.path = '';
Media.navigationOptions = {
  tabBarIcon: createTabBarIcon('capture'),
};
const MainTabNavigator = createBottomTabNavigator(
  {
    Feed: FeedNav,
    // Explore: {

// @flow
import { Platform } from "react-native";
import { createStackNavigator } from "react-navigation-stack";
import { closableStackNavigatorConfig } from "../../../navigation/navigatorConfig";

import DelegationStarted from "./Started";
import DelegationSummary from "./Summary";
import DelegationSelectValidator from "./SelectValidator";
import DelegationConnectDevice from "./ConnectDevice";
import DelegationValidation from "./Validation";
import DelegationValidationSuccess from "./ValidationSuccess";
import DelegationValidationError from "./ValidationError";

const DelegationFlow = createStackNavigator(
  {
    // $FlowFixMe
    DelegationStarted,
    DelegationSummary,
    DelegationSelectValidator,
    DelegationConnectDevice,
    DelegationValidation,
    DelegationValidationSuccess,
    DelegationValidationError,
  },
  closableStackNavigatorConfig,
);

DelegationFlow.navigationOptions = ({ navigation }) => ({
  header: null,
  gesturesEnabled:

RoomView: {
		getScreen: () => require('./views/RoomView').default
	},
	ThreadMessagesView: {
		getScreen: () => require('./views/ThreadMessagesView').default
	},
	MarkdownTableView: {
		getScreen: () => require('./views/MarkdownTableView').default
	},
	ReadReceiptsView: {
		getScreen: () => require('./views/ReadReceiptView').default
	}
};

// Inside
const ChatsStack = createStackNavigator({
	RoomsListView: {
		getScreen: () => require('./views/RoomsListView').default
	},
	RoomActionsView: {
		getScreen: () => require('./views/RoomActionsView').default
	},
	RoomInfoView: {
		getScreen: () => require('./views/RoomInfoView').default
	},
	RoomInfoEditView: {
		getScreen: () => require('./views/RoomInfoEditView').default
	},
	RoomMembersView: {
		getScreen: () => require('./views/RoomMembersView').default
	},
	SearchMessagesView: {

import * as React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { createStackNavigator } from 'react-navigation-stack';

import ModulesProvider from './ModulesProvider';
import SelectScreen from './screens/SelectScreen';
import TestScreen from './screens/TestScreen';

const AppNavigator = createStackNavigator(
  {
    Select: {
      screen: SelectScreen,
      path: '',
      navigationOptions: {
        title: 'Test Suite',
      },
    },
    TestScreen: {
      screen: TestScreen,
      path: 'TestScreen/:tests',
    },
  },
  {
    headerMode: 'screen',
    transitionConfig: global.DETOX

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { PermissionsAndroid } from "react-native";
import { init, connect } from "rongcloud-react-native-imlib";
import config from "./config";
import * as examples from "./examples";

PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE).catch(() => {});
PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION).catch(() => {});

init(config.appKey);
connect(config.token);

export default createAppContainer(createStackNavigator(examples, { initialRouteName: "default" }));

import ProfileScreen from '@Views/Profile'
import LanguageScreen from '@Views/Language'
import FeedbackScreen from '@Views/Feedback'
import MessageScreen from '@Views/Message'
import PostScreen from '@Views/Post'

import {
  View,
  Text,
  Platform
} from 'react-native'

const HomeStack = createStackNavigator({
  Home: { screen: HomeScreen, }
})
const ContactsStack = createStackNavigator({
  Contacts: { screen: ContactsScreen }
})
const SettingsStack = createStackNavigator({
  Settings: { screen: SettingsScreen },
})

const TabNavigator = createBottomTabNavigator(
  {
    Home: { screen: HomeStack },
    Contacts: { screen: ContactsStack },
    Settings: { screen: SettingsStack }
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarLabel: ({ focused, tintColor }) => {
        const { routeName } = navigation.state

InboxScreen.navigationOptions = {
  headerTitle: 'Inbox',
};

const EmailScreen = ({ navigation }: NavigationStackScreenProps) => (
  
);

const DraftsScreen = ({ navigation }: NavigationStackScreenProps) => (
  
);
DraftsScreen.navigationOptions = {
  headerTitle: 'Drafts',
};

const InboxStack = createStackNavigator(
  {
    Email: { screen: EmailScreen },
    Inbox: { screen: InboxScreen },
  },
  {
    navigationOptions: {
      drawerIcon: ({ tintColor }: { tintColor: string }) => (
        }
        />
      ),
      drawerLabel: 'Inbox',
    },
  }

navigation: NavigationScreenProp;
}) => (
  
);
MyProfileScreen.navigationOptions = ({
  navigation,
}: {
  navigation: NavigationScreenProp;
}) => ({
  title: `${navigation.state.params!.name}'s Profile!`,
});

const ProfileNavigator = createStackNavigator(
  {
    Home: {
      screen: MyHomeScreen,
    },
    Profile: {
      path: 'people/:name',
      screen: MyProfileScreen,
    },
  },
  {
    defaultNavigationOptions: {
      headerLeft: null,
    },
    mode: 'modal',
  }
);

InboxScreen.navigationOptions = {
  headerTitle: 'Inbox',
};

const EmailScreen: NavigationStackScreenComponent = ({
  navigation,
}) => ;

const DraftsScreen: NavigationStackScreenComponent = ({
  navigation,
}) => ;
DraftsScreen.navigationOptions = {
  headerTitle: 'Drafts',
};

const InboxStack = createStackNavigator(
  {
    Inbox: { screen: InboxScreen },
    Email: { screen: EmailScreen },
  },
  {
    navigationOptions: ({ navigation }: NavigationDrawerScreenProps) => {
      const options: NavigationDrawerOptions = {
        drawerLabel: 'Inbox',
        drawerLockMode: (
          navigation.state.routes[navigation.state.index].params || {}
        ).drawerLockMode,
        drawerIcon: ({ tintColor }) => (

headerTitle: 'Inbox',
};

const EmailScreen: NavigationStackScreenComponent = ({
  navigation,
}) => ;

const DraftsScreen: NavigationStackScreenComponent = ({
  navigation,
}) => ;

DraftsScreen.navigationOptions = {
  headerTitle: 'Drafts',
};

const InboxStack = createStackNavigator(
  {
    Inbox: { screen: InboxScreen },
    Email: { screen: EmailScreen },
  },
  {
    navigationOptions: ({ navigation }) => {
      const options: NavigationDrawerOptions = {
        drawerLabel: 'Inbox',
        drawerLockMode: (
          navigation.state.routes[navigation.state.index].params || {}
        ).drawerLockMode,
        drawerIcon: ({ tintColor }) => (