I want to create a drawer. For each screen accessed through the drawer I want to show the same header I am actually customizing on WelcomeContainer AppNavigator. The drawer should overlap the header. The problem is that the header appear only on the home screen: If I click on the the category menu, the drawer disappear. I even tried to copy the header code and past it in the category screen and nothing appeared. This is my code
const AppNavigator = StackNavigator({
Home: {
screen: WelcomeContainer,
navigationOptions: ({navigation}) => ({
headerLeft:
<Icon name="menu" color='#5c72b0' size={35} style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems:'center',
paddingLeft:10 }} onPress={ () => navigation.navigate('DrawerOpen') } />,
headerRight:
<Icon name="settings" color='#5c72b0' size={25} style={{ alignItems:'center', paddingRight:10 }}
onPress={ () => navigation.navigate('Settings', {title: I18n.t('settings.title') }) } /> })
},
Settings: {
screen: SettingsContainer,
navigationOptions: ({navigation}) => ({
title: navigation.state.params.title
})
},
About: {
screen: About,
navigationOptions: ({navigation}) => ({
title: navigation.state.params.title
})
}
})
const AppDrawer = DrawerNavigator(
{
Home: {
path: '/',
screen: AppNavigator,
},
Category: {
path: '/sent',
screen: CategoryContainer,
},
},
{
initialRouteName: 'Home',
contentOptions: {
activeTintColor: '#e91e63',
},
}
);
Could you please help me solve the problem?
Related
I can't show my custom header with static navigation options. It's only TabNavigator on my Title. What should I do?
This is my HomeScreen Component;
export default class Home extends Component {
static navigationOptions = ({navigation}) => ({
title: 'MENEMENOYS',
headerLeft : (
<TouchableOpacity
onPress={() => {
AuthStore.LogOut().then(() => {
navigation.navigate('LoginPage');
});
}}>
<Icon
name="md-log-out"
size={30}
color={'white'}
style={{marginLeft:10}}
/>
</TouchableOpacity>
)
})
And this is my router : stack navigator with tab navigator.
const TabNavigator = createBottomTabNavigator(
{
Home: {
screen: Home,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<Icon
name="md-home"
size={30}
color={tintColor}
style={styles.homeIcon}
/>
),
},
},
AddNewCar: {
screen: AddNewCar,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<Icon
name="md-add-circle"
size={40}
color={tintColor}
style={styles.addIcon}
/>
),
},
},
OtoparkList: {
screen: OtoparkList,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<IconAwesome name="car" size={30} color={tintColor} />
),
},
},
},
{
tabBarOptions: {
showLabel: false,
activeTintColor: '#41AB5F',
inactiveTintColor: 'white',
style: {
backgroundColor: '#1F202D',
borderTopColor: 'transparent',
},
},
},
);
const AppNavigator = createStackNavigator(
{
TabNavigator: {
screen: TabNavigator,
navigationOptions: {
}
},
LoginPage: {
screen: LoginPage,
navigationOptions: {
headerShown: false,
},
},
ParkingDetail: {
screen: ParkingDetail,
navigationOptions: {
headerShown: false,
},
},
Print: {
screen: Print,
navigationOptions: {
headerShown: false,
}
}
},
{
initialRouteName: 'LoginPage',
},
);
But my header is not shown. Only Header title:TabNavigator and default back button.
Where am i doing wrong ? Please help me. Thanks.
Hey in React navigation latest version 5.x syntax is changed try following
Take a look at doc here Header buttons
static navigationOptions = ({ navigation }) => {
return {
headerTitle: () =>(
<View>
<Text>MENEMENOYS</Text>
</View>
),
headerLeft: () => (
<TouchableOpacity
onPress={() => {
AuthStore.LogOut().then(() => {
navigation.navigate('LoginPage');
});
}}>
<Icon
name="md-log-out"
size={30}
color={'white'}
style={{marginLeft:10}}
/>
</TouchableOpacity>
),
};
};
im using react navigation 3 and also using
this.props.navigation.navigate(item.navigationPath)
to navigate through pages
the problem is when i click the button in navbar to go back it doesn't go back
i want it to go back 1 step but it do nothing
here is the back component
class NavigationBack extends Component {
toggleDrawer = () => {
this.props.navigation.goBack()
};
render() {
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
<Image
source={require('./image/drawer.png')}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
</TouchableOpacity>
</View>
);
}
}
Also when im in the Home->Category->Single-Category
and i press the hardware back button it take me to Home instead of Category
here is a link to snack
https://snack.expo.io/#ov3rcontrol/navi
I tried your code and made some modification. can you check this code ? is this what you need ?
/*Example of Navigation Drawer with Sectioned Menu*/
import React, { Component } from 'react';
import {
StyleSheet,
Platform,
View,
Text,
Image,
TouchableOpacity,
YellowBox,
Dimensions,
Button,
} from 'react-native';
//Import required react-navigation component
import {
createDrawerNavigator,
createStackNavigator,
createAppContainer,
} from 'react-navigation';
//Import all the screens
import Screen1 from './pages/Screen1';
import Screen2 from './pages/Screen2';
import Screen3 from './pages/Screen3';
import category from './pages/category';
import singleCategory from './pages/singleCategory';
//Import custom Drawer / sidebar
import SideMenu from './sidemenu';
//Navigation Drawer Structure for all screen
class NavigationDrawerStructure extends Component {
toggleDrawer = () => {
this.props.navigationProps.toggleDrawer();
};
render() {
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
{/*Donute Button Image */}
<Image
source={require('./image/drawer.png')}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
</TouchableOpacity>
</View>
);
}
}
class NavigationBack extends Component {
toggleDrawer = () => {
this.props.navigation.goBack()
};
render() {
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
<Image
source={require('./image/drawer.png')}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
</TouchableOpacity>
</View>
);
}
}
//Stack Navigator for the First Option of Navigation Drawer
const FirstActivity_StackNavigator = createStackNavigator({
//All the screen from the First Option will be indexed here
First: {
screen: Screen1,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 1',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff',
}),
},
});
//Stack Navigator for the Second Option of Navigation Drawer
const Screen2_StackNavigator = createStackNavigator({
//All the screen from the Second Option will be indexed here
Second: {
screen: Screen2,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 2',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff',
}),
},
});
//Stack Navigator for the Third Option of Navigation Drawer
const Screen3_StackNavigator = createStackNavigator({
//All the screen from the Third Option will be indexed here
Third: {
screen: Screen3,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 3',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff',
}),
},
});
const category_nav = createStackNavigator({
//All the screen from the Third Option will be indexed here
cat: {
screen: category,
navigationOptions: ({ navigation }) => ({
title: 'Makeup Artist',
headerLeft: <NavigationBack navigationProps={navigation} />,
headerStyle: {
backgroundColor: 'grey',
},
headerTintColor: '#fff',
}),
},
});
const single_category_nav = createStackNavigator({
//All the screen from the Third Option will be indexed here
single_cat: {
screen: singleCategory,
navigationOptions: ({ navigation }) => ({
title: 'Mahmoud Makup',
headerLeft: <NavigationBack navigationProps={navigation} />,
headerStyle: {
backgroundColor: 'grey',
},
headerTintColor: '#fff',
}),
},
});
//Drawer Navigator for the Navigation Drawer / Sidebar
const Drawers = createStackNavigator({
NavScreen1: { screen: FirstActivity_StackNavigator },
NavScreen2: { screen: Screen2_StackNavigator },
NavScreen3: { screen: Screen3_StackNavigator },
category: {screen: category_nav},
single_category: {screen: single_category_nav}
},{
headerMode: 'none'
})
const DrawerStack = createDrawerNavigator(
{
drawerScreens: Drawers
},
{
contentComponent: (props) => (
<SideMenu {...props}/>
),
drawerWidth: Dimensions.get('window').width - 120,
}
);
const RootStack = createStackNavigator({
root: DrawerStack
},{
headerMode: "none"
});
export default createAppContainer(RootStack);
I have an top level SwitchNavigator with two stacks (AuthStack and MainStack)
MainStack contains the stack of an logged user.
When I try to switch from one screen to other it's fine, but if I start an action that change the state of the current screen, if I leave and then come back the state keeps the same, it's like the screens was not unmounted when I switch between others.
Working example: https://snack.expo.io/HJrslFk34
Try to move to settings, click on "add" and then switch between the screens, the state keeps the same and screens were not being unmounted
const MainStack = createBottomTabNavigator(
{
[homeDrawerLabel]: {
screen: HomeNavigator,
navigationOptions: {
tabBarLabel: homeDrawerLabel,
tabBarIcon: ({ tintColor }) => (
<Ionicons
name="ios-bookmarks"
size={25}
color={tintColor}
/>
),
},
},
[calendarDrawerLabel]: {
screen: CalendarNavigator,
navigationOptions: {
tabBarLabel: calendarDrawerLabel,
tabBarIcon: ({ tintColor }) => (
<Ionicons
name="ios-bookmarks"
size={25}
color={tintColor}
/>
),
headerLayoutPreset: "center",
},
},
[messagesDrawerLabel]: {
screen: MessagesNavigator,
navigationOptions: {
tabBarLabel: messagesDrawerLabel,
tabBarIcon: ({ tintColor }) => (
<Ionicons
name="ios-bookmarks"
size={25}
color={tintColor}
/>
),
},
},
[notificationsDrawerLabel]: {
screen: NotificationsNavigator,
navigationOptions: {
tabBarLabel: notificationsDrawerLabel,
tabBarIcon: ({ tintColor }) => (
<IconNavigatorWithBadge
badgeCount={3}
name="md-checkmark-circle"
size={25}
color={tintColor}
/>
),
},
},
EditProfile: { screen: EditProfile },
[paymentDrawerLabel]: {
screen: PaymentsNavigator,
navigationOptions: {
tabBarLabel: paymentDrawerLabel,
tabBarIcon: ({ tintColor }) => (
<Ionicons
name="ios-bookmarks"
size={25}
color={tintColor}
/>
),
},
},
},
{
tabBarOptions: {
activeTintColor: "#29C2AF",
inactiveTintColor: "rgba(41, 194, 175, 0.4)",
style: {
height: 60,
paddingVertical: 10,
borderTopColor: "rgba(0,0,0,0.2)",
shadowColor: "#000",
shadowOffset: {
width: 2,
height: 5,
},
shadowOpacity: 0.75,
shadowRadius: 3.84,
elevation: 7,
},
},
headerMode: "none",
headerLayoutPreset: "center",
},
);
const AppNavigator = createSwitchNavigator(
{
AuthStack: AuthStack,
Main: MainStack,
},
{
headerMode: "none",
initialRouteName: "AuthStack",
}
);
const AppContainer = createAppContainer(AppNavigator);
With React Navigation, Tab Navigator views are not unmounted when switching between tabs. You can see the details about the lifecycle in react-navigation in their documentation here: Navigation lifecycle - Example scenario, the important part being here:
We start on the HomeScreen and navigate to DetailsScreen. Then we use the tab bar to switch to the SettingsScreen and navigate to ProfileScreen. After this sequence of operations is done, all 4 of the screens are mounted!
If you want to know and act on the active tab, what you will be looking for are the focus/blur events outlined here
im using the Material-Bottom-Tab-Navigatior and would like to get a transparent bar background however my result atm looks like this
This is the code
import React from 'react';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import Icon from 'react-native-vector-icons/Feather';
import HomePage from '../components/whatsOn/HomePage';
import ComingSoon from '../components/comingSoon/ComingSoon';
import Favourites from '../components/favourites/Favourites';
import config from '../static/config.json';
import texts from '../static/texts.json';
const { gradient } = config.colors;
const { ComingSoonTitle, HomeTitle, FavouritesTitle } = texts.Tabs;
const lang = config.language;
export const TabStack = createMaterialBottomTabNavigator({
comingSoon: {
screen: ComingSoon,
activeTintColor: gradient.primary,
navigationOptions: {
tabBarColor: 'transparent',
tabBarLabel: ComingSoonTitle[lang],
tabBarIcon: ({ tintColor }) => (<Icon name="calendar" color={tintColor} size={24} />),
},
},
whatsOn: {
screen: HomePage,
activeTintColor: gradient.primary,
navigationOptions: {
tabBarColor: 'transparent',
tabBarLabel: HomeTitle[lang],
tabBarIcon: ({ tintColor }) => (<Icon name="film" color={tintColor} size={24} />),
},
},
favourites: {
screen: Favourites,
activeTintColor: gradient.primary,
navigationOptions: {
tabBarColor: 'transparent',
tabBarLabel: FavouritesTitle[lang],
tabBarIcon: ({ tintColor }) => (<Icon name="star" color={tintColor} size={24} />),
},
},
}, {
shifting: true,
initialRouteName: 'whatsOn',
order: ['comingSoon', 'whatsOn', 'favourites'],
tabBarPosition: 'bottom',
});
this TabStack is nested inside this stack:
export const HomeStack = createStackNavigator({
Tabs: {
screen: TabStack,
navigationOptions: {
title: 'Compeso',
header: props => <CustomHeader {...props} />,
headerStyle: {
backgroundColor: 'transparent',
},
headerTitleStyle: {
fontSize: 24,
fontWeight: '500',
color: colors.typography,
},
headerRight: MenuIcon,
headerLeft: SearchIcon,
animationEnabled: true,
},
},
Drawer: {
screen: MoreInfromation,
},
}, {
initialRouteName: 'Tabs',
cardStyle: { backgroundColor: 'transparent' },
});
the HomeStack is nested in a switchNavigator
export default class Router extends Component {
render() {
return (
<MainStack />
);
}
}
const MainStack = createSwitchNavigator({
Auth: LoginStack,
Home: HomeStack,
},
{
initialRouteName: 'Home',
});
This MainStack is getting rendered in my App.js
I put this tab navigator into a stack navigator and each component that gets displayed shows a scroll view with a height of 815 pixels to make sure the background is behind the bar.
Can someone advice ?
Thanks in advance
You need to include barStyle.
So, for transparent the style will be something like this:
barStyle: {backgroundColor:'transparent'}
In your code it will look something like this(included at bottom).
export const TabStack = createMaterialBottomTabNavigator({
comingSoon: {
...
},
...
}, {
shifting: true,
initialRouteName: 'whatsOn',
order: ['comingSoon', 'whatsOn', 'favourites'],
tabBarPosition: 'bottom',
barStyle: {backgroundColor:'transparent'}
});
I am building a react native app with a login and profile screen.The navigation is as below:
I wanted to change the header title when I navigate to each tabs.Also, i want my drawer to be able to open from any screen.So drawer icon should always be in the profile at left.
I cant make the header none/hide in profile screen as it will hide the drawer icon as well.Any idea how to solve it?
const TabStack = TabNavigator(
{
Home: {
screen: Home
},
Settings: {
screen: SettingsTab
}
}
);
const DrawerMain = DrawerNavigator(
{
TabStack: {
screen: TabStack
}
},
{
drawerOpenRoute: "DrawerOpen",
drawerCloseRoute: "DrawerClose"
);
const Profile = StackNavigator(
{
DrawerMain: {
screen: DrawerMain
}
},
{
headerMode: "screen",
navigationOptions: ({ navigation }) => ({
headerStyle: {
backgroundColor: "white"
},
headerLeft: (
<TouchableOpacity
onPress={() => {
if (navigation.state.index === 0) {
navigation.navigate("DrawerOpen");
} else {
navigation.navigate("DrawerClose");
}
}}
>
<Icon name={"ios-menu"} size={20} style={{ color: "red" }} />
</TouchableOpacity>
)
})
}
);
export default (App = StackNavigator({
Login: {
screen: Login
},
Profile: {
screen: Profile,
}
}));
This is how the profile should look like.
First, change your navigation hierarchy to like this.
Drawer
ㄴ Stack
__ ㄴ Tab
Then, you need to pass DrawerNavigator's navigation to StackNavigator to control a drawer from a button in StackNavigator.
And use it through screenProps.
...
const Profile = StackNavigator(
{
TabStack: {
screen: TabStack
}
},
navigationOptions: ({ screenProps }) => ({
...
headerLeft: (
<TouchableOpacity
onPress={() => {
screenProps.myDrawerNavigation.navigate("DrawerOpen");
}}
>
<Icon name={"ios-menu"} size={20} style={{ color: "red" }} />
</TouchableOpacity>
)
...
const DrawerMain = DrawerNavigator(
{
Profile: {
screen: ({navigation}) => <Profile screenProps={{myDrawerNavigation:navigation}}/>
}
},
...