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',
});
Related
I am using stack navigator inside the drawer navigator. What I want to do is, I need to know the activeItem (the active screen), so as to display it as active.
StackNavigator
const stackNav = StackNavigator({
homeComponent: { screen: HomeScreen },
serviceScreen: { screen: ServiceScreen },
serviceDetailScreen: { screen: ServiceDetailScreen },
selectVehicleScreen: { screen: SelectVehileScreen },
addEditVehicle: { screen: AddVehicle },
dateTimeScreen: { screen: DateTimeScreen },
reviewScreen: { screen: ReviewScreen },
notesScreen: { screen: NotesScreen },
}, {
headerMode: 'none'
});
DrawerNavigator
const DrawerStack = DrawerNavigator({
appointment: {
screen: stackNav,
},
}, {
headerMode: 'none',
gesturesEnabled: false,
contentComponent: DrawerContainer
});
export default DrawerStack;
What you can do is
In your context there is only one screen that can be active and that is appointment screen.
If you want to know that if appointment screen is focused then you should check the props inside the DrawerContainer Component. It will give you the activeItemKey i.e appointment.
And then you can simply check in DrawerComponent that if
this.props.activeItemKey === 'appointment' ? { color: '#000' } : { color: '#fff' }]}
You can also pass the activeTintColor prop from DrawerNavigator as shown below
You can find other DrawerNavigatorConfigs here
const DrawerStack = DrawerNavigator({
appointment: {
screen: stackNav,
},
}, {
headerMode: 'none',
gesturesEnabled: false,
contentComponent: DrawerContainer,
contentOptions: {
activeTintColor: '#e91e63',
itemsContainerStyle: {
marginVertical: 0,
},
iconContainerStyle: {
opacity: 1
}
}
});
export default DrawerStack;
Ever since I started using Stack Navigator with Drawer Navigator, this problem occurred. Right now, I think I am passing the parent in the navigate so that it will navigate to the correct screen.
otherUser (username) {
this.props.navigation.navigate('AppStackNav', { username: username });
}
This is how my navigation are setup. I am using Drawer, Stack, and Tab:
const TabNav = TabNavigator({
Random: { screen: HomeScreen },
Recent: { screen: RecentScreen },
Trending: { screen: TrendingScreen },
AllTime: { screen: AllTimeScreen },
}, {
tabBarComponent: NavigationComponent,
tabBarPosition: 'bottom',
lazy: false,
animationEnabled: true,
swipeEnabled: true,
tabBarOptions: {
bottomNavigationOptions: {
labelColor: '#333',
rippleColor: 'white',
tabs: {
Recent: {
barBackgroundColor: '#EEEEEE',
activeLabelColor: '#212121',
},
Trending: {
barBackgroundColor: '#00796B',
},
RegisterScreen: {
barBackgroundColor: '#EEEEEE', // like in the standalone version, this will override the already specified `labelColor` for this tab
activeLabelColor: '#212121',
activeIcon: <Icon size={24} color="#212121" name="newsstand" />
},
AllTime: {
barBackgroundColor: '#00796B'
},
}
}
}
});
const AppStackNav = StackNavigator ({
OtherUserScreen: {screen: OtherUserScreen},
});
const AppDrawerNavigator = DrawerNavigator({
TabNav: {screen: TabNav},
LoginScreen: {screen: LoginScreen},
RegisterScreen: {screen: RegisterScreen},
ProfileScreen: {screen: ProfileScreen},
UserListScreen: {screen:UserListScreen},
HomeScreen: {screen: HomeScreen},
AppStackNav: {screen: AppStackNav},
OtherTagsScreen: {screen: OtherTagsScreen},
QuoteMachineScreen: {screen: QuoteMachineScreen},
},
{
initialRouteName: "TabNav",
contentOptions: {
activeTintColor: "#e91e63"
},
contentComponent: props => <SideBar {...props} />
},
);
Also, I am still learning in React Native so any tips will greatly be appreciated.
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.
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....
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);