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.
Related
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 my React Native app, there is a drawer navigator nested inside a stack navigator. I want to hide stack navigator header inside all drawer navigator screens, but visible in other screens.( Therefore, setting headerMode: none for all screens is not a solution )
This is what I tried, but is not working.
DrawerNav: {
screen: DrawerNavigator,
navigationOptions: {
headerMode:'none'
}
}
Pass header: null as navigationOtpions as shown below.
const DrawerNavigator = createDrawerNavigator(
{
Home: {
screen: YourScreen,
},
},
{
navigationOptions: {
header: null,
},
},
);
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}}/>
)
}
},
I always use react-native-router-flux for navigation, but on this project I need to use react-navigation and I got some troubles with it. I need to implement drawer and tabBar inside stack navigator.
Problems:
I use header component from native-base library but i can't open
drawer.
How to use my own customized component for drawer and tabBar?
Maybe I need to chage structure. I will consider any recommendations how to improve structure.
I used version 3 of react-navigation.
My code:
const AppStackNavigator = createStackNavigator({
loginFlow: {
screen: createStackNavigator({
intro: { screen: Intro },
login: { screen: Login },
registration: { screen: Registration },
}),
navigationOptions: {
header: null
}
},
mainFlow: {
screen: createStackNavigator({
MyDrawer: createDrawerNavigator({
Dashboard: {
screen: Home,
},
first: {
screen: first,
},
second: {
screen: second
},
third: {
screen: third
},
last: {
screen: last
}
}),
// settings: { screen: SettingsScreen },
someTab: {
screen: createBottomTabNavigator({
main: { screen: Home },
firsrTab: { screen: Screen1 },
secondTab: { screen: Screen2 },
thirdTab: { screen: Screen3 },
nextTab: { screen: Screen4 }
}),
navigationOptions: {
header: null
},
}
}),
navigationOptions: {
header: null
}
}
});
const AppContainer = createAppContainer(AppStackNavigator);
import React from 'react';
import { Header, Left, Icon, Right } from 'native-base';
const CustomHeader = (props) => {
return(
<Header>
<Left>
<Icon
name='menu'
onPress={() => {this.props.navigation.openDrawer()}}
/>
</Left>
</Header>
)
}
export { CustomHeader }
You might wanna consider the SwitchNavigator for the authentication flow instead of a Stack at the top as it replaces the routes so that you can never navigate back to the login/signup/splash once you get into the application and for accessing Tabs and Drawer inside stack/switch, you can wrap the Drawer inside your top level navigator and tab inside the drawer.
So you root navigation would look like this.
export default RootNavigation = createSwitchNavigator({
LoginScreen: {screen: LoginContainer},
Application: {screen: AppDrawer},
});
Your drawer navigator should be like the following:
const AppDrawer = createDrawerNavigator({
ApplicationTab: {screen: TabBar},
... other screen that you might want to use in drawer navigation.
}, {
contentComponent : (props) => <MyCustomDrawer {...props} />
});
and, Tab Navigator would be,
const TabBar = createBottomTabNavigator({
TabScreen1: {screen: Tab1},
... other tabs...
}, {
tabBarComponent : (props) => <MyTabBar {...props} />
});
If you put each of those navigators in single file then please do declare Tab before Drawer and Drawer before the Switch, else it would give errors.
In my experience, customising drawer navigator is very simple and fruitful but customising tab is not, there aren't proper API doc for the same and community answers are also somewhat misleading.
BUT, with normal use cases and for most of the vivid ones too, you can do your job without needing to override the default one as it is already highly operable and customisable in terms of icons, materialism and each tab exposes its on onPress that can also be easily overriden.
and as you as the drawer is not getting operated from/via the header, then can you please ensure that the navigation prop you are using to operate the drawer open close or toggle action is the one given by drawer ?
Problem: i have a DrawerNavigator that contains a TabNavigator which contains a StackNavigator, what i needed is the regular three bar icon in the header to open the Drawer instead of swiping right
My Solution: put the TabNavigator that contains a StackNavigator inside a StackNavigator and put the StackNavigator inside the DrawerNavigator
Problem with my solution: when i navigate inside the TabNavigator i get double headers (it's normal because i have 2 StackNavigators) and i can only hide the back arrow header, i always get left with the 3 tabs icon header.
so how please how can i hide the parent header which contains TabNavigator?
//the drawer navigator
const DNav = DrawerNavigator({
SportWall: {
screen: SportWall
}
})
//the stack that contains the tab navigator
export default StackNavigator({
SportWall: {
//just to show the header with the 3 bars icon
screen: SportWall
}
render() {
return (
<Tabs/>
)
}
//the tab navigator
const Tabs = TabNavigator({
AllPubs: {
screen: AllPubs
},
FriendsPubs: {
screen: FriendsPubs
},
});
//the stack inside each tab
export default StackNavigator({
AllPubs: {
screen: AllPubs,
},
Pub: {
screen: Pub, navigationOptions: {tabBarVisible: false}
},...
Hi you can use your StackNavigator like this example and use the headerMode: 'screen':
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen }
},{
headerMode: 'screen'
}
);
See here for more information.
you shouldn't use a StackNavigator just to show the header that shows the drawer.
You could set a custom header with the hamburger button at left that fires the drawer onPress for all the screens that need it:
<Button
onPress={() => this.props.navigation.navigate('DrawerOpen')}
title="Open drawer"
/>
don't forget to add headerMode: "none" to the Navigator options