CODEWITHSUNDEEP
javascriptreact-nativetabs
Red Baron
Red Baron

Reputation: 7652

How to navigate to a page in react native that is not in the tab navigator?

I have this in my react-native code:

const MainNavigator = createBottomTabNavigator({
  Home: Home,
  "Exercise List": ExerciseList,
  Exercise: Exercise,
  "Current Workout": CurrentWorkout,
})

but I only want to navigate to the Exercise tab when I click to it via the exerciseList page like so:

onPress={() => navigate("Exercise", { name: item.name })}

and I don't want it to appear in the navigation bar at the bottom. But if I remove it from MainNavigator above then it doesn't work when I click the onPress above. Is there a way to Navigate to the component without it being in the tab nav?

Upvotes: 1

Views: 1552

Answers (3)

Vishal Dhanotiya
Vishal Dhanotiya

Reputation: 2638

You need to make some change in app.js. add createBottomTabNavigator inside createStackNavigator. Add those component into stacknavigator in which you do not want to add into bottom tab navigator. In createBottomTabNavigator add those component which you want to show in tab bar

Please check following code

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  ScrollView,
  Dimensions
} from "react-native";
import { createStackNavigator, createBottomTabNavigator } from "react-navigation";
import LoginScreen from "./Screens/LoginScreen";
export default class App extends Component {
  render() {
    return <StackNav />;
  }
}
const StackNav = createStackNavigator(
  {
    TabNavigator: {
      screen: AppTabNavigator,
      navigationOptions: {
        headerMode: "none",
        header: null
      }
    },
    First: {
      screen: First,
      navigationOptions: {
        headerMode: "none",
        header: null
      }
    },
    Second: {
      screen: Second,
      navigationOptions: {
        headerMode: "none",
        header: null
      }
    }
  },
  {
    initialRouteName: "TabNavigator"
  }
);
const AppTabNavigator = createBottomTabNavigator({
  Login: {
    screen: LoginScreen
  }
});

Upvotes: 2

Iman Salehi
Iman Salehi

Reputation: 956

here is two method of of call other components which doesn't contains in tabNavigator: 

 const otherAppNavigator = createStackNavigator({//all of this are not in TabNavigator
dashboard: {
    screen: Dashboard,
},

userProfile: {
    screen: UserProfile
},

onGoingPickup: {
    screen: OnGoingPickup
},
 });

    const TabNavigator = createBottomTabNavigator({
    home: otherAppNavigator,//<<<<<<<<<<
    about:foo,

       }
    )

const MainNavigator = createSwitchNavigator({
    firstPage: {//it's not in TabNavigator<<<<<<<<<<<<<<<<<<<<<<<<<<
        screen: Login,
    },
    verification: {//its not in TabNavigator<<<<<<<<<<<<<<<<<<<<<<<<
        screen: verification
    },
    dashboard: {
        screen: TabNavigator
    }
})

export default createAppContainer(MainNavigator); //the main navigator is which you bind in here

pay attention to the last line ....!!!!

hope to be helpful.

Upvotes: 0

Masuk Helal Anik
Masuk Helal Anik

Reputation: 2283

Add it with createSwitchNavigator. A working example is given below

const Navigation = createSwitchNavigator(
    {
        AuthLoading: AuthLoadingScreen,
        App: AppStack,
        Auth: AuthStack,
        Qr: QrPage,


    },
    {
        initialRouteName: 'AuthLoading',
  }

Here I can access to my Qr page from any where.

Upvotes: 0

Related Questions