I'm using createStackNavigator inside createBottomTabNavigator from react-navigation in my app. I want to have a title on my screen. Following React Navigation's tutorial I've implemented it this way:
createBottomTabNavigator(
{
Home: createStackNavigator(
{screen: HomePage, navigationOptions: () => { title: 'Home'}}),
...
},
However, nothing is displayed in the navigation bar. I've also tried headerTitle though no avail.
What am I doing wrong?
There are 2 ways of setting navigationOptions, object or function
Object
{
screen: HomePage,
navigationOptions: { title: 'Home' }
}
Function that return an object
{
screen: HomePage,
navigationOptions: ({ navigation }) => {
return { title: 'Home' }
}
}
Your code doesn't work is due to you have error in your arrow function, you should add a bracket around the body so that it returning the object.
{ screen: HomePage, navigationOptions: () => ({ title: 'Home'}) }
navigationOptions shouldn't be a function, instead, is a JSON. So, remove the arrows and do it like this:
createBottomTabNavigator(
{
Home: createStackNavigator(
{screen: HomePage, navigationOptions: { title: 'Home'},
...
},
Related
I have a react native application which has got a stack navigator and a bottom tabs navigator. Bottom tabs navigator and stack navigator has common screens between them. Here is the structure:
const ExploreNavigator = createStackNavigator({
Explore: {
screen: ExploreScreen
},
Read: {
screen: ReadScreen
},
CreateImage: {
screen: CreateImageScreen
}
})
const TabsNavigator = createBottomTabNavigator({
ExploreTab: {
screen: ExploreNavigator,
navigationOptions: {
tabBarLabel: "Explore"
}
},
ReadTab: {
screen: ReadScreen,
navigationOptions: {
tabBarLabel: "Read"
}
}
})
Now, if I directly move to Reading screen from Bottom tab navigator and move to CreateImage screen of stack navigator, when I press the back button I come back to default screen that is explore screen?
So, what is the best approach to solve the issue? I know I can create another stack navigator and add the relevant screens. Also, if this approach is followed can I name the stack navigator screens same?
I think this doesn't need keed one screen in the bold stack and bottom tab. So I suggestion like this
const ExploreNavigator = createStackNavigator({
Tabs: {
screen: TabsNavigator
},
CreateImage: {
screen: CreateImageScreen
}
})
const TabsNavigator = createBottomTabNavigator({
Explore: {
screen: ExploreScreen,
navigationOptions: {
tabBarLabel: "Explore"
}
},
ReadTab: {
screen: ReadScreen,
navigationOptions: {
tabBarLabel: "Read"
}
}
})
i would do it like this
const ExploreNavigator = createStackNavigator({
ExplorePrimary: {
screen: ExploreScreen
},
ReadPrimary: {
screen: ReadScreen
},
CreateImagePrimary: {
screen: CreateImageScreen
}
})
const ReadNavigator = createStackNavigator({
ExplorePrimary: {
screen: ExploreScreen
},
ReadSecond: {
screen: ReadScreen
},
CreateImageSecond: {
screen: CreateImageScreen
}
})
const TabsNavigator = createBottomTabNavigator({
ExploreTab: {
screen: ExploreNavigator,
navigationOptions: {
tabBarLabel: "Explore"
}
},
ReadTab: {
screen: ReadNavigator,
navigationOptions: {
tabBarLabel: "Read"
}
}
})
I am developing a react native application.
Here i am using this way to navigate between screens, navigatiion works OK. but when i press back button from the 3rd level screen, it comes to the 1st level screen instead of 2st level screen.
how do i fix this? please help me.
const HomePageScreen = createStackNavigator({
HomeLists: {
screen: HomeScreen,
navigationOptions: {
header: null
}
},
HotAdsLists: {
screen: AdsDetailScreen,
navigationOptions: {
title: 'Hot Ads2',
}
},
DetailsScreen: {
screen: DetailsScreen,
},
});
const SearchStack = createStackNavigator({
Home:{
screen:HomePageScreen,
navigationOptions: {
header: null
}
}
},{
initialRouteName: 'Home',
headerMode: 'screen'
});
const DrawerNavigatorExample = createDrawerNavigator({
SearchStack
},{
drawerType: 'slide',
contentComponent: Page2ComponentExample,
drawerBackgroundColor: '#4eb6ce'
});
The stack is working properly
I done the stack manually and it works fine.
I am making react native expo app. And i have some problems with react navigations. I have 3 pages:
main.js -> page1.js -> page2.js
I am making navigation between this 3 pages. But when i navigate to each page it making 1 more header. So when i navigate to 3 page i have 2 headers. One header from the page2.js and second from page1.js
I want to have just only one header that is from current page. What i need to do to have this? I need to add one more page where is going to be navigation between this pages? Whatn i need to add? Help me please
Code:
// main.js createStackNavigator:
export default createStackNavigator(
{
Main: {
screen: Main,
navigationOptions: {
header: null,
},
},
Page1: {
screen: Page1,
navigationOptions: ({ navigation }) => ({
headerTitle: "Page1",
}),
},
},
{
initialRouteName: 'Main',
}
);
// Page1.js createStackNavigator:
export default createStackNavigator(
{
Page1: {
screen: Page1,
navigationOptions: {
header: null,
},
},
Page2: {
screen: Page2,
navigationOptions: ({ navigation }) => ({
headerTitle: "Text",
}),
},
},
{
initialRouteName: 'Page1',
}
);
// Page2:
export default createStackNavigator(
{
Page2: {
screen: Page2,
navigationOptions: {
header: null,
},
},
},
{
initialRouteName: 'Page2',
}
);
In your second stack navigator you can add the property headerMode: 'none' under initialRouteName. This will hide the header.
Every StackNavigator you use will render a new Header. In your code you are nesting 3 Stacks. Everytime you navigate to each on of them they will render their Header.
Your parentNavigator will have his first header, leaving it global for the whole time. When you navigate to Page1, this will render his header without hiding his parent header. When you navigate to Page2 same thing, leaving 3 headers from 3 stackNavigators.
If you'll leave the navigation as-is, you have to dinamically hide the header on each on of your stacks.
Taking your first navigator:
{
Main: {
screen: Main,
navigationOptions: {
header: null,
},
},
Page1: {
screen: Page1,
navigationOptions: ({ navigation }) => ({
headerTitle: "Page1",
defaultNavigationOptions:{
header:null //this will hide the header if you are in Page1
}
}),
},
},
{
initialRouteName: 'Main',
}
);
Doing this you will hide the header for Page1, and as Page1 is a stack you will have just the Page1 header.
I don't know how you thinked about navigating between these screens, as this solution would make it harder to navigate from page1 back to the parent Main screen.
Im using react-navigation to build my app, I want to have both tab and stack navigation so I did this:
const FindPage = StackNavigator({
Find: {
screen: Find,
},
Item:{
screen:Item
}
}, {
initialRouteName: 'Find',
});
const ProfilePage = StackNavigator({
Profile: {
screen: Profile,
},
Item:{
screen:Item
}
}, {
initialRouteName: 'Profile',
});
const MyApp = createBottomTabNavigator({
Find: FindPage,
Profile: ProfilePage
}
});
const auth = StackNavigator({
Login:{
screen: Login,
},
Register:{
screen: Register,
},
Main:{
screen: MyApp,
}
},{
initialRouteName: 'Main',
headerMode: 'none'
});
export default auth;
But I dont get it well. this is what the screenshot is
giving:
enter image description here
if you see the tab lost it tab icon and font when im using stacknavigation in tab navigation, this worked for me in another version of react nvigation and cant find anything on the web Please Help !
with reactnavigation2 you can achieve this like in the below code
Read more about it here https://reactnavigation.org/docs/en/bottom-tab-navigator.html
import Ionicions from "react-native-vector-icons/Ionicons";
screen: createBottomTabNavigator(
{
HomeScreen: {
screen: HomeStack,
navigationOptions: {
tabBarLabel: props => <Label name="Home" {...props} />,
tabBarIcon: props => (
<Icon name="ios-home-outline" fillname="ios-home" {...props} />
)
}
}
})
I'm trying to work my way toward building a drawer navigator using this really nice tutorial/demo
Issue is that although this code works and I can walk through all the screens in my stacknavigator:
const navigator = StackNavigator({
home: { screen: Home },
signup: { screen: SignUpStep },
login: { screen: Login },
selectTeachers: { screen: SelectTeachers },
dashboard: { screen: Dashboard },
},
{
headerMode: 'float',
navigationOptions: {
headerStyle: { backgroundColor: '#E73536' },
title: 'You are not logged in',
headerTintColor: 'white'
}
});
export default navigator;
But when i try to include, as a first step, consolidating the login scenes into a loginstack and then having that as a screen in another const, it does not work:
const LoginStack = StackNavigator({
home: { screen: Home },
signup: { screen: SignUpStep },
login: { screen: Login },
selectTeachers: { screen: SelectTeachers },
dashboard: { screen: Dashboard },
},
{
headerMode: 'float',
navigationOptions: {
headerStyle: { backgroundColor: '#E73536' },
title: 'You are not logged in',
headerTintColor: 'white'
}
});
const navigator = StackNavigator({
loginStack: { screen: LoginStack },
//drawerStack: { screen: DrawerNavigation }
}, {
// Default config for all screens
headerMode: 'none',
title: 'Main',
initialRouteName: 'loginStack'
});
export default navigator;
here is the error I am getting:
The link you brought spread a wrong approach out.
I wrote a comment there,
Putting drawer under the StackNavigation is a bad idea and it’s not
fit with any design guide. In iOS, drag to open action is duplicated
with go back action in navigation. In Android, you can find no app
from google use this approach. A drawer should cover StackNavigator
from outside.
You need to change your second StackNavigator to DrawerNavigator. And see 'react-navigation' documents or example for DrawerNavigator.