I have a nested stack navigator within a tab navigator like so:
const MainNavigator = createBottomTabNavigator({
BookmarksList: createStackNavigator({
BookmarkList: { screen: BookmarkList },
UpdateBookmark: { screen: UpdateForm }
}),
NewBookmark: createStackNavigator({
NewBookmark: { screen: NewBookmarkScreen }
})
});
When I set navigationOptions title text for BookmarkList, it only changes the header text, but not the tab text.
For example, I've set my BookmarkList title to My Bookmarks.
class BookmarkList extends Component {
static navigationOptions = {
title: 'My Bookmarks'
};
}
This gets reflected in the header text, but not in the tab text, which still says BookmarkList (circled in red):
How do I get both header and tab text to change to the same text?
tldr; Customising title via navigationOptions only changes header text, but not tab text in nested stack navigator within tab navigator. How to change both header and tab text?
One solution:
const BookmarksList = createStackNavigator({
BookmarkList: { screen: BookmarkList },
UpdateBookmark: { screen: UpdateForm },
});
const NewBookmark = createStackNavigator({
NewBookmark: { screen: NewBookmarkScreen },
});
const MainNavigator = createBottomTabNavigator({
BookmarksList: {
screen: BookmarksList,
navigationOptions: {
title: 'My Bookmarks',
},
},
NewBookmark: {
screen: NewBookmark,
navigationOptions: {
title: 'New Bookmarks',
},
},
});
I had two duplicate headers with the solution of #aciobanita, because I have a parent AppContainer, it is necessary to deactivate the header of the parent and then use the solution of #aciobanita, its works for me without problem
const AppNavigator = createStackNavigator(
{
MainApplication: {
screen: MainApplication,
},
},
{
headerMode: 'none'
}
);
export default createAppContainer(AppNavigator);
Child component:
const BookmarksList = createStackNavigator({
BookmarkList: { screen: BookmarkList },
UpdateBookmark: { screen: UpdateForm },
});
const NewBookmark = createStackNavigator({
NewBookmark: { screen: NewBookmarkScreen },
});
const MainNavigator = createBottomTabNavigator({
BookmarksList: {
screen: BookmarksList,
navigationOptions: {
title: 'My Bookmarks',
},
},
NewBookmark: {
screen: NewBookmark,
navigationOptions: {
title: 'New Bookmarks',
},
},
});
export default createAppContainer(MainNavigator);
Related
Below is my navigation structure.
*Drawer Navigator (
Dashboard
StackNavigator({
Login
Welcome
})
Profile
StackNavigator({
Profile
})
)*
I have a logout button on the Profile page and on click on it I want to take the user back to the login page.
Please help.
Below is my Navigation.js file
const LoginNavigator = createStackNavigator({
Login: LoginScreen,
DashboardScreen: {
screen: DashboardScreen,
},
CaptureWeightScreen: {
screen: CaptureWeightScreen,
navigationOptions: {
headerBackTitle: " ",
headerTintColor: "#000"
}
}
}, {
navigationOptions: {
drawerLabel: 'Dashboard'
}
});
const ProfileNavigator = createStackNavigator({
ProfileScreen: ProfileScreen
}, {
navigationOptions: {
drawerLabel: 'Profile'
}
});
const MainNavigator = createDrawerNavigator({
DashboardNavigator: LoginNavigator,
ProfileNavigator: ProfileNavigator,
}, {
drawerBackgroundColor: Constants.buttonColor
});
export default createAppContainer(MainNavigator)
this.props.navigation.navigate({ routeName: "Login", params: { } })
Is the answer.
Thanks
I am using react-navigation and trying to use drawer navigation only on Home Screen.
My code for navigation configuration is like below.
const WIDTH = Dimensions.get("window").width;
const DrawerConfig = {
drawerWidth: WIDTH * 0.83,
// drawerLockMode: "locked-open",
contentComponent: ({ navigation }) => {
return <SideDrawerScreen navigation={navigation} />;
}
};
const AppNavigator = createStackNavigator(
{
Login: LoginScreen,
Details: DetailsScreen,
Home: {
screen: HomeScreen,
navigationOptions: () => ({
header: null
})
}
},
{ initialRouteName: "Login", headerMode: "none" }
);
const DrawerNavigator = createDrawerNavigator(
{
AppNavigator,
Settings: {
screen: SettingsScreen
}
},
DrawerConfig
);
const AppContainer = createAppContainer(DrawerNavigator);
export default AppContainer;
I just want to enable drawer only on HomeScreen.
I was thinking to create drawer navigator on Homescreen and combine it with stack navigator, but I can't find a way and I don't know even it will work.
Is there any way to make it work??
Wrap your Home with other screens you want to use drawer as below.
const DrawerNavigator = createDrawerNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: () => ({
header: null
})
},
Settings: {
screen: SettingsScreen
}
},
DrawerConfig
);
const AppNavigator = createStackNavigator(
{
Login: LoginScreen,
Details: DetailsScreen,
Home: {
screen: DrawerNavigator,
navigationOptions: () => ({
header: null
})
}
},
{ initialRouteName: "Login", headerMode: "none" }
);
I use react-navigation version 3.x. How to make screen from tabBarNavigator invisible on TabBar?
I need to remove main screen from tabBar(it should be invisible) but TabBar must be on main screen.
My screen structure is next:
const AppStackNavigator = createStackNavigator({
loginFlow: {
screen: createStackNavigator({
intro: { screen: Intro },
login: { screen: Login },
registration: { screen: Registration }
})
},
mainFlow: {
screen: createStackNavigator({
// settings: { screen: SettingsScreen },
someTab: {
screen: createBottomTabNavigator({
main: { screen: Home },
Tab1: { screen: Tab1 },
Tab2: { screen: Tab2 },
Tab3: { screen: Tab3 },
Tab4: { screen: ChatMain }
})
}
})
}
});
Your question is worded weirdly, but I'll give you answers to both of my interpretations:
If you want so remove a screen from your tab bar, simply comment it out:
// main: { screen: Home },
If you want to have the main screen in the same stack as the rest of your tab bar, but not want it to show within the tab bar, you could nest it inside a switchNavigator:
mainFlow: {
screen: createStackNavigator({
// settings: { screen: SettingsScreen },
someSwitch: createSwitchNavigator({
main: { screen: Home },
someTab: {
screen: createBottomTabNavigator({
Tab1: { screen: Tab1 },
Tab2: { screen: Tab2 },
Tab3: { screen: Tab3 },
Tab4: { screen: ChatMain }
})
}
})
})
}
Actually I just used my own TabBar component. just need to use tabBarComponent properties.
const RootStack = MultiNavigator({
Splash: {
screen: Splash
},
Registration: {
screen: Registration
},
WelcomeScreen: {
screen: WelcomeScreen
},
HomeScreen: {
screen: HomeScreen
}
}, {
initialRouteName: "HomeScreen",
},
);
what ever i rendered as initial page , some space is coming at top side. I have to avoid it. I used header: null/none/false. But no result.Thanks in advance.
I have fixed this issue, by using headerMode: none.
const RootStack = MultiNavigator({
Splash: {
screen: Splash
},
Registration: {
screen: Registration
}
}, {
initialRouteName: "Registration",
headerMode: "none"
});
const AppTabs = TabNavigator({
Home: {
screen: FilmList,
},
FilmCinemaList: {
screen: FilmCinemaList,
path: 'cart',
},
FilmGoodsList: {
screen: FilmGoodsList,
},
FilmMe: {
screen: FilmMe,
},
})
when I click FilmCinemaList, i wanna pass a params. how to use setParams?
You can pass the params this way when rendering your AppTabs:
<AppTabs screenProps={{ FilmCinemaList: { ...yourParams } }}/>
And you can access them on FilmCinemaList by:
this.props.screenProps.FilmCinemaList
.
Through navigationOptions, what you have to do is to set the navigationOptions for the screen before pass it in the TabNavigator like the following:
FilmCinemaList.navigationOptions = {
'param1':'value1';
};
const AppTabs = TabNavigator({
Home: {
screen: FilmList,
},
FilmCinemaList: {
screen: FilmCinemaList,
path: 'cart',
},
FilmGoodsList: {
screen: FilmGoodsList,
},
FilmMe: {
screen: FilmMe,
},
})
And then you can access it
FilmCinemaList.navigationOptions.param1
When ever you need to.