I'm working on an application with React-Native.
I'm using React-Navigation and In my login and register screens I don't want header to be shown.
this is what I wrote and it is working:
const Stylelist = StackNavigator({
Login: { screen: HomeScreen}, // when finish working on homescreen, change back to LoginScreen
Register: { screen: RegisterScreen},
Home: { screen: HomeScreen},
},{headerMode: "none"});
Now I'm working on my Homescreen and I want the home screen to have an header.
How can I enable the header only on the home screen?
I tried changing "headerMode: 'none'" position but it didn't work.
const Stylelist = StackNavigator({
Login: {
screen: HomeScreen,
navigationOptions: ({navigation}) => ({
header: null,
}),
}
Register: { screen: RegisterScreen },
Home: { screen: HomeScreen },
});
I have never used React Navigation but I took a look at the documentation and specifically StackNavigator which you can see here.
It states within the Stack Navigator Options section that you can pass a header which is a
React Element or a function that given HeaderProps returns a React
Element, to display as a header. Setting to null hides header.
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.
I am following react-navigation v3. As per the rules all the routes/screen should be passed through createAppContainer. Is there any way that some screen A can contain createMaterialTopNavigator inside it as child with two screens B and C and that screen A can be passed into App.js's createAppContainer??
The app needs a single createAppContainer and you can use navigators as screens.
For example:
const BottomTabNavigator = createBottomTabNavigator({
Stack1: {
screen: Stack1,
},
Stack2: {
screen: Stack2,
},
Stack3: {
screen: Stack3
}
})
const authenticationSwitch = createSwitchNavigator({
LoginScreen: {
screen: LoginScreen,
},
LoadingScreen: {
screen: LoadingScreen,
},
BottomTabNavigator: {
screen: BottomTabNavigator
}
})
export default createAppContainer(authenticationStack)
EDIT.
Sorry and yes, i didn't understand your question.
To have such a behaviour, you can create a StackNavigator with your customHeader and from that have a child that is a `createMaterialTopNavigator.
This will work if the header is static out of the box, but if you need to have nested childs inside the topNavigator you have to dinamically change the header based off the current navigation state
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 ?
There are documentation and examples of navigating from tab view to other single views. But I can't find any information about navigating from a single view to a tab view.
Is there a possibility to this.props.navigator.push to view with tabs somehow?
If not is there are some workarounds to achieve that?
You should do something like this:
Your main stack navigator:
import HomeScreenTabs from '../yourpath/TabNavigator';
const MainStack = createStackNavigator({
HomeScreen: {
screen: HomeScreenTabs,
},
SingleViewScreen1: {
screen: SomeSingleViewScreen,
navigationOptions: {...}
},
SingleViewScreen2: {
screen: SomeOtherSingleViewScreen,
navigationOptions: {...}
},
}
Your tab navigator:
//Your 3 tab screens
import Home from '../Home';
import Profile from '../Profile ';
import Feedback from '../Feedback ';
const Tabs = createBottomTabNavigator(
{
Home: {
screen: Home
},
Profile: {
screen: Profile
},
Feedback: {
screen: Feedback
}
},
export default Tabs;
And in order to navigate to the Tabs screen from e.g. SingleViewScreen1 you would do this.props.navigation.navigate('HomeScreen').
Use a Wix Navigation v2. It's pretty stable even it says that it is an alpha release. It solves this issue.
While working through the React Navigation tutorial on nesting navigators, I find that the tab navigator, MainScreenNavigator, overwrites the stack navigator, SimpleApp. The result is that the tabbed screens called in that object are the only ones that are displayed. The expected behavior that does not occur is that the button which links to the nested navigator never displays, so I cannot access the ChatScreen object.
const MainScreenNavigator = TabNavigator({
Recent: { screen: RecentChatsScreen },
All: { screen: AllContactsScreen },
});
I've spent hours trying to understand what I might have missed. This is my first attempt at learning this package, so I don't know if the tutorial is wrong, or that I missed a detail that breaks the process. The entire App.js file is located here.
Your help is much appreciated.
First, you need to pass StackNavigator's navigation to screens of Tabs. Because they are only screens you can deal with now since it's a initial screen.
const MainScreenNavigator = TabNavigator({
Recent: { screen: ({screenProps}) => <RecentChatsScreen screenProps={screenProps}/>,
All: { screen: ({screenProps}) => <AllContactsScreen screenProps={screenProps}/> },
});
//I added the export keyword.
export const SimpleApp = StackNavigator({
Home: {
screen: ({navigation}) => <MainScreenNavigator screenProps={{myStackNavigation:navigation}}/>,
navigationOptions: {
title: 'My Chats',
},
},
Chat: { screen: ChatScreen },
})
Now, you can call below code in RecentChatsScreen or AllContactsScreen.
this.props.navigation.screenProps.myStackNavigation.navigate('Chat');