I have a createBottomTabNavigator on my project.by default tabs have specific height and bottom position .
how can I change position and height of it
my code:
const Navigate=createBottomTabNavigator({
Home:{screen:Home,navigationOptions:{
tabBarLabel:'Home',
tabBarIcon:({tintColor})=>(
<Icon name="md-home" color={tintColor} size={25}/>
)
} },
Camera:{screen:Camera,navigationOptions:{
tabBarLabel:'Profile',
tabBarIcon:({tintColor})=>(
<Icon name="md-add-circle" color={tintColor} size={25}/>
)
} },
Profile: {
screen:Profile,
navigationOptions:{
tabBarLabel:'Profile',
tabBarIcon:({tintColor})=>(
<Icon name="md-person" color={tintColor} size={25}/>
)
}
},
}
,{
tabBarOptions: {
activeTintColor: 'red',
inactiveTintColor: 'cyan',
activeBackgroundColor:'lightgreen',
showLabel:false,
keyboardHidesTabBar:false,
tabStyle:{
backgroundColor:'orange',
height:40,
},
},
},
},
);
export default createAppContainer(Navigate);
You need to set the height in the style object, not the tabBarOptions.
Refer to https://reactnavigation.org/docs/en/bottom-tab-navigator.html for the styles object.
I did it like this in my app
const navigatorConfig = {
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ tintColor }) => {
switch (routeName) {
....
}
style: {
height: responsiveHeight(7.5),
borderTopWidth: 0,
},
}}
enter code here
Related
Apparently simple problem: the Header Title in react Navigation
Navigator file with my Bottom Tabs
const BottomTabNavigator = createMaterialBottomTabNavigator(
{
ToFind: {
screen: TopBarNavigator,
navigationOptions: {
title: "Discover",
tabBarIcon: (tabInfo) => {
return (
<Ionicons
name="md-search"
size={25}
color={tabInfo.tintColor} //prende lo stesso colore di tintcolor giù
/>
);
},
tabBarColor: "#27ae60",
activeColor: "white",
},
},
....
const Navigator = createStackNavigator({
BottomTabNavigator,
Detail: DetailScreen, // not visible but I need the navigation
Item: ItemDisplay, // not visible but I need the navigation
});
Now I try to set the name into the page (at the bottom)
MapScreen.navigationOptions = (navData) => {
return {
headerTitle: "Map",
};
};
Doing this I have the Bottom Tabs styled as I want and navigation but I CAN'T change the header title (navigation title) but I always see BottomTabNavigator
It looks really trick or I'm mistaking somewhere?
Any Idea?
Thanks
createMaterialBottomTabNavigator does not have header bar by default, but createStackNavigator has.
You can do something like this.
import React from "React";
import { createAppContainer, createStackNavigator } from "react-navigation";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
</View>
);
}
}
const Tab1 = createStackNavigator({
S1: {
screen: ToFind
}
});
const Tab2 = createStackNavigator({
S2: {
screen: ToFind
}
});
export default createAppContainer(
createBottomTabNavigator({
Tab1,
Tab2
}, {
//CUSTOM CONFIG
initialRouteName: 'Tab1',
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Tab1') {
iconName = 'icon1';
} else if (routeName === 'Tab2') {
iconName = 'icon2';
}
return <Icon name={iconName} size={24} color={tintColor} />;
<Ionicons
name={iconName}
size={25}
color={tabInfo.tintColor} //prende lo stesso colore di tintcolor giù
/>
},
}),
tabBarOptions: {
activeTintColor: 'white',
inactiveTintColor: 'black',
showLabel: false,
style: {
backgroundColor: '#27ae60',
borderTopWidth: 0,
borderTopColor: '#27ae60',
},
},
});
);
Try these steps. Hope to fix your problem.
Create Your Bottom Tab Navigator :
const BottomTabNavigator = createMaterialBottomTabNavigator(
{
PageOne: {
screen: PageOneComponent,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Feather name="airplay" size={26} color={tintColor} />,
tabBarLabel: null,
barStyle: { backgroundColor: 'white', elevation: 0, }
},
},
PageTwo: {
screen: PageTwoComponent,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Feather name="search" size={25} color={tintColor}/>,
tabBarLabel: null,
barStyle: { backgroundColor: 'white', elevation: 0, }
}
},
MapViewLink: {
screen: MapView,
navigationOptions: {
tabBarIcon: <Feather name="map-pin" size={25} color={'green'} />,
tabBarOnPress: ({ navigation }) => {
navigation.navigate('MapView');
},
tabBarLabel: null
}
},
},
{
initialRouteName: 'PageOne',
activeColor: 'orange',
inactiveColor: 'grey',
labeled: false,
barStyle: { backgroundColor: 'white', elevation: 0, borderTopWidth: 1, borderTopColor: '#efefef' },
}
);
Create your StackNavigator and export the navigator
const StackNavigator = createStackNavigator({
// bottom tab navigator
BottomTabNavigator: {
screen: BottomTabNavigator,
navigationOptions: {
header: null
}
},
// MapView Page
MapView: {
screen: MapView,
navigationOptions: ({ navigation }) => ({
title: 'Hello World'
})
},
}, {
defaultNavigationOptions: ({navigation}) => ({
headerTitleAlign: 'center',
cardStyle: { backgroundColor: '#FFFFFF' },
headerTitleStyle: {
// the default styles you want to apply to header title
},
});
export default createAppContainer(StackNavigator);
In the end, put the navigator inside the main project file. e.g App.js
I'm following an tutorial and I got a little stuck.
I'm trying to add an custom icon in a react native tab navigator but I had not been lucky and hope some fellow member can guide me in the right direction.
import React from 'react';
import { createMaterialTopTabNavigator, Image} from 'react-navigation';
import FoldersList from '../screens/FoldersList';
const Routes = {
Home: {
screen: (props) => <FoldersList {...props} tabIndex={0}/>,
navigationOptions: {
title: 'Home'
}
},
MyNewTab: {
screen: (props) => <FoldersList {...props} tabIndex={1} createFolderTitle='Create new tab folder' />,
navigationOptions: {
title: 'MyNewTab'
}
},
MyThirdTab: {
screen: (props) => <FoldersList {...props} tabIndex={2} createFolderTitle='Create third tab folder'/>,
navigationOptions: {
tabBarIcon: ({ tintColor }) => {
return (<Image
style={{ width: 50, height: 50 }}
source={{ require: "../../images/AddFolder.png" }}/>);}
}
},
};
const routeConfig = {
swipeEnabled: false,
tabBarOptions: {
style: {
backgroundColor: '#013a65',
},
renderIndicator: () => null, // Indicatorline under tabbar
activeTintColor:'red',
inactiveTintColor:'#ffffff',
},
},
};
export default TabNavigator = createMaterialTopTabNavigator({
...Routes
}, routeConfig);
Hello here is a simple code:
UPDATE
class MyHomeScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Home',
// Note: By default the icon is only shown on iOS. Search the showIcon
option below.
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('Notifications')}
title="Go to notifications"
/>
);
}
}
class MyNotificationsScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Notifications',
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./notif-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 26,
height: 26,
},
});
const MyApp = TabNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
}, {
tabBarPosition: 'top',
animationEnabled: true,
tabBarOptions: {
activeTintColor: '#e91e63',
},
});
According to the docs, the showIcon property is setted to false on Android ( https://web.archive.org/web/20171015002750/https://reactnavigation.org/docs/navigators/tab#tabBarOptions-for-TabBarTop-default-tab-bar-on-Android ).
IF THE ABOVE CODE DO NOT WORKS FOLLOW THE BELLOW STEPS:
const MyApp = TabNavigator({
Displayed: {
screen: MyHomeScreen,
navigationOptions: {
title: 'Favorites',
tabBar: {
icon: ({tintColor}) => (<Image
source={require('./chats-icon.png')}
style={{width: 26, height: 26, tintColor: tintColor}}
/>)
},
},
},
...
or
class MyHomeScreen extends React.Component {
static navigationOptions = {
title: 'Foo Bar',
tabBar: {
icon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={{width: 26, height: 26, tintColor: tintColor}}
/>
),
}
};
...
I really hope that some code help you...
if you until do not work if the codes bellow, please see this other code:
UPDATE
//Package json
//change "react-navigation-material-bottom-tabs": "0.1.2"
import React, {Component} from 'react';
import {View,
Text,
StyleSheet,
//use SafeAreaView to move the images away from the top of the phone
SafeAreaView,
Image} from 'react-native';
import {createMaterialBottomTabNavigator} from 'react-navigation-material-bottom-tabs';
import {createMaterialTopTabNavigator} from 'react-navigation'
//imports the icons
import Icon from 'react-native-vector-icons/Ionicons'
export default class App extends Component{
render(){
return(
<SafeAreaView style = {{ flex: 1, backgroundColor: '#f2f2f2'}} >
<AppTabNavigator/>
</SafeAreaView>
)
}
}
//homescreen and the text that is displayed on that page
class HomeScreen extends Component {
render() {
return(
<View style = {styles.container}>
<Text>Welcome to my Navigator! </Text>
</View>
);
}
}
//MyPage and the text that is displayed on that page
class MyPage extends Component {
render() {
return(
<View style = {styles.container}>
<Text>My Page </Text>
</View>
);
}
}
//settings and the text that is displayed on that page
class SettingsScreen extends Component {
render() {
return(
<View style = {styles.container}>
<Text>Settings </Text>
</View>
);
}
}
//settings and the text that is displayed on that page
class ProfileScreen extends Component {
render() {
return(
<View style = {styles.container}>
<Text>Profile </Text>
</View>
);
}
}
//ceated a topTabNavigator then moved the buttons to the bottom
const AppTabNavigator = createMaterialTopTabNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon: ({tintColor}) => (
<Icon name="ios-home" color = {tintColor} size = {24}/>
)
}
},
Settings: {
screen: SettingsScreen,
navigationOptions: {
tabBarLabel: 'Settings',
tabBarIcon: ({tintColor}) => (
<Icon name="ios-settings" color = {tintColor} size = {24}/>
)
}
},
Profile: {
screen: ProfileScreen,
navigationOptions: {
tabBarLabel: 'Profile',
tabBarIcon: ({tintColor}) => (
// <Icon name="ios-profile" color = {tintColor} size = {24}/>
<Image
source={require('./assets/snack-icon.png')}
style={{
marginLeft: 1,
marginTop: 1,
width: 25,
height: 25,
tintColor: '#FF3D00',
}}
/>
)
}
},
MyPage: {
screen: MyPage,
navigationOptions: {
tabBarLabel: 'Page',
tabBarIcon: ({tintColor}) => (
<Icon name = "ios-body" color = {tintColor} size = {24} />
)
}
}
},
{
//starts the program on Home Screen
initialRouteName: 'Home',
//orders the screens
//order: ['Settings', 'Home'],
//puts a color when that screen is activated in the tabs
//activeTintColor: 'white',
//Allows for icons(only) to appear on inactive tabs when you have more than 3 tabs
shifting: true,
tabBarPosition: 'top',
// swipeEnabled: true,
// animationEnabled: false,
tabBarOptions: {
activeTintColor: 'red',
inactiveTintColor: 'grey',
style: {
backgroundColor: 'pink',
borderTopWidth: 0.5,
borderTopColor: 'grey'
},
// indicatorStyle: {
// height: 0
// },
showIcon: true
}
})
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
the code to help you is this:
Profile: {
screen: ProfileScreen,
navigationOptions: {
tabBarLabel: 'Profile',
tabBarIcon: ({tintColor}) => (
// <Icon name="ios-profile" color = {tintColor} size = {24}/>
<Image
source={require('./assets/snack-icon.png')}
style={{
marginLeft: 1,
marginTop: 1,
width: 25,
height: 25,
tintColor: '#FF3D00',
}}
/>
)
}
},
I am using react native and i want to call a function in tabs
import {createBottomTabNavigator} from 'react-navigation-tabs';
const TabNavigator = createBottomTabNavigator(
{
Home:{
screen:CustomMapView,
navigationOptions:{
tabBarLabel:'Home',
tabBarIcon:({tintColor})=>(
<Image source = {require("../../Images/react-logo.png")} style={{width : 30 , height:30}}/>
)
}
}, Profile11:{
screen:Profile11,
navigationOptions:{
tabBarLabel:'Profile11',
tabBarIcon:({tintColor})=>(
<Image source = {require("../../Images/react-logo.png")} style={{width : 30 , height:30}}/>
)
}
},
Profile: {
screen:ProfileScreen,
navigationOptions:{
tabBarLabel:'Profile',
tabBarIcon:({tintColor})=>(
// <Icon name="ios-person" color={tintColor} size={25}/>
<Image source = {require("../../Images/react-logo.png")} style={{width : 30 , height:30}}/>
)
}
},
},
{
initialRouteName: "Home"
},
);
As i am using above i want to set some contions on tabs like home if condition true run set CustomMapView as the screen if condition false any other screen will set like CustomMapView.js
how can i do this
Check this example if you want to set a condition for rendering page:
const MainApp = createBottomTabNavigator(
{
Home: HomeTab ,
Settings: SettingsTab ,
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
if (routeName === 'Home') {
return (
<Image
source={ require('./assets/home.png') }
style={{ width: 20, height: 20, }} />
);
} else {
return (
<Image
source={ require('./assets/settings.png') }
style={{ width: 20, height: 20 }} />
);
}
},
}),
tabBarOptions: {
activeTintColor: '#FF6F00',
inactiveTintColor: '#263238',
},
});
And if you want to call a method on tab press, then refer this example :
Profile: {
screen:ProfileScreen,
navigationOptions:{
tabBarLabel:'Profile',
tabBarIcon:({tintColor})=>(
// <Icon name="ios-person" color={tintColor} size={25}/>
<Image source = {require("../../Images/react-logo.png")} style={{width : 30 , height:30}}/>
),
tabBarOnPress: () => { this.openGallery() }
}
},
import React from "react";
import { Image } from "react-native";
import { createMaterialTopTabNavigator } from "react-navigation-tabs";
import { createAppContainer } from "react-navigation";
import Profile from "../components/Profile/Profile";
import Trips from "../components/Trips/MyTrips";
import Wallet from "../components/Wallet/Wallet";
import Booking from "../components/Booking/Booking";
import Summary from "../components/Summary/Summary";
import Colors from "../Shared/Colors";
bottomBarConfig = {
Summary: {
screen: Summary,
navigationOptions: {
tabBarIcon: ({ focused }) => {
return (
<Image
source={
focused
? require("./../assets/images/home_active.png")
: require("./../assets/images/home_notactive.png")
}
size={25}
color={focused ? Colors.Primary : "#808080"}
/>
);
},
title: "Home"
}
},
Trips: {
screen: Trips,
navigationOptions: {
tabBarIcon: ({ focused }) => {
return (
<Image
source={
focused
? require("./../assets/images/mytrips_active.png")
: require("./../assets/images/mytrips_notactive.png")
}
size={25}
color={focused ? Colors.Primary : "#808080"}
/>
);
},
style: {}
}
},
Booking: {
screen: () => null,
navigationOptions: {
tabBarIcon: ({ focused }) => {
return (
<Image
source={require("./../assets/images/book.png")}
size={55}
style={{ height: 120 }}
color={focused ? Colors.Primary : "#808080"}
/>
);
},
showLabel: false,
gesturesEnabled: false
}
},
Wallet: {
screen: Wallet,
navigationOptions: {
tabBarIcon: ({ focused }) => {
return (
<Image
source={
focused
? require("./../assets/images/mywallet_active.png")
: require("./../assets/images/mywallet_notactive.png")
}
size={25}
color={focused ? Colors.Primary : "#808080"}
/>
);
}
}
},
Profile: {
screen: Profile,
navigationOptions: {
tabBarIcon: ({ focused }) => {
return (
<Image
source={
focused
? require("./../assets/images/more_active.png")
: require("./../assets/images/more_notactive.png")
}
size={25}
color={focused ? Colors.Primary : "#ff00ff"}
/>
);
}
}
}
};
const TabNavigator = createMaterialTopTabNavigator(bottomBarConfig, {
tabBarPosition: "bottom",
tabBarOptions: {
showIcon: true,
upperCaseLabel: false,
activeTintColor: Colors.Primary,
inactiveTintColor: "gray",
pressColor: Colors.Primary,
style: {
backgroundColor: "white",
border: "none"
},
labelStyle: {
fontSize: 10,
fontFamily: "Montserrat-Regular"
},
indicatorStyle: {
backgroundColor: Colors.Primary
}
}
});
const App = createAppContainer(TabNavigator);
export default App;
This is a photo of what I want to execute(not what I have right now), bottom bar with big button in the middle.
For that I created screen for it and I will remove the label and style the image. But the problem I want user when swipes from tab 2 to tab 3 he actually goes to tab 4 not 3. I want this button to take user to another route.
So I want tab 3 to be skippable, no screen for it, I want it as just a button.
I am using create createMaterialTopTabNavigator because it has swipe feature and I already configured it to be positioned in bottom and I will be editing style of button in middle, just need to make skippable.
I've pretty much taken the sample code from the TabNavigator documentation and the icon's/images simply don't appear on iOS or Android. Even the label override doesn't seem to take effect. What am I doing wrong?
Here's the link to the docs I've been using:
https://reactnavigation.org/docs/navigators/tab
Here's my code:
class MyHomeScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Not displayed',
// Note: By default the icon is only shown on iOS. Search the showIcon option below.
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('Notifications')}
title="Go to notifications"
/>
);
}
}
class MyNotificationsScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Notifications',
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./notif-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 26,
height: 26,
},
});
const MyApp = TabNavigator({
Displayed: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
}, {
tabBarOptions: {
activeTintColor: '#e91e63',
},
});
Alright, I finally figured it out after wanting to slam my face into the keyboard.
The title and tab bar icon is actually a different structure to what's inside the docs.
const MyApp = TabNavigator({
Displayed: {
screen: MyHomeScreen,
navigationOptions: {
title: 'Favorites',
tabBar: {
icon: ({tintColor}) => (<Image
source={require('./chats-icon.png')}
style={{width: 26, height: 26, tintColor: tintColor}}
/>)
},
},
},
...
or
class MyHomeScreen extends React.Component {
static navigationOptions = {
title: 'Foo Bar',
tabBar: {
icon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={{width: 26, height: 26, tintColor: tintColor}}
/>
),
}
};
...
As for react-navigation-tabs v2.6.2 is it now as described in the doc.
To update the old example, you have to replace tabBar: { icon: ... } by tabBarIcon: ...
e.g.
class MyHomeScreen extends React.Component {
static navigationOptions = {
title: 'Foo Bar',
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={{width: 26, height: 26, tintColor: tintColor}}
/>
)
};
I was searching for answers in stack overflow while answer was in documentation itself. For using images as icon in react-native bottom tab. This is according to current React Navigation 4.x.
const tabNavigator = createBottomTabNavigator({
Style: HomeScreen,
Location: LocationScreen,
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
if (routeName === 'Style') {
return <Image
source={require('./screens/assets/notifications.png')}
style={{ height: 25, width: 25, tintColor: tintColor }}
/>;
} else if (routeName === 'Location') {
return <Image
source={require('./screens/assets/location.png')}
style={{ height: 35, width: 35, tintColor: tintColor }}
/>;
}
},
}),
tabBarOptions: {
activeTintColor: 'tomato', //For changing tint colors
inactiveTintColor: 'gray',
},
}
),
You can find additional info here.
Got the same problem, but this solution didn't worked for me. Invalid Key 'tabBar' defined in navigation options...
Edit:
Got it working when I removed the tabBarOptions from my tab navigator.
instead used the activeTintColor and inactiveTintColor as the props of TabBarBottom.