I have a react native app using react-navigation where i want my header to look like this with a title and subtitle.
I'm using native-base Header to achieve this. At the root of the application i have a tabs navigation and each tab has a drawer navigation of its own. Like below
For all the tabs there is separate Header component inside which the Title i have hard coded. The sub title is supposed to be the title of the current active screen similar to the drawerLabel or the title which are configured in the navigation options. But i'm not able to access the same in my header component. I even pass the navigation as a prop to the header but it contains the tab as the active route and not the initialRoute of the drawer as active route. This is how i use the header component
<MyHeader navigation={navigation} subTitle={''} openDrawer={this.openDrawer}></MyHeader >
Below is my Drawer config
const DrawerConfig = {
Screen1: {
screen: Screen1,
path: 'screen1',
navigationOptions: ({ navigation }) => ({
title: `Screen 1`,
drawerLabel: 'Screen 1',
}),
}, Screen2: {
screen: Screen2,
path: 'screen2',
navigationOptions: ({ navigation }) => ({
title: `Screen 2`,
drawerLabel: 'Screen 2'
}),
}
}
const DrawerNavigator = createDrawerNavigator(DrawerConfig, {
initialRouteName: 'Screen1',
contentComponent: CustomDrawerComponent,
});
const MyDrawerNavigator = createAppContainer(DrawerNavigator);
export default MyDrawerNavigator;
I have event tried creating stack for each of the screen and have the default header but i was not able to customize it by passing in a custom header component which the docs say should work.
const MyScreen1Stack = createStackNavigator(
{
Screen1: {
screen: Screen1,
}
},
{
navigationOptions: ({ navigation }) => ({
initialRouteName: 'Screen1',
title: 'Screen 1',
drawerLabel: 'Screen 1',
header: ()=> <MyHeader />,
heaMode: 'screen'
}),
},
);
Below are the dependencies i have
"native-base": "^2.13.8",
"react": "16.8.1",
"react-native": "0.61.2",
"react-native-gesture-handler": "~1.3.0",
"react-native-modal": "^11.4.0",
"react-native-reanimated": "~1.2.0",
"react-native-screens": "1.0.0-alpha.23",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "^0.11.7",
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.1",
"react-navigation-stack": "^1.10.2",
"react-navigation-tabs": "^2.5.6"
Any help will be highly appreciated.
const MyScreen1Stack = createStackNavigator(
{
Screen1: {
screen: Screen1,
navigationOptions: ({ navigation }) => ({
header:<CustomHeader navigation={navigation}/>
});
}
});
Using custom header to this way and pass navigation props to header so you can access navigation in custom header and you can pass title and subtitle as a props as well.
<CustomHeader title="this is title" subtitle="this is subtitle"/>
Related
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.
I'm trying to implement a left drawer and right drawer for my app. I'm unable to find any usable examples online. I've tried 3-4 examples including the example from react native docs itself and I'm getting undefined is a not an object (evaluating'Component.router). If anyone has a working example of an app with a left and right drawer navigator that would be great. Thanks!
I believe that you could do something like this, create a new file 'AppNav.js' to handle all your navigation/drawers etc~
AppNav.js
const LeftDrawer = createDrawerNavigator(
{
Screen1: {
screen: Screen1,
},
Screen2: {
screen: Screen2,
},
}, {
headerMode: 'none',
drawerWidth: SCREEN_WIDTH * 0.6,
drawerPosition: 'left',
})
const RightDrawer = createDrawerNavigator(
{
Screen1: {
screen: Screen1,
},
Screen2: {
screen: Screen2,
},
}, {
headerMode: 'none',
drawerWidth: SCREEN_WIDTH * 0.6,
drawerPosition: 'right',
})
const RootNavigator = createStackNavigator({
LeftDrawer: { screen: LeftDrawer },
RightDrawer: { screen: RightDrawer }
})
export default AppNav = props => {
return <RootNavigator />
}
EDIT: Plus, on the RootNavigator, before the call of LeftDrawer, you can set the main screen of your app and set it as 'initialRouteName'
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 want to send route params to Profile tab from button click action in Home screen. Below code is tab navigator
const Tabs = TabNavigator({
[routes.HOME]: {
screen: FeedMainScreen,
navigationOptions: {
tabBarLabel: tabBarLabels.HOME_TAB_LABEL,
},
},
[routes.SEARCH]: {
screen: SearchScreen,
navigationOptions: {
tabBarLabel: tabBarLabels.SEARCH_TAB_LABEL,
},
},
[routes.PROFILE]: {
screen: ProfileScreen,
navigationOptions: {
tabBarLabel: tabBarLabels.PROFILE_TAB_LABEL,
},
},
}
and button click navigation is like this
<Button onPress={() => this.props.navigation.navigate(routes.PROFILE, { id: this.props.user._id }, null)} />
and accsess param from Profile screen like this
constructor (props) {
super(props)
console.log('NavPrams', this.props.navigation.state)
}
alwaya undifined
You can use connect() method to successfully map the props and use them anywhere.
Add the below mentioned code in the class where is written -
const mapStateToProps = state => {
return {
user: this.props.user;
};
};
export default connect(mapStateToProps, {})(className);
I have an issue that no matter what I try, I just cannot get styling to work on my Stack with Drawer navigator. I've tried several examples and solutions but just none of them work, my navigation stays the default blue.
In my current code below, I've left 2 coloring options open - those two are of the many things I've tried before.
I hope that someone knows what's going on because I'm starting to get clueless.
const MainScreenNavigator = StackNavigator({
'Home': {
screen: Components.HomeScreen,
navigationOptions: ({navigation}) => ({
header: <Components.StackHeader title='Home' navigation={navigation} />
})
},
'Scan': {
screen: Components.ScanScreen,
navigationOptions: ({navigation}) => ({
header: <Components.StackHeader title='Scan QR' navigation={navigation} />
})
},
'LockInfo': {
screen: Components.LockInfoScreen,
navigationOptions: ({navigation}) => ({
header: <Components.StackHeader title='Lock' navigation={navigation} />
})
},
});
const RootNavigator = DrawerNavigator ({
Home: {
screen: MainScreenNavigator,
},
});
RootNavigator.navigationOptions = {
contentOptions: {
activeBackgroundColor: '#ff5976',
style: {
backgroundColor: '#000000'
}
}
}
const ModalNavigator = StackNavigator(
{
Main: { screen: Main },
Login: { screen: Login },
},
{
headerMode: 'none',
mode: 'modal',
navigationOptions: {
gesturesEnabled: false,
},
https://reactnavigation.org/docs/navigators/stack#Screen-Navigation-Options
checkout this above link, search and add the required styling properties inside your own StackNavigator, headerStyle, headerTitleStyle, headerBackTitleStyle, headerTintColor and so on...
Also for DrawerNavigator, checkout this below link and replicate the code, styling properties for the same are provided.
https://reactnavigation.org/docs/navigators/drawer#DrawerNavigator
Also remove the single inverted commas from Home, Scan and LockInfo