i want to hide tab bar in 1st screen only and show in other screens, how can i achieve this. any help is appreciated
const TabNavigator = createBottomTabNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-home" color={tintColor} size={24} />
)
}
},
Quotes: {
screen: QuoteScreen,
navigationOptions: {
tabBarLabel: 'Quotes',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-quote" color={tintColor} size={24} />
)
}
},
About: {
screen: AboutScreen,
navigationOptions: {
tabBarLabel: 'About',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-person" color={tintColor} size={24} />
)
}
},
Books: {
screen: BoookScreen,
navigationOptions: {
tabBarLabel: 'Books',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-book" color={tintColor} size={24} />
)
}
},
Videos: {
screen: VideoScreen,
navigationOptions: {
tabBarLabel: 'Videos',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-videocam" color={tintColor} size={24} />
)
}
}
},
{
tabBarOptions: {
activeTintColor: 'yellow',
inactiveTintColr: 'white',
activeBackgroundColor:'black',
inactiveBackgroundColor:'black'
}
});
export default createAppContainer(TabNavigator);
show tab bar only in home screen i tried hiding in tab bar option but it either hides the tab bar on all screens or tab bar is visible in all screens.what should i try to achieve the desired result? any help is appreciated. thanks in advance...
Add tabBarVisible: false, to the home screen navigationOptions
Related
I have been trying to put an Icon in the bottom tab, I have been using the react navigation tabs version 4. I have tried to upgrade to version 5 but that's a different story.
The goal is just to include an icon but I'm just failing left and right. The documentation says to add it in the navigationOptions
HomeScreen.navigationOptions = ({navigation}) => {
return {
title: 'Get Me Goods',
headerStyle: HeaderStyle.headerStyle,
headerTintColor: HeaderStyle.headerTintColor,
headerTitleStyle: HeaderStyle.headerTitleStyle,
tabBarIcon: ({ color, size }) => <MaterialCommunityIcons name="home" color={color} size={size}/>,
headerLeft: () => <MenuImage
onPress={() => {
// navigation.openDrawer()
navigation.navigate('SignOut')
}}
/>
,
headerRight: () =>
<MenuImage
onPress={() => {
navigation.openDrawer()
}}
/>
}
}
and also tried it in the bottom tab navigator
const BottomTabMenu = createBottomTabNavigator(
{
Home: {
screen: Home,
options: {
tabBarLabel: 'Testing',
tabBarIcon: ({ color, size }) => <MaterialCommunityIcons name="home" color={color} size={size}/>
}
},
Me,
Search,
Messages,
Sell
},
{
initialRouteName: 'Home'
}
)
what else am I missing?
Got this figured out, just used the navigationOptions instead of options in the bottom tab bar configuration
const BottomTabMenu = createBottomTabNavigator(
{
Home: {
screen: Home,
navigationOptions: {
tabBarLabel: 'Testing',
tabBarIcon: ({ color, size }) => <MaterialCommunityIcons name="home" color={color} size={size}/>
}
},
Me,
Search,
Messages,
Sell
},
{
initialRouteName: 'Home'
}
)
I am using react-navigation. I have five icons for my bottomtabs navigator and I only want to show four icons(screen1,screen2,screen4 and screen 5) and hide the other(screen 3).
How can I hide the icon and the label of screen3 if and only if a conditional statement is true..?
This is my code:
const ButtomTabNavigator = createBottomTabNavigator(
{
screen1: {
screen: screen1,
navigationOptions: ({ navigation }) => ({
tabBarLabel: 'screen1',
header: null,
tabBarIcon: ({ tintColor }) => (
<FontAwesome name="gear" color={tintColor} size={30} />
),
})
},
screen2: {
screen: screen2,
navigationOptions: {
header: null,
tabBarLabel: 'screen2',
tabBarIcon: ({ tintColor }) => (
<FontAwesome name="gear" color={tintColor} size={30} />
),
}
},
I want to hide this screen3 icon and label if a conditional statement is true
screen3: {
screen: screen3,
navigationOptions: {
header: null,
tabBarLabel: 'screen3',
tabBarIcon: ({ tintColor }) => (
<FontAwesome name="gear" color={tintColor} size={30} />
),
}
},
screen4: {
screen: screen4,
navigationOptions: {
header: null,
tabBarLabel: 'screen4',
tabBarIcon: ({ tintColor }) => (
<FontAwesome name="gear" color={tintColor} size={30} />
),
}
},
screen5: {
screen: screen5,
navigationOptions: {
header: null,
tabBarLabel: 'screen5',
tabBarIcon: ({ tintColor }) => (
<FontAwesome name="gear" color={tintColor} size={30} />
),
}
},
},
{
tabBarOptions: {
activeTintColor: '#16bb92',
},
shifting: true,
}
)
Try my solution
const routes = (condition) => {
let routes = {
screen1: {
screen: screen1,
navigationOptions: ({ navigation }) => ({
tabBarLabel: 'screen1',
header: null,
tabBarIcon: ({ tintColor }) => (
<FontAwesome name="gear" color={tintColor} size={30} />
),
})
},
screen2: {
screen: screen2,
navigationOptions: {
header: null,
tabBarLabel: 'screen2',
tabBarIcon: ({ tintColor }) => (
<FontAwesome name="gear" color={tintColor} size={30} />
),
}
},
screen4: {
screen: screen4,
navigationOptions: {
header: null,
tabBarLabel: 'screen4',
tabBarIcon: ({ tintColor }) => (
<FontAwesome name="gear" color={tintColor} size={30} />
),
}
},
screen5: {
screen: screen5,
navigationOptions: {
header: null,
tabBarLabel: 'screen5',
tabBarIcon: ({ tintColor }) => (
<FontAwesome name="gear" color={tintColor} size={30} />
),
}
}
}
if (condition) {
routes["screen3"] = {
screen: screen3,
navigationOptions: {
header: null,
tabBarLabel: 'screen3',
tabBarIcon: ({ tintColor }) => (
<FontAwesome name="gear" color={tintColor} size={30} />
),
}
}
}
return routes;
}
Then in your navigation
const ButtomTabNavigator = createBottomTabNavigator(routes(/**Your condition**/, ....)
Hope that help :)
I had build the layout using fontawsome icons in snack expo but when run the same project in expo cli the icons are not displayed.It displayed as a cross.App workes perfectly in snack but not in expo cli.I have tried googleing the probelem but the solutions are change files in gradle i dont have a gardle file this is a snack project.Is there any solution any help will be greatfull,Thanks.
import Icon from 'react-native-vector-icons/FontAwesome';
{
Home: {
screen: FetchNewsApp,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon: ({ tintColor }) => (
<Icon name="home" color={tintColor} size={25} />
),
},
},
Explore: {
screen: ExploreScreenApp,
navigationOptions: {
tabBarLabel: 'Explore',
tabBarIcon: ({ tintColor }) => (
<Icon name="wpexplorer" color={tintColor} size={25} />
),
},
},
Search: {
screen: SearchScreenApp,
navigationOptions: {
tabBarLabel: 'Search',
tabBarIcon: ({ tintColor }) => (
<Icon name="search" color={tintColor} size={25} />
),
},
},
Settings: {
screen: SettingScreenApp,
navigationOptions: {
tabBarLabel: 'Settings',
tabBarIcon: ({ tintColor }) => (
<Icon name="cog" color={tintColor} size={25} />
),
},
},
Profile: {
screen: ProfileScreenApp,
navigationOptions: {
tabBarLabel: 'Profile',
tabBarIcon: ({ tintColor }) => (
<Icon name="user-circle" color={tintColor} size={25} />
),
},
},
},
{
initialRouteName: 'Home',
}
);
If you are using expo managed app just use expo vector icons
Expo vector icons
because react native vector icons require linking which is not possible with expo managed apps.
here is an example for expo icons on snack:
Snack
You also use images replace icons it works fine,
tabBarIcon: ({ tintColor }) => (
<Image source={require('...')} style={{}}/>
)
I want to dynamically change the icon of the bottom tab bar icon to the icon of the drawer page i change to. When the drawer open and i select cards page i want the payment icon to change from money to cards icon. Is this possible to achieve ? thanks
bottom tab
const bottomtab = createBottomTabNavigator(
{
home: {
screen: home,
navigationOptions: {
tabBarIcon: ({ tintColor, focused }) => <Icon name="home" color={tintColor} focused={focused} size={30} />,
},
},
payment: {
screen: paymentdrawerstack,
navigationOptions: ({ navigation }) => {
return{
tabBarIcon: ({ tintColor }) => <Icon name="money" color={tintColor} size={20} />,
}
},
},
},
drawer nav
const paymentdrawerstack = createDrawerNavigator(
{
balance: {
screen: balance,
navigationOptions: ({ navigation }) => {
return{
drawerIcon: ({ tintColor, focused }) => (
<Icon name="money" color={tintColor} focused={focused} size={20} />
),
drawerLabel: 'balance',
}
},
},
cards: {
screen: cards,
navigationOptions: ({ navigation }) => {
return{
drawerIcon: ({ tintColor, focused }) => (
<Icon name="cards" color={tintColor} focused={focused} size={20} />
),
drawerLabel: 'cards',
}
},
},
Try this, use this function to get the active route:
const getActiveRoute = route => {
if (!route.routes || route.routes.length === 0 || route.index >= route.routes.length) {
return route.routeName;
}
const childActiveRoute = route.routes[route.index];
return getActiveRoute(childActiveRoute);
}
And then in navigationOptions of payment, check what the active route is, change the icon accordingly, like so:
payment: {
screen: paymentdrawerstack,
navigationOptions: ({ navigation }) => {
const name = getActiveRoute(navigation.state) === 'cards' ? 'cards' : 'money';
return {
tabBarIcon: ({ tintColor }) => <Icon name={name} color={tintColor} size={20} />,
}
},
},
I'm coding an app that uses react-navigation. My app has a bottom TabNavigator in which each tab consists of a stackNavigator, like so:
Routes.js:
const FirstStack = createStackNavigator({
First: {
screen: FirstScreen,
navigationOptions: {
header: props => <AppToolbar />
}
}
});
const SecondStack = createStackNavigator({
Second: {
screen: SecondScreen,
navigationOptions: {
header: props => <AppToolbar />
}
}
});
const ThirdStack = createStackNavigator({
Third: {
screen: ThirdScreen,
navigationOptions: {
header: props => <AppToolbar />
}
}
});
const FourthStack = createStackNavigator({
Fourth: {
screen: FourthScreen,
navigationOptions: {
header: props => <AppToolbar />
}
}
});
const FifthStack = createStackNavigator({
Fifth: {
screen: FifthScreen,
navigationOptions: {
header: props => <AppToolbar />
}
}
});
export const AppStack = createBottomTabNavigator(
{
First: {
screen: FirstStack,
navigationOptions: {
title: "First",
tabBarLabel: "First",
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-home" color={tintColor} size={24} />
)
}
},
Second: {
screen: SecondStack,
navigationOptions: {
title: "Second",
tabBarLabel: "Second",
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-clock" color={tintColor} size={24} />
)
}
},
Third: {
screen: ThirdStack,
navigationOptions: {
title: "Third",
tabBarLabel: "Third",
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-fitness" color={tintColor} size={24} />
)
}
},
Fourth: {
screen: FourthStack,
navigationOptions: {
title: "Fourth",
tabBarLabel: "Fourth",
tabBarIcon: ({ tintColor }) => (
<Icon
name="ios-cloud-download"
color={tintColor}
size={24}
/>
)
}
},
Fifth: {
screen: FifthStack,
navigationOptions: {
title: "Fifth",
tabBarLabel: "Fifth",
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-person" color={tintColor} size={24} />
)
}
}
},
{
initialRouteName: "First",
order: ["First", "Second", "Third", "Fourth", "Fifth"],
tabBarOptions: {
activeTintColor: "white",
inactiveTintColor: "grey",
style: {
backgroundColor: "#121212",
borderTopColor: "#303030"
}
}
}
);
Each stackNavigator inside the tabs in the tabNavigator has its own header so that I can customize the header for each tab, but all headers have a button which should navigate to the profile screen (in this example its the contact icon).
AppToolbar.js:
const appToolbar = props => {
return (
<View style={styles.toolbar}>
<Text style={styles.toolbarTitle}>Title</Text>
<TouchableOpacity onPress={...}>
<Icon
name="ios-contact"
color="grey"
size={30}
style={{ padding: 0, margin: 0, marginRight: 10 }}
/>
</TouchableOpacity>
</View>
);
};
What I want to do is that by pressing the contact icon the app should navigate to the profile screen, what I don't know is if its possible to define like a global route thats accesible from everywhere, Or do I have to add the profile screen to all the stackNavigators so that it is accesible from every screen in every stack?
Thanks in advance!
Found the answer here https://stackoverflow.com/a/50701940/1276438
Use a stackNavigator with the profile stack and the tabNavigator as children, making the tabNavigator the default route.