Navigation in react-native

Question

This's the homepage

What I want is when i click on the clock icon at the BottomTabNavigator, i have a new page with the features below:

• The Tab navigator will be hidden
• A new header

• possibility to go back (go to the homepage)

  I have already fixed the two first point... The third one makes me confused!

Is there someone who can help me ?

"dependencies": {
    "expo": "^31.0.2",
    "react": "16.5.0",
    "react-elements": "^1.3.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
    "react-native-elements": "^0.19.1",
    "react-native-snap-carousel": "^3.7.5",
    "react-native-vector-icons": "^6.1.0",
    "react-navigation": "^3.0.0"
  },

**CODE : **

//Differents Stack Navigators
const AppStackNavigator = createAppContainer(createStackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      header: < Head / >
    }
  },
  Search: {
    screen: Search,
    navigationOptions: {
      title: "Rechercher",
      headerStyle: {
        backgroundColor: '#00aced'
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      }
    }
  }
}));

const HoraireStackNAvigator = createAppContainer(createStackNavigator({
  Horaire: {
    screen: Horaires,
    navigationOptions: {
      title: "Horaires"
    }
  }
}))

const PaimentStackNAvigator = createAppContainer(createStackNavigator({
  Horaire: {
    screen: Paiement
  }
}))


//The Principle TabNavigator
const TabContainer = createBottomTabNavigator({
  Home: {
    screen: AppStackNavigator,
  },
  Paiement: {
    screen: PaimentStackNAvigator,
  },
  Horaires: {
    screen: HoraireStackNAvigator,
    navigationOptions: {
      tabBarVisible: false
    }
  }
}, {
  initialRouteName: 'Home',
  order: ['Paiement', 'Horaires', 'Home', 'Proximite', 'Settings'],

  //Default Options for the bottom Tab
  defaultNavigationOptions: ({
    navigation
  }) => ({
    tabBarIcon: ({
      focused,
      horizontal,
      tintColor
    }) => {
      const {
        routeName
      } = navigation.state;
      let iconName;
      if (routeName === 'Home') {
        iconName = `ios-home${focused ? '' : ''}`;
      } else if (routeName === 'Settings') {
        iconName = `ios-settings${focused ? '' : ''}`;
      } else if (routeName === 'Horaires') {
        iconName = `ios-clock${focused ? '' : ''}`;
      } else if (routeName === 'Proximite') {
        iconName = `ios-locate${focused ? '' : ''}`;
      } else if (routeName === 'Paiement') {
        iconName = `ios-cart${focused ? '' : ''}`;
      }
      return <Ionicons name = {
        iconName
      }
      size = {
        horizontal ? 20 : 35
      }
      color = {
        tintColor
      }
      />;
    }
  }),
  tabBarOptions: {
    activeTintColor: 'tomato',
    inactiveTintColor: 'gray',
    tabStyle: {
      backgroundColor: '#000'
    },
    showLabel: false,
    showIcon: true
  }
})

export default AppTabNavigator = createAppContainer(TabContainer);

Answer 1

React navigation stack provide default go back option its usually based on your stack. close active screen and move back in the stack using

this.props.navigate("goBack")

this.props.navigate.pop("HomeScreen")

We can also push or navigate to HomeScreen by using

this.props.navigate.navigate("HomeScreen")

this.props.navigate.push("HomeScreen")