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

// 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 };
}

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());
          }
        });

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,
    () => {},

// @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,
};

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;
}

const Settings = require('./').default
    return (
      
        
          
        
      
    )
  }
}
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

return (
      
        
        
          {scene}
          <header> childNav.pop()} allowBack={index !== 0} /&gt;
        
      
    )
  }
}
const MainNavigator = createNavigator(
  AppView,
  StackRouter(Shim.shim(routes), {initialRouteName: 'tabs.peopleTab'}),
  {}
)

class ModalView extends React.PureComponent {
  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)</header>

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;
}

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;
}

return (
      
        
          
        
      
    )
  }
}
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},