I'm trying to get the bottomTabNavigator to show on all screens. This is how I have mine set up, I don't quite understand how react navigation works just yet but based on what I've read it seems like the bottomTabNavigator should be the top level component with stack navigators added to it, I'm just not sure how to do that.
AppNavigator.js
export default createAppContainer(
createSwitchNavigator({
Main: MainTabNavigator,
Landing: LandingScreen,
Menu: MenuNavigator
})
);
MainTabNavigator.js
...
const tabNavigator = createBottomTabNavigator({
HomeStack,
CalendarStack,
BoardStack,
MomentsStack
});
tabNavigator.path = '';
export default tabNavigator;
MenuNavigator.js
const MenuNavigator= createStackNavigator({
Settings: { screen: SettingsScreen },
Contact: {screen: ContactScreen},
Faq: {screen: FaqScreen},
Help: {screen: HelpScreen}
});
export default MenuNavigator;
just add path in createBottomTabNavigator by using createStackNavigator .
for Example I have to move to settings and contact from Home navigation
const tabNavigator = createBottomTabNavigator({
Home:createStackNavigator({
HomeStack,
SettingsScreen,
ContactScreen,
}),
CalendarStack,
BoardStack,
MomentsStack
});
if you want to have bottomtabs in all screen in your app you should create like this
const tabNavigator = createBottomTabNavigator({
HomeStack,
CalendarStack,
BoardStack,
MomentsStack
});
and
export default createAppContainer(
createSwitchNavigator({
Main: tabNavigator ,
,
})
);
Note - Tab navigator will be available only on those screens which are
defined under tabNavigator stack. So you would have to maintain your
stack in a way that the screens in which you want to show the tab
navigator must be in the tab navigator stack.
Your main tab screen,include this navigationoption,navigationOptions:{tabBarVisible:true}
const Tabs=createBottomTabNavigator({
myorder:{screen:MyOrderScreens,
navigationOptions:{
tabBarLable:'Myorder',
tabBarVisible:true,
tabBarIcon:({navigation})=>(
<Image source={require('./images/orders_1.png')} style={{width:30,height:30}}/>
)
}
},
Related
// AppContainer.js
const AuthNavigator = createStackNavigator(...code);
const DrawerNavigator = createDrawerNavigator(
{
MyAccount: MyAccountScreen,
Home: HomeScreen,
}
);
const AppNavigator = createStackNavigator(
{
Home: HomeScreen,
MyAccount: MyAccountScreen,
}
);
const AppContainer = createAppContainer(
createSwitchNavigator(
{
AuthNavigator,
AppNavigator,
DrawerNavigator,
},
{
initialRouteName: AuthNavigator,
}
)
);
// HomeScreen.js I call:
onPress={() =>
this.props.navigation.dispatch(DrawerActions.openDrawer())
}
It opens the modal, but always goes automatically to MyAccountScreen without touch anything. The expected behaviour it's only open the modal.
Yes, which is actually correct. But you have some flows in understanding how a DrawerNavigator should work. You cannot open the drawer if you're not on the Drawer.
I see that you have HomeScreen defined in 2 Navigators. And I have a feeling that you want to be able to navigate from Home to/from MyAccount using the DrawerNavigator, which means that both those routes have to be inside the DrawerNavigator and you want the HomeScreen to be the first screen that is visible by default.
const DrawerNavigator = createDrawerNavigator(
{
Home: HomeScreen,
MyAccount: MyAccountScreen,
}
);
Which you kind of already have. The misconception that you have is that for your current routes, you don't need the AppNavigator, you could simply rename the above one as AppNavigator and your navigation configuration should look something like this:
const AppNavigator = createDrawerNavigator(
{
Home: HomeScreen,
MyAccount: MyAccountScreen,
}
);
const AppContainer = createAppContainer(
createSwitchNavigator(
{
AuthNavigator,
AppNavigator,
DrawerNavigator,
},
{
initialRouteName: AuthNavigator,
}
)
);
And that's it. Now when you navigate to AppNavigator, the first displayed route will be Home and opening the Drawer will just display the Drawer and won't automatically navigate you to MyAccountScreen.
My BottomTabNavigator is working as expected. The problem is that I would like to initially render a page that is outside of the navigator tabs. How could I accomplish this?
import Loading from "./components/Loading.js";
import Profile from "./components/Profile.js";
import History from "./components/History.js";
import Main from "./components/Main.js";
const TabNavigator = createBottomTabNavigator({
Profile: {screen: Profile},
Main: {screen: Locatione},
History: {screen: History},
},
{
initialRouteName: "Loading"
});
export default createAppContainer(TabNavigator);
Before, I was using createStackNavigator, which was working pretty well. Is there any way that I could combine both CreateBottomStackNavigator and createStackNavigator?
const AppNavigator = createStackNavigator(
{
Auth: Auth,
Loading: Loading,
Main:Main,
Locatione:Locatione,
Map: Map,
Contactos: Contactos
},
{
initialRouteName: "Loading"
}
);
const AppContainer = createAppContainer(AppNavigator);
export default function App() {
return <AppContainer />;
}
Yes, you have to add that screen in an navigationStack and name it the inital page, and add the navigation stack to bottomTab navigator.
here im adding the home scren to app stack navigator and this is the inital screen i want to render.
const AppStack = createStackNavigator(
{
HomeScreen: {
screen: Home
},
AirportMeeting:{
screen:AirportMeeting
}
},
{
initialRouteName:"HomeScreen",
}
)
now im adding that appstack , i.e the stack navigator as a tab in the bottomtab navigator by writing Home:AppStack and my notifications and settingscreen are just screens, i.e class componenets
const TabNavigator = createBottomTabNavigator({
Home: AppStack,
Notification:Notifications,
Account: SettingsScreen,
})
and finally im making my tabnavigator as my appcontainer. hence it works
const navigation = createAppContainer(
TabNavigator
);
so similarly you can try for the loadingscreen by adding in the navigation stack and then adding that stack in the bottomTabNavigator nad creating a container of bottomTabNavigator.
Hope it helps. feel free for doubts
Yes, you can do that, what you basically need to is, create a stack navigator as your app container and inside that put bottom tab navigator. Like,
Something like this,
const myTabNavigator = createBottomTabNavigator(
{
Home: { screen: YOUR_HOME },
},
{
contentComponent: SideMenu,
drawerWidth: Dimensions.get('window').width * 0.75
}
)
const RootStack = createStackNavigator({
SplashScreen: {
screen: SplashScreen,
navigationOptions: {
header: null,
},
},
SomeName: {
screen: myTabNavigator,
navigationOptions: {
header: null,
},
},
})
You can add any screen you want to show outside bottom tab navigator.
in the tab bar I used two tabs for each tab as created separate navigator
here is my code:
const HomeStack = createStackNavigator({
Home: HomeScreen,
Details: DetailsScreen,
});
const SettingsStack = createStackNavigator({
Settings: SettingsScreen,
Profile: ProfileScreen,
});
const TabNavigator = createBottomTabNavigator(
{
Home: HomeStack,
Settings: SettingsStack,
}
);
We start on the HomeScreen and navigate to DetailsScreen. Then we use the tab bar to switch to the SettingsScreen and navigate to ProfileScreen. After this sequence of operations is done, all 4 of the screens are mounted! If I use the tab bar to switch back to the HomeStack I was displaying the Home screen but I want the HomeScreen to need to display instead of the detail screen.
Any suggestions much helpful, thanks in advance.
This is actually surprisingly tricky with react-navigation.
One way to achieve this globally is by using the tabBarOnPress callback to reset the stack every time a tab is changed:
import { StackActions, NavigationActions } from 'react-navigation';
const TabNavigator = createBottomTabNavigator({
Home: HomeStack,
Settings: SettingsStack,
}, {
defaultNavigationOptions: {
tabBarOnPress: ({ navigation, defaultHandler }) => {
defaultHandler(); // Switch tab
if (navigation.state.index > 0) { // In case the stack is not positioned at the first screen
const resetAction = StackActions.reset({ // Reset the stack
index: 0,
actions: [
NavigationActions.navigate({ routeName: navigation.state.routes[0].routeName })
],
});
navigation.dispatch(resetAction);
}
},
},
});
Whenever the user switches tab, the new stack will move to the first index in case it was not already.
Main navigator in app is tab-navigator, in it i have a drawer-navigator and in drawer i have stack-navigator because my home screen wants tab,drawer and stack navigators
but i have another screen that's no need more stack and tab in it !!
where should i place the screen to hide both stack and tab?
const stackNavigator = createStackNavigator({
home: { screen: HomeScreen },
...
});
const drawerNavigator = createDrawerNavigator({
home: { screen: stackNavigator },
...
)}
const tabNavigator = createBottomTabNavigator({
home: { screen: drawerNavigator },
...
}),
I think you should be able to dynamically hide the bottom navigator as well as the header bar by defining headerMode: 'none' and tabBarVisible: false in the screens' navigationOptions object.
Find out more by reading the documentation for StackNavigator and BottomTabNavigator.
I have a switch navigator when ı pass the login page to on my home ı got a drawer and bottom tab navigator if ı don't click bottom tabs my drawer doesn't work and send an error
const AppTabNavigator = createBottomTabNavigator({
HomeScreen: Home,
SettingsScreen: setting
})
const Draw = createDrawerNavigator({
Home: Home,
Draw: AppTabNavigator
})
const Auth = createStackNavigator({
Login: login,
Home: Home,
Settings: setting,
})
const SwitchNavigator = createSwitchNavigator({
Auth: Auth,
App: Draw,
})
const AppContainer = createAppContainer(SwitchNavigator)
you should follow this tutorial for the correct react-navigation hierarchy.
https://medium.com/async-la/react-navigation-stacks-tabs-and-drawers-oh-my-92edd606e4db