How can I pass the navigator prop from react-native-navigation v2 to my splash screen via Navigation.setRoot

Question

I am trying to migrate from react-native-navigation v1 to react-native-navigation v2. I am struggling to move from

Navigation.startSingleScreenApp

to

Navigation.setRoot

When I switch from Navigation.startSingleScreenApp (v1) to Navigation.setRoot (v2), I no longer have the navigator prop that I was relying on to navigate around the application.

I have copy and pasted all relevant code below

RegisterScreens

import { Navigation } from 'react-native-navigation';
import SplashScreenScreen from './components/SplashScreen';
import { Provider } from 'react-redux';
import React from "react";
import SCREEN from './screenNames';

export default function registerScreens(store) {
  Navigation.registerComponent(
    SCREEN.SPLASH_SCREEN,
    () => props => (<Provider store={store}><SplashScreenScreen {...props} /></Provider>), () => SplashScreenScreen);

App

import { Platform } from 'react-native';
import { Navigation } from 'react-native-navigation';
import registerScreens from './registerScreens';
import { Colors, Fonts } from './themes';
import { store } from './configureStore';
import NavigationListener from './NavigationEventListener';
import configureNotification from './configureNotification';

import SCREEN from './screenNames';
import Reactotron from 'reactotron-react-native';

const navBarTranslucent = Platform.OS === 'ios';

configureNotification();

registerScreens(store);

new NavigationListener(store);

const STARTING_SCREEN = SCREEN.SPLASH_SCREEN;

Navigation.events().registerAppLaunchedListener(() => {
  Reactotron.log('5');
  Navigation.setRoot({
    root: {
      stack: {
        children: [{
          component: {
            id: STARTING_SCREEN,
            name: STARTING_SCREEN
          }
        }],
      }
    },
    layout: {
      orientation: 'portrait',
    },
  });
});

SplashScreen

import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { PersistGate } from 'redux-persist/es/integration/react';
import { navigateToFirstScreen } from '../redux/splash';
import { Colors, Fonts, Metrics } from '../themes';
import { persistor } from '../configureStore';

export class SplashScreen extends React.Component {
  navigateTo = (screen) =>
    this.props.navigator.push({
      screen,
      overrideBackPress: true,
      backButtonHidden: true,
      animated: false,
      navigatorStyle: {
        disabledBackGesture: true,
      },
    });

  render() {
    const { dispatchNavigateToFirstScreen } = this.props;
    return (
      <PersistGate
        persistor={persistor}
        onBeforeLift={() => setTimeout(() => dispatchNavigateToFirstScreen(this.navigateTo), 2000)}><View style={styles.bodyContainer}
        >
          <Text>Jono</Text>
        </View>
      </PersistGate>
    );
  }
}

const styles = StyleSheet.create({
  bodyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: Colors.splashScreen,
  },
  appTitleText: {
    fontSize: Fonts.size.splashScreenTitle,
    fontFamily: Fonts.type.extraBold,
    lineHeight: Metrics.lineHeight.appTitle,
    textAlign: 'center',
    color: Colors.textLightColor,
  },
});

SplashScreen.propTypes = {
  navigator: PropTypes.shape({
    push: PropTypes.func.isRequired,
  }).isRequired,
  dispatchNavigateToFirstScreen: PropTypes.func.isRequired,
};

const mapDispatchToProps = (dispatch) => {
  return {
    dispatchNavigateToFirstScreen: (navigateTo) =>
      dispatch(navigateToFirstScreen(navigateTo)),
  };
};

export default connect(null, mapDispatchToProps)(SplashScreen);

score 1 · Answer 1 · answered Jun 26 '19 at 08:01

I spent multiple hours trying to solve this problem so I am going to post my conclusion as an answer.

this.props.navigator is not used anymore in 2.x.
You need to use Navigation

This dude had the same problem and reached the same conclusion: https://github.com/wix/react-native-navigation/issues/3795

How can I pass the navigator prop from react-native-navigation v2 to my splash screen via Navigation.setRoot

1 Answers1