I'm facing an issue in which header component does not change. It's same on all the screen even if I have defined separately in Stacknavigator navigationOptions.
<Header
leftComponent={{ icon: 'menu', color: '#fff' }}
centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
rightComponent={{ icon: 'home', color: '#fff' }}
/>
Even if I have added in each screen separately but it's showing home (first header component) as attached.
I have also override navigation options on each screen as well but same header issue.
static navigationOptions = ({ navigation, screenProps }) => ({
title: 'User List',
headerTitle:'User List',
headerTintColor :'#ffffff',
});
Below is my complete code
const AppNavigator = StackNavigator({
Login: {
screen: LoginScreen,
navigationOptions: {
header: null,
headerMode: 'none'
}
},
Home: {
screen: AppDrawerNavigation,
navigationOptions: ({
navigation
}) => ({
header: < Header
outerContainerStyles={{ backgroundColor: '#1999CE' }}
leftComponent = {
<Icon name='menu' color='#ffffff' onPress={() => navigation.navigate('DrawerToggle')}/>
}
centerComponent = {
{
text: 'Home',
style: {
color: '#fff'
}
}
}
rightComponent = {
{
icon: 'home',
color: '#fff'
}
}
/>,
}),
},
WebViews: {
screen: AppDrawerNavigation,
navigationOptions: {
header: null,
headerMode: 'none'
}
},
Profile: {
screen: ProfileScreen,
navigationOptions: {
headerStyle: {
backgroundColor: '#1999CE',
},
}
},
UserList :{
screen:AppDrawerNavigation,
navigationOptions: ({
navigation
}) => ({
title: 'List User',
headerTitle:'List User',
header: < Header
outerContainerStyles={{ backgroundColor: '#1999CE' }}
leftComponent = {
<Icon name='menu' color='#ffffff' onPress={() => navigation.navigate('DrawerToggle')}/>
}
centerComponent = {
{
text: 'List User',
style: {
color: '#fff'
}
}
}
rightComponent = {
{
icon: 'home',
color: '#fff'
}
}
/>,
}),
}
},
{ navigationOptions: {
headerMode: 'screen'
},
}
);
const AppDrawerNavigation = DrawerNavigator({
Home: {
screen: HomeScreen,
},
WebViews: {
screen: WebViewScreen,
},
UserList: {
screen: UserListScreen,
},
},
{
navigationOptions: {
headerMode: 'none'
},
drawerPosition: 'left',
drawerWidth: 200,
contentOptions: {
activeTintColor: '#000000',
activeTintColor :'#ffffff',
activeBackgroundColor :'#1999CE',
inactiveTintColor :'#1999CE',
inactiveBackgroundColor :'#ffffff',
}
}
);
Can you suggest a possible fix that would address this issue?
You can use withHeaders from this package react-navigation-utils to make custom headers for each screen.
Try this
Home: {
screen: HomeScreen,
navigationOptions: {
title:'Home',}
},
WebViews: {
screen: WebViewScreen,
navigationOptions: {
title:'Web Views',}
},
UserList: {
screen: UserListScreen,
navigationOptions: {
title:'User List',}
},
hope it'll hepls you....
Related
I have two Nagigators 1:StackNavigator and 2:DrawerNavigator
my react native and react navigation version
"react-native": "0.55.4",
"react-navigation": "^1.0.0-beta.11",
my root navigator is the StackNavigator from which i call the DrawerNavigator.
when i call the navigation.navigate('DrawerOpen') my screen returns to the initialRouteName .
my StackNavigator
import DrawerNavigatorScreen from "./src/DrawerNavigator";
const myApp = StackNavigator({
Home: {
screen: App,
navigationOptions: {
header: null
}
},
HomeChildData: {
screen: DrawerNavigatorScreen,
navigationOptions: {
header:null,
}
},
otp: {
screen: otp,
navigationOptions: ({ navigation }) => ({
header: null
})
}
});
my DrawerNavigator (/src/DrawerNavigator)
const DrawerNavigatorScreen = DrawerNavigator(
{
social: {
screen: socialstack,
navigationOptions: {
header: null
}
},
profile: {
screen: profilescreen,
navigationOptions: ({ navigation }) => ({
header: null
})
},
{
initialRouteName: "social",
contentOptions: {
labelStyle: {
alignSelf: "center",
fontFamily: "Avenir-Light",
fontSize: 15,
color: "#3B3B3B"
},
activeTintColor: "#3B3B3B",
activeBackgroundColor: "#ffc34d", //rgba(255,181,14,0.1)
// inactiveTintColor: 'black',
inactiveBackgroundColor: "#fff"
},
});
export default DrawerNavigatorScreen
where my problem occurs
static navigationOptions = ({ navigation }) => ({
header:null,
headerTitleStyle: {
alignSelf: 'center',
marginLeft: margintLeftValue,
color: '#2F2E2F',
fontFamily: 'Avenir-Medium'
},
headerLeft: <TouchableOpacity onPress={() => navigation.navigate('DrawerOpen')}>
<Image
source={require('./../images/menu.png')}
style={styles.drawerIcon} />
</TouchableOpacity>,
})
I want to simply open or toggle the drawer .
I think what you're looking for is navigation.toggleDrawer();.
You can read more here.
I want to show Icon in tabs, but when I put showIcon:true in tabBarOptions I see this error:
can't find variable: React
const MenStack = createStackNavigator({
menStackNav: { screen: MenTabScreen, navigationOptions:{tabBarVisible: false},
},
Products: {
screen: ProductsShow,
navigationOptions:{tabBarVisible: false},
},
},{
initialRouteName: 'menStackNav',
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
});
MenStack.navigationOptions = ({navigation}) => {
let tabBarVisible = true;
if(navigation.state.index > 0){
tabBarVisible = false;
}
return {
tabBarVisible,
}
}
const HomeScreenTabs = createMaterialTopTabNavigator({
Home:{
screen:HomeTabScreen,
navigationOptions: {
tabBarIcon:<Icon name="home" size={30} color="#900" />
}
},
Women: {
screen:WomenTabScreen,
},
Men: {
screen:MenStack,
},
},{
tabBarOptions: {
showIcon:true,
style:{backgroundColor:'#fff'},
activeTintColor: '#0077FF',
inactiveTintColor: '#0077FF60',
indicatorStyle: {
opacity: 0
},
tabStyle:{backgroundColor:'#fff',height:40,borderBottomColor:'#fff'},
labelStyle: {
borderBottomColor:'#fff',
border:0,
fontSize: 14,
fontFamily:'iransans_medium',
},
},
initialRouteName: 'Men',
mode: 'modal',
headerMode: 'none',
});
I am extremely new in React Native, tried to adding a testing screen in drawer, but I couldn't.
import { createDrawerNavigator, createStackNavigator } from "react-navigation"
/* Some imports here neglected...*/
/*
* icon size
* */
const iconSize = 18
const IntegratedNavigation = createStackNavigator({
bottomNavigator: { screen: BottomNavigator, navigationOptions: { header: null } },
something: { screen: Something, navigationOptions: { header: null } },
something2: { screen: SomethingElse, navigationOptions: { header: null } },
})
export const DrawerNavigator = createDrawerNavigator({
Tabs: {
screen: IntegratedNavigation,
navigationOptions: {
drawerLabel: "Explore",
drawerIcon: ({ tintColor, focused }) => (
<Icon icon={"search"} size={iconSize} color={tintColor}/>
),
header: null,
},
},
PartnersScreen: {
screen: PartnersScreen,
navigationOptions: {
drawerLabel: "Partners",
drawerIcon: ({ tintColor, focused }) => (
<Icon icon={"safety"} size={iconSize} color={tintColor}/>
),
},
},
HelloScreen: {
screen: PartnersScreen, /*This is a testing new drawer tab that never appear!*/
navigationOptions: {
drawerLabel: "Test!",
drawerIcon: ({ tintColor, focused }) => (
<Icon icon={"test"} size={iconSize} color={tintColor}/>
),
},
},
}, {
contentOptions: {
inactiveTintColor: color.palette.lightBlack,
activeTintColor: color.primary,
},
contentComponent: props => (<MenuUserInfo drawerItemsProps={props}/>),
drawerWidth: 240,
},
)
As a test, I just wanted to duplicate "PartnersScreen" as another tab. But the new route never appear. I couldn't figure out which other file I need to modify. Any idea?
I have a navigation.js which returns SwitchNavigator...
I want to put TabIcon in one of the screens....But i can't do it inside the screen,
i.e
static navigationOptions = () => ({
header: null,
tabBarLabel: 'Orders',
});
As i have a nested tab, so i don't have a screen where i can do this ....here is my code
navigation.js
const AppStack = TabNavigator({
//ORDER TAB----->>>>
orders: {
navigationOptions: {
tabBarLabel: 'Orders',
},
screen: TabNavigator({
navigationOptions: {
tabBarLabel: 'Orders',
tabBarIcon: ({ tintColor }) => {
return <Icon name="shopping-cart" size={20} color={tintColor} />;
}
},
awaitingScreen: {
screen: StackNavigator({
awaiting: { screen: AwaitingScreen },
awaitingorderdetail: { screen: AwaitingDetailScreen }
})
},
confirmedscreen: {
screen: StackNavigator({
confirmed: { screen: ConfirmedScreen },
confirmedorderdetail: { screen: ConfirmedDetailScreen }
})
},
}, {
tabBarOptions: {
activeTintColor: '#415041', // Color o f tab when pressed
inactiveTintColor: '#b5b5b5', // Color of tab when not pressed
showIcon: 'true', // Shows an icon for both iOS and Android
//showLabel: (Platform.OS !== 'android'), //No label for Android
lazy: true,
animationEnabled: false,
indicatorStyle: {
borderBottomColor: '#f5e9dd',
borderBottomWidth: 2,
},
labelStyle: {
fontSize: 10,
color: 'white',
fontFamily: 'NeutraText-Book'
},
style: {
backgroundColor: '#415041',
}
}
}
)
},
//PAYMENT TAB---->>>
payments: { screen: PaymentScreen },
//CUSTOMER TAB----->>
customers: { screen: CustomerScreen },
//MESSAGES TAB----->>
messages: { screen: MessageScreen },
//backBehavior: 'none',
},
{
headerMode: 'none', // I don't want a NavBar at top
tabBarPosition: 'bottom', // So your Android tabs go bottom
swipeEnabled: false,
lazy: true,
animationEnabled: false,
tabBarOptions: {
activeTintColor: '#415041', // Color o f tab when pressed
inactiveTintColor: '#b5b5b5', // Color of tab when not pressed
showIcon: 'true', // Shows an icon for both iOS and Android
//showLabel: (Platform.OS !== 'android'), //No label for Android
labelStyle: {
fontSize: 8,
margin: 0,
padding: 0,
fontFamily: 'NeutraText-Book'
},
indicatorStyle: {
borderBottomColor: '#f5e9dd',
borderBottomWidth: 2,
},
style: {
backgroundColor: '#fff', // Makes Android tab bar white instead of standard blue
}
}
});
const AuthStack = TabNavigator({
selectadmin: { screen: SelectAdminScreen },
otp: { screen: OtpScreen },
password: { screen: PasswordScreen },
pin: { screen: PinScreen }
},
{
navigationOptions: {
tabBarVisible: false
},
tabBarPosition: 'bottom',
swipeEnabled: false,
lazy: true,
animationEnabled: false,
//backBehavior: 'none',
}
);
export default SwitchNavigator(
{
AuthLoading: AppLoadingScreen,
App: AppStack,
Auth: AuthStack,
},
{
initialRouteName: 'AuthLoading',
}
);
Now i want to import this navigator inside App.js
like
export default class App extends React.Component {
render() {
return (
<View style={{ flex: 1 }}>
<SwitchNavigator />
</View>
);
}
}
But i can't do this as i can't return JSX without React,
So is there any work around? I can declare all this inside my App.js but That is my last option as it will make my code messy.
return <Icon name="shopping-cart" size={20} color={tintColor}
It returns React must be in scope
Make sure to always import React in every file that contains jsx:
import React from 'react';
The error indicates that you forgot to do so in a file that contains jsx.
When I am in my SignIn screen and I reset my stack to point to the Main TabNavigator I see the Welcome screen briefly. It doesn't look appealing at all. How do I solve this?
I have the following code in my router:
export const WelcomeStack = StackNavigator({
welcome:{
screen: WelcomeScreen,
navigationOptions: {
header: () => { null }
}
},
SignIn: {
screen: SignIn,
navigationOptions: {
headerBackTitle: "Tilbake",
headerTintColor: colors.background,
headerStyle: {
marginTop: Platform.OS === 'android' ? 24 : 0,
backgroundColor: colors.primary
},
title: 'SeniorSmart'
}
},
main: {
screen: TabNavigator({
FindEvents: {
screen: FindEvents,
navigationOptions: {
title: 'Finn aktiviteter',
},
},
}, {
tabBarPosition: 'bottom',
tabBarComponent: TabBarBottom,
swipeEnabled: false,
animationEnabled: true
}),
}
And this is the code I use to navigate to the main tabnavigator screen:
const resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'main' }),
],
});
this.props.navigation.dispatch(resetAction);