How to use react-navigation - 10 common examples

To help you get started, we’ve selected a few react-navigation examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github flow-typed / flow-typed / definitions / npm / react-navigation_v3.x.x / test_react-navigation.js View on Github external
/**
 * StackRouter
 */

const stackRouter = StackRouter(innerRouteConfig);
const stackNavigateAction = {
  type: "Navigation/NAVIGATE",
  routeName: "Test3",
};
stackRouter.getStateForAction(stackNavigateAction, null);

/**
 * TabRouter
 */

const tabRouter = TabRouter(innerRouteConfig);
const tabNavigateAction = {
  type: "Navigation/NAVIGATE",
  routeName: "Test1",
};
tabRouter.getStateForAction(tabNavigateAction, null);

const fakeNavigateAction = {
  fake: "Navigation/NAVIGATE",
  blah: "Test1",
};
// $ExpectError not a valid action!
tabRouter.getStateForAction(fakeNavigateAction, null);
github Cyphexl / WePeiyang-RN / app / app.tsx View on Github external
* Welcome to the main entry point of the app.
 *
 */

import "./i18n"
import * as React from "react"
import { Provider } from "react-redux"
import { AppRegistry, DeviceEventEmitter, StatusBar, View, ViewStyle } from "react-native"
import { RootNavigator } from "./navigation/root-navigator"
import { createAppContainer } from "react-navigation"

import configureStore from "./store"
import { PersistGate } from "redux-persist/integration/react"
import Toast from "react-native-easy-toast"

const AppContainer = createAppContainer(RootNavigator)
const { persistor, store } = configureStore

interface AppState {}

/**
 * This is the root component of our app.
 */
export class App extends React.Component<{}, AppState> {
  listener
  toastRef

  componentDidMount() {
    console.disableYellowBox = true // TODO: Comment this line when preparing for a release
    this.listener = DeviceEventEmitter.addListener("showToast", inner => {
      this.toastRef.show(inner)
    })
github l3wi / iotaMobile / app / main.js View on Github external
nullify = nextAppState => {
    console.log("App changed to: ", nextAppState);
    if (nextAppState === "inactive") {
      // Writing it 'null'
      this.setState({ pwd: stringToU8("000000000000000000000000") });
      // Removing it's refs do the GC can clean it
      delete this.state.pwd;
      // Construct a reset action for the naviggator
      const resetAction = NavigationActions.reset({
        index: 0,
        actions: [
          NavigationActions.navigate({
            routeName: "Initial"
          })
        ]
      });
      this.props.navigation.dispatch(resetAction);
      console.log("Key Cleaned & Rerouted to login");
    }
  };
github mengwangk / myInvestor / myInvestor-app / myInvestor / App / Redux / ScreenTrackingMiddleware.js View on Github external
const screenTracking = ({ getState }) => next => action => {
  if (
    action.type !== NavigationActions.NAVIGATE &&
    action.type !== NavigationActions.BACK
  ) {
    return next(action);
  }

  const currentScreen = getCurrentRouteName(getState().nav);
  const result = next(action);
  const nextScreen = getCurrentRouteName(getState().nav);
  if (nextScreen !== currentScreen) {
    try {
      if (__DEV__ && console.tron) {
        console.tron.log(`NAVIGATING ${currentScreen} to ${nextScreen}`);
      }
      // Example: Analytics.trackEvent('user_navigation', {currentScreen, nextScreen})
    } catch (e) {
      console.tron.log(e);
github textileio / photos / App / Redux / ScreenTrackingMiddleware.js View on Github external
const screenTracking = ({ getState }) => next => (action) => {
  if (
    action.type !== NavigationActions.NAVIGATE &&
    action.type !== NavigationActions.BACK
  ) {
    return next(action)
  }

  const currentScreen = getCurrentRouteName(getState().nav)
  const result = next(action)
  const nextScreen = getCurrentRouteName(getState().nav)
  if (nextScreen !== currentScreen) {
    try {
      console.tron.log(`NAVIGATING ${currentScreen} to ${nextScreen}`)
      // Example: Analytics.trackEvent('user_navigation', {currentScreen, nextScreen})
    } catch (e) {
      console.tron.log(e)
    }
  }
github calebnance / expo-netflix / src / navigation / Stack.js View on Github external
import { createAppContainer, createStackNavigator } from 'react-navigation';

// grab screens
import ModalCastConnect from '../screens/ModalCastConnect';
import ModalAddProfile from '../screens/ModalAddProfile';
import ModalManageProfiles from '../screens/ModalManageProfiles';
import ModalVideo from '../screens/ModalVideo';
import ModalWebView from '../screens/ModalWebView';

// grab tabbed stacks
import TabNavigator from './TabNavigator';

// grab modal routes (dynamic transitions)
import ModalRoutes from './ModalRoutes';

const StackNavigator = createStackNavigator(
  {
    Main: {
      screen: TabNavigator
    },

    // Modals
    // /////////////////////////////////////////////////////////////////////////
    ModalCastConnect: {
      screen: ModalCastConnect,
      navigationOptions: {
        gesturesEnabled: false
      }
    },
    ModalAddProfile: {
      screen: ModalAddProfile,
      navigationOptions: {
github DaiYz / NetEaseCloudMusic / application / navigator.config.js View on Github external
}
      >
        <SvgIcon path={iconPath.voice} size={24} fill={['#fff']} />
      </TouchableOpacity>

    )
  }
}

const ExtraViews = { ...Views, MainTabBar }
delete ExtraViews.Find
delete ExtraViews.Video
delete ExtraViews.Mine
delete ExtraViews.Friends
delete ExtraViews.Account
const AppNavigator = createStackNavigator({ ...ExtraViews }, { ...STACKNAVIGATOR_DEFAULT_OPTIONS, initialRouteName: 'MainTabBar' })

const IncludeModalContainerNavigator = createStackNavigator({
  Base: { screen: AppNavigator }
  /* add modal screen */
}, { ...MODAL_DEFAULT_OPTIONS })

const Base = createSwitchNavigator({
  Load: ExtraViews.Loading,
  App: IncludeModalContainerNavigator,
  Auth: ExtraViews.Login
}, { initialRouteName: 'Load' })

const AppContainer = createAppContainer(Base)

export default AppContainer
github Rice4Gua / ReactNative-Hupu / screens / TopicListScreen.js View on Github external
{/*</Left>*/
}
{/*<Right>*/
}
{/*<Text>评论{e.replies}个</Text>*/
}
{/*</Right>*/
}
{/*</Footer>*/
}
{/*</Body>*/
}
{/*</ListItem>*/
}

const TopicListStack = StackNavigator({
        List: {screen: TopicListScreen},
        Details: {screen: TopicDetailScreen},
        Comments: {screen: TopicCommentsScreen},
    },
    {
        initialRouteName: 'List',
        /* The header config from HomeScreen is now here */
        navigationOptions: {
            headerStyle: {
                backgroundColor: '#32CD32',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
            drawerLockMode: Platform.OS === 'ios' ? 'locked-closed' : 'unlocked'
github wuyanwuyan / react_native_app_start_kit / src / RootView.js View on Github external
//             headerTintColor: '#fff'
//         }
//     }
// );

// const DrawerNav = DrawerNavigator({
//     DrawerNav: {
//         screen: DrawHome
//     }
// }, {
//     drawerWidth: 300,
//     contentComponent: (props) => <DrawerContainer {...props} />
// })


const App = StackNavigator(
    {
        Splash: {screen: Splash},
        Home: {
            screen: Tab,
        },
        LoginRegister: {
            screen: LoginRegister
        },
        ExchangeDetail: {
            screen: ExchangeDetail
        },
        WebViewPage: {
            screen: WebViewPage
        },
        WebViewFullScreen: {
            screen: WebViewFullScreen
github xiaogliu / react-native-complete-demo / src / config / route.js View on Github external
const StackModalNavigator = (routeConfigs, navigatorConfig) => {
  const CardStackNavigator = StackNavigator(routeConfigs, navigatorConfig);
  const modalRouteConfig = {};
  const routeNames = Object.keys(routeConfigs);

  for (let i = 0; i < routeNames.length; i++) {
    modalRouteConfig[`${routeNames[i]}Modal`] = routeConfigs[routeNames[i]];
  }

  const ModalStackNavigator = StackNavigator(
    {
      CardStackNavigator: { screen: CardStackNavigator },
      ...modalRouteConfig,
    },
    {
      // 如果页面进入方式为 modal,需要自定义 header(默认 header 样式失效,都叠在一块了)
      mode: 'modal',
      headerMode: 'none',
    },
  );

  return ModalStackNavigator;
};