How to use @react-navigation/core - 10 common examples

To help you get started, we’ve selected a few @react-navigation/core 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 react-navigation / web / src / handleServerRequest.js View on Github external
// Get initial action from the URL
  const navigationAction =
    Router.getActionForPathAndParams(path, query) || NavigationActions.init();

  // Get state from reducer
  const navigationState = Router.getStateForAction(navigationAction);

  const actionSubscribers = new Set();

  // Prepare top-level navigation prop
  let navigation = null;
  function getCurrentNavigation() {
    return navigation;
  }

  navigation = getNavigation(
    Router,
    navigationState,
    () => {},
    actionSubscribers,
    () => ({}),
    getCurrentNavigation
  );

  // Get title from active screen options
  const activeKey = navigationState.routes[navigationState.index].key;
  const activeChildNavigation = navigation.getChildNavigation(activeKey);
  const options = Router.getScreenOptions(activeChildNavigation);
  const title = options.title || options.headerTitle;

  return { navigation, title, options };
}
github react-navigation / native / src / createAppContainer.js View on Github external
constructor(props) {
      super(props);

      validateProps(props);

      this._initialAction = NavigationActions.init();

      if (
        this._isStateful() &&
        BackHandler &&
        typeof BackHandler.addEventListener === 'function'
      ) {
        this.subs = BackHandler.addEventListener('hardwareBackPress', () => {
          if (!this._isMounted) {
            this.subs && this.subs.remove();
          } else {
            // dispatch returns true if the action results in a state change,
            // and false otherwise. This maps well to what BackHandler expects
            // from a callback -- true if handled, false if not handled
            return this.dispatch(NavigationActions.back());
          }
        });
github react-navigation / web / src / handleServerRequest.js View on Github external
export default function handleServerRequest(
  Router,
  pathWithLeadingSlash,
  query
) {
  const path = pathWithLeadingSlash.slice(1);

  // Get initial action from the URL
  const navigationAction =
    Router.getActionForPathAndParams(path, query) || NavigationActions.init();

  // Get state from reducer
  const navigationState = Router.getStateForAction(navigationAction);

  const actionSubscribers = new Set();

  // Prepare top-level navigation prop
  let navigation = null;
  function getCurrentNavigation() {
    return navigation;
  }

  navigation = getNavigation(
    Router,
    navigationState,
    () => {},
github react-navigation / redux-helpers / src / reducer.js View on Github external
// @flow

import type { NavigationAction, NavigationState } from '@react-navigation/core';
import type { Reducer } from 'redux';
import type { Navigator, ReducerState } from './types'

import { NavigationActions } from '@react-navigation/core';

const initAction = NavigationActions.init();

function createNavigationReducer(navigator: Navigator): Reducer<*, *> {
  const initialState = navigator.router.getStateForAction(initAction, null);
  return (
    state: ReducerState = initialState,
    action: NavigationAction,
  ): ReducerState => {
    return navigator.router.getStateForAction(action, state) || state;
  };
};

export {
  createNavigationReducer,
  initAction,
};
github kmagiera / react-native-screens / createNativeStackNavigator.js View on Github external
function createStackNavigator(routeConfigMap, stackConfig = {}) {
  const router = StackRouter(routeConfigMap, stackConfig);

  // Create a navigator with StackView as the view
  let Navigator = createNavigator(StackView, router, stackConfig);
  // if (!stackConfig.disableKeyboardHandling) {
  //   Navigator = createKeyboardAwareNavigator(Navigator, stackConfig);
  // }

  return Navigator;
}
github keybase / client / shared / settings / routes.desktop.tsx View on Github external
const Settings = require('./').default
    return (
      <Kb.Box2 direction="horizontal" fullHeight={true} fullWidth={true}>
        <Settings routeSelected={descriptor.state.routeName}>
          <SceneView
            navigation={childNav}
            component={descriptor.getComponent()}
            screenProps={this.props.screenProps || noScreenProps}
          />
        </Settings>
      </Kb.Box2>
    )
  }
}
const SettingsSubNavigator = createNavigator(
  SettingsSubNav,
  StackRouter(Shim.shim(settingsSubRoutes), {initialRouteName: Constants.accountTab}),
  {}
)

SettingsSubNavigator.navigationOptions = {
  title: 'Settings',
}

export const newRoutes = {
  // MUST use screen and not getScreen for subnavs!
  settingsRoot: {screen: SettingsSubNavigator},
}
export const newModalRoutes = {
  [Constants.logOutTab]: {getScreen: (): typeof LogOutTab => require('./logout/container').default},
  // TODO connect broken
github keybase / client / shared / router-v2 / router.desktop.js View on Github external
return (
      <Kb.Box2 direction="horizontal" fullHeight={true} fullWidth={true}>
        <TabBar selectedTab={selectedTab} />
        <Kb.Box2
          direction={direction}
          fullHeight={true}
          style={selectedTab ? styles.contentArea : styles.contentAreaLogin}
        >
          {scene}
          <Header options={descriptor.options} onPop={() => childNav.pop()} allowBack={index !== 0} />
        </Kb.Box2>
      </Kb.Box2>
    )
  }
}
const MainNavigator = createNavigator(
  AppView,
  StackRouter(Shim.shim(routes), {initialRouteName: 'tabs.peopleTab'}),
  {}
)

class ModalView extends React.PureComponent<any> {
  render() {
    const navigation = this.props.navigation
    const index = navigation.state.index
    const activeKey = navigation.state.routes[index].key
    const descriptor = this.props.descriptors[activeKey]
    const childNav = descriptor.navigation

    // We render the app below us
    const appKey = this.props.navigation.state.routes[0].key
    const appNav = this.props.navigation.getChildNavigation(appKey)
github kmagiera / react-native-screens / Example / nativeNavigation / createStackNavigator.js View on Github external
function createStackNavigator(routeConfigMap, stackConfig = {}) {
  const router = StackRouter(routeConfigMap, stackConfig);

  // Create a navigator with StackView as the view
  let Navigator = createNavigator(StackView, router, stackConfig);
  if (!stackConfig.disableKeyboardHandling) {
    Navigator = createKeyboardAwareNavigator(Navigator, stackConfig);
  }

  return Navigator;
}
github kmagiera / react-native-screens / createNativeStackNavigator.js View on Github external
function createStackNavigator(routeConfigMap, stackConfig = {}) {
  const router = StackRouter(routeConfigMap, stackConfig);

  // Create a navigator with StackView as the view
  let Navigator = createNavigator(StackView, router, stackConfig);
  // if (!stackConfig.disableKeyboardHandling) {
  //   Navigator = createKeyboardAwareNavigator(Navigator, stackConfig);
  // }

  return Navigator;
}
github keybase / client / shared / settings / routes.desktop.tsx View on Github external
return (
      <Kb.Box2 direction="horizontal" fullHeight={true} fullWidth={true}>
        <Settings routeSelected={descriptor.state.routeName}>
          <SceneView
            navigation={childNav}
            component={descriptor.getComponent()}
            screenProps={this.props.screenProps || noScreenProps}
          />
        </Settings>
      </Kb.Box2>
    )
  }
}
const SettingsSubNavigator = createNavigator(
  SettingsSubNav,
  StackRouter(Shim.shim(settingsSubRoutes), {initialRouteName: Constants.accountTab}),
  {}
)

SettingsSubNavigator.navigationOptions = {
  title: 'Settings',
}

export const newRoutes = {
  // MUST use screen and not getScreen for subnavs!
  settingsRoot: {screen: SettingsSubNavigator},
}
export const newModalRoutes = {
  [Constants.logOutTab]: {getScreen: (): typeof LogOutTab => require('./logout/container').default},
  // TODO connect broken
  changePassword: {getScreen: (): typeof ChangePassword => require('./password/container').default},
  deleteConfirm: {getScreen: (): typeof DeleteConfirm => require('./delete-confirm/container').default},