Navigate from app.js with Stack navigator in render

Question

I use https://reactnavigation.org and I'm not understand how I navigate if the file navigate is inside app.js...

I test NavigationService, but i don't understand how work...

My code in App.js

import NavigationService from './src/utils/helpers/NavigationService';

const App = () => {

var PushNotification = require("react-native-push-notification");

  PushNotification.configure({
    onNotification: function(notification) {

        let num = 0;
        if (Platform.OS === 'ios') {
          num = notification.data.num;
        } else {
          num = notification.userInfo.num;
        }

        switch(num) {

          case 1:
            NavigationService.navigate('Scan', {a: 'a'});
            break;

          default:
            console.warn("NUMBER NOT FOUND");

        }
    }
  })

  return (
    
  );

export default App;

MainNavigation.js

const MyDrawerNavigator = createDrawerNavigator({
  Home: {
    screen: HomeScreen,
  },
  Scan: {
    screen: ScanScreen,
  },
});

export default createAppContainer(MyDrawerNavigator);

NavigationService

import { NavigationActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

export default {
  navigate,
  setTopLevelNavigator,
};

How do I navigate from the app.js file?

user_2685226 · Answer

According to documentation ,

Change your MainNavigation.js file default import from

export default createAppContainer(MyDrawerNavigator);

to

import NavigationService from './src/utils/helpers/NavigationService';

.....

export default class App extends React.Component {
  // ...

  render() {
    return (
       {
          NavigationService.setTopLevelNavigator(navigatorRef);
        }}
      />
    );
  }
}

Navigate from app.js with Stack navigator in render

1 Answers