React-navigation: how to style a big middle button in tab navigation? - react-native

Question

So I have this requirement. To make tab navigation with this exact appearance:
I had no problem styling the tab bar with the gradient and the buttons. I created my own custom one with this code:
export default createBottomTabNavigator({
(... routes here)
}, {
initialRouteName: "Inspiration",
tabBarComponent: props => <BottomTabBar {...props} />
})
But now I'm having trouble with the middle button. My bar looks like this:
If I remove the custom tab bar removing this line:
tabBarComponent: props => <BottomTabBar {...props} />
Then now my middle button looks how it should, but of course, all of the other styles are missing:
This is how my BottomTabBar component looks right now:
import React from "react";
import { Image, StyleSheet, Text, TouchableOpacity } from "react-native";
import { TabBarBottomProps, NavigationRoute } from "react-navigation";
import LinearGradient from "react-native-linear-gradient";
const iconBag = require("./images/bag.png");
export default function BottomTabBar(props: TabBarBottomProps) {
const {
renderIcon,
getLabelText,
activeTintColor,
inactiveTintColor,
onTabPress,
onTabLongPress,
getAccessibilityLabel,
navigation
} = props;
const { routes, index: activeRouteIndex } = navigation.state;
function renderTabBarButton(routeIndex, route) {
const isRouteActive = routeIndex === activeRouteIndex;
const tintColor = isRouteActive ? activeTintColor : inactiveTintColor;
if (route.key == "Bag")
return <Image style={{ width: 100, height: 100 }} source={iconBag} />;
return (
<TouchableOpacity
key={routeIndex}
style={styles.tabButton}
onPress={() => onTabPress({ route })}
onLongPress={() => onTabLongPress({ route })}
accessibilityLabel={getAccessibilityLabel({ route })}
>
{renderIcon({ route, focused: isRouteActive, tintColor })}
<Text style={styles.tabText}>{getLabelText({ route })}</Text>
</TouchableOpacity>
);
}
return (
<LinearGradient colors={["#FFFFFF", "#DEDEDE"]} style={styles.container}>
{routes.map((route, routeIndex) => renderTabBarButton(routeIndex, route))}
</LinearGradient>
);
}
const styles = StyleSheet.create({
container: {
height: 60,
flexDirection: "row",
alignItems: "center",
borderWidth: 1,
borderColor: "#C4C4C4"
},
tabButton: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
tabText: {
fontFamily: "Source Sans Pro",
fontSize: 11,
color: "#454545",
marginTop: 1
}
});
What can I do? Any help will be really much appreciated!

Answer 1

You can try my solution
const TabNavigator = createBottomTabNavigator(
{
Top: {
screen: HomeScreen,
navigationOptions: {
tabBarIcon: ({tintColor}) => (
<Image
source={require('./src/assets/ic_list.png')}
style={{width: 24, height: 24, tintColor: tintColor}}
/>
),
},
},
New: {
screen: HomeScreen,
navigationOptions: {
tabBarIcon: ({tintColor}) => (
<Image
source={require('./src/assets/ic_clock.png')}
style={{width: 24, height: 24, tintColor: tintColor}}
/>
),
},
},
Ask: { // big plus icon in the middle
screen: HomeScreen,
navigationOptions: {
tabBarIcon: ({tintColor}) => (
<View
style={{
position: 'absolute',
bottom: 20, // space from bottombar
height: 58,
width: 58,
borderRadius: 58,
backgroundColor: '#5a95ff',
justifyContent: 'center',
alignItems: 'center',
}}>
<Image
source={require('./src/assets/ic_add_24.png')}
style={{
width: 40,
height: 40,
tintColor: '#f1f6f9',
alignContent: 'center',
}}
/>
</View>
),
},
},
Show: {
screen: HomeScreen,
navigationOptions: {
tabBarIcon: ({tintColor}) => (
<Image
source={require('./src/assets/ic_notification.png')}
style={{width: 24, height: 24, tintColor: tintColor}}
/>
),
},
},
Jobs: {
screen: HomeScreen,
navigationOptions: {
tabBarIcon: ({tintColor}) => (
<Image
source={require('./src/assets/ic_person.png')}
style={{width: 24, height: 24, tintColor: tintColor}}
/>
),
},
},
},
{
tabBarOptions: {
activeTintColor: '#FF6F00',
inactiveTintColor: '#8997B0',
showIcon: true,
showLabel: false,
style: {
backgroundColor: '#f1f6f9',
},
},
},
);

Answer 2

I made this bottom tab with react native. I think your design is very simple. My code sample will help you I think.
import React from 'react';
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';
import { View, Image } from 'react-native'
import { Text } from 'native-base';
import Featured from './featured';
import AboutUs from './about_us';
import Shop from './shop';
import Booking from './booking';
import Settings from './settings';
import styles from './styles';
import star from './../../assets/images/icons/star.png';
import star_check from './../../assets/images/icons/star_check.png';
import about from './../../assets/images/icons/about.png';
import about_check from './../../assets/images/icons/about_check.png';
import book from './../../assets/images/icons/book.png';
import check from './../../assets/images/icons/check.png';
import shop from './../../assets/images/icons/shop.png';
import shop_check from './../../assets/images/icons/shop_check.png';
import more from './../../assets/images/icons/more.png';
import more_check from './../../assets/images/icons/more_check.png';
const Tabs = createBottomTabNavigator(
{
Featured: {
screen: Featured,
navigationOptions: {
title: 'Featured',
tabBarIcon: ({ tintColor, focused }) => (
<View style={styles.tab}>
<Image source={focused? star_check : star} style={styles.icon} />
<Text style={[styles.name, {color: tintColor}]}>Kampanjer</Text>
</View>
)
}
},
AboutUs: {
screen: AboutUs,
navigationOptions: {
title: 'About Us',
tabBarIcon: ({ tintColor, focused }) => (
<View style={styles.tab}>
<Image source={focused? about_check : about} style={styles.icon} />
<Text style={[styles.name, {color: tintColor}]}>Om oss</Text>
</View>
)
}
},
Booking: {
screen: Booking,
navigationOptions: {
title: 'MIN SALONG',
tabBarIcon: ({ tintColor, focused }) => (
<View style={styles.book}>
<Image source={focused? check : book} style={styles.book_icon} />
</View>
)
}
},
Shop: {
screen: Shop,
navigationOptions: {
title: 'Shop',
tabBarIcon: ({ tintColor, focused }) => (
<View style={styles.tab}>
<Image source={focused? shop_check : shop} style={styles.icon} />
<Text style={[styles.name, {color: tintColor}]}>Shop</Text>
</View>
)
}
},
Settings: {
screen: Settings,
navigationOptions: {
title: 'More',
tabBarIcon: ({ tintColor, focused }) => (
<View style={styles.tab}>
<Image source={focused? more_check : more} style={styles.icon} />
<Text style={[styles.name, {color: tintColor}]}>Inställningar</Text>
</View>
)
}
},
},
{
initialRouteName: 'Featured',
tabBarOptions: {
activeTintColor: '#80A0AB',
inactiveTintColor: '#fff',
showLabel: false,
style: {
height: 60,
backgroundColor: '#485155'
},
labelStyle: {
fontSize: 12,
fontFamily: 'Abel-Regular'
}
}
}
);
export default createStackNavigator({Tabs}, {headerMode: "none"});

Answer 3

Try this
<Tab.Navigator
tabBarOptions={{
activeTintColor: 'red',
// activeBackgroundColor:'#000',
//inactiveBackgroundColor:'red',
labelStyle: {
position: 'absolute',
top: constants.vh(35),
fontSize:constants.vh(18),
}
}}
>
<Tab.Screen name='Home' //bottom tab for Home
options={{
tabBarIcon: ({ focused }) => {
let iconName;
iconName = focused ? constants.images.bottomHome : constants.images.bottomHome //for icon or image
return (
<View>
<Image source={iconName} style={{ width: constants.vw(40), height: constants.vh(25) ,position:'absolute',right:constants.vw(-20),bottom:constants.vh(-5)}} resizeMode="contain" />
</View>
)
}
}}
component={HomeScreen} />
</Tab.Navigator>