How to implement a "goBack" Function to return to the initial navigator?

Question

This is my first post, so sorry for any errors.

I'm trying to make a series of nested navigators, starting from a Switch navigator, then going to a Drawer Navigator, that for each of it's sections, it calls a different Stack Navigator, like this:

SwitchNavigator
- DrawerNavigator
  - MapStackNavigator
    - Map Screen
  - ProfileStackNavigator
    - Profile Screen

The initial route for the Drawer Nav is the Stack Nav which calls a Map Screen. The problem is, if I go to the "Profile" Section of the drawer nav, which calls for the Stack Nav that opens the Profile Screen, I'm not beeing able to return to the Map Screen through an onPress() method inside the Navigation headerLeft Icon.

The react-native app is being developed for iOS only, and now as I don't have an iOS device to test on, neither a Mac to use a simulator, I'm currently testing it on my android smartphone.

As I've tested, it wouldn't be a problem if the app was meant to run on android, as the android has the built-in "back" button and it automatically goes back to the previous screen (which is set to the Map Screen inside the DrawerNav). But, as it is for iOS only, we actually need to display a "back" button on the top of the screen (so, inside the StackNav Header) for going back to the Map Screen.

My first guess was to use the navigation.navigate inside the onPress() to call another screen from the current profile StackNav, and that screen calls the first SwitchNav that I've Created to load things up, but it won't work, as it acts like a "navigation loop", and the const SwitchNavigator can't be called from the Profile StackNav.
I've tried to call the StackNav that holds the MapScreen from the onPress(), so it was: click on the back button > it calls the onPress() which calls another screen > that another screen calls the StackNav holding the MapScreen, but it nests one StackNav inside the other.

My Routes.js looks like this:

import Testemapa from './src/components/Map/index';
import MyProfile from './src/components/DrawerNavigator/MyProfile';
import Icon from 'react-native-vector-icons/Ionicons';
import IconE from 'react-native-vector-icons/Entypo';


// The StackNav that holds the Map Screen
const IvesStackNavigator = createStackNavigator ({
  screenMap: Testemapa,
},
{
  defaultNavigationOptions: ({navigation})=>{
    return{
      headerRight: ( navigation.openDrawer()}
        name="md-menu" size={30} 
      />)
    };
  }
});


// What I tried to do to call the MapScreen, but it ends up nesting it inside
const wayBackSwitchNavigator = createSwitchNavigator ({
  transitionToHome: IvesStackNavigator,
});


// The StackNav that holds the Profile Screen
const myProfileStackNavigator = createStackNavigator ({
  drawer_myProfile: MyProfile,
  transitionPathHome: wayBackSwitchNavigator,
},
{
  headerBackTitleVisible: 'true',
  defaultNavigationOptions: ({navigation})=>{
    return{

      //This guy is the Back button, that's actually an Icon
      headerLeft: ( navigation.navigate('transitionPathHome')}
        name="chevron-small-left" size={30} 
      />),
    };
  },
});


// The Drawer which calls all of the stacks
const MainDrawerNavigator = createDrawerNavigator  ({
  BOOK_A_RIDE: { 
    screen: IvesStackNavigator,
      navigationOptions: () => 
          ({
              title: 'BOOK A RIDE'
          }) 
  },
  MY_EARNINGS: { 
    screen: ridesStackNavigator,
      navigationOptions: () => 
          ({
              title: 'MY EARNINGS'
          }) 
  },
  MY_PROFILE: { 
    screen: myProfileStackNavigator,
      navigationOptions: () => 
          ({
              title: 'MY PROFILE'
          }) 
  },
},
{
  initialRouteName: 'BOOK_A_RIDE',
  drawerOpenRoute:'DrawerOpen',
  drawerPosition: 'right',
  drawerBackgroundColor: 'black',
  hideStatusBar: 'true',
  overlayColor: 'red',
  edgeWidth: 100,
  contentOptions: {
    inactiveBackgroundColor: 'black',
    inactiveTintColor: '#fff',
    activeBackgroundColor: '#4d4d4d',
    activeTintColor: '#fff',
  },
  contentComponent: props =>
    
      
        
          

          
        
      
      
        
      
    
},
);


// The SwitchNav that is the first Navigator to run on the app
const firstSwitchNavigator = createSwitchNavigator(
  {
    TestDrawer: MainDrawerNavigator,
  },
  {
    initialRouteName: 'TestDrawer',
  }
);



export default createAppContainer(MySwitchNavigator);

So, when The Back button inside the MyProfileStackNavigator is pressed, It was supposed to go back to the MapScreen which is holded by the IvesStackNavigator, which is inside the mainDrawerNavigator.

I'm not allowed to let the user open the DrawerNav from the Profile Screen, so the back button is really important, as it's the only way to go back to the map.
If I try to directly call the SwitchNav or the DrawerNav by using any of them as the Screen path in MyProfileStackNavigator, I get the error that the screen that was called isn't a React component ("The component for route 'transitionToHome' must be a React component...").
If I change it to call IvesStackNavigator directly, the navigator will end up nested inside the MyProfileStackNavigator.
And, if I call the actual map page, it will display the map page inside the MyProfileStackNavigator, having all of the MyProfileStackNavigator properties (like the Back button and the absency of the button to open the drawer menu).

Any help with this would be appreciated, I'm fairly new to React-Native and it's dependencies, and I had to jump in right to coding before learning, as it is a task assigned to me by my boss, so I try to learn while producing the app.

How to implement a "goBack" Function to return to the initial navigator?

0 Answers