Custom tabs Styling on React Navigation - reactjs

Question

I'm developing an app using React-Native (Expo) with React-Navigation module. I'm struggling to get what I want for "createBottomTabBar" styling and working on a custom tab bar component.
Where can I learn/find examples similar to this? Is my code correct?
I am using this: Border bottom on Bottom Navigation in React Native and this video: https://www.youtube.com/watch?v=w24FE9PZpzk
But I don't know how to get any further.
Router/index.js
import { createSwitchNavigator,createStackNavigator, createBottomTabNavigator, createDrawerNavigator, createAppContainer } from 'react-navigation';
import { Home, SignUpScreen, LoginScreen, ForgotPasswordScreen, Setting, AboutScreen, ScanFlight, FlightDetails, ChatList, ChatMessages, FriendList, exploreProfile, myProfile, FlightAdd, Notifications,Achievements } from '../Screens';
// Tab bar Custom Component
import appBottomTabs from '../NavigationLayout/bottomTabBar'
// Bottom Tab navigation
const MainTabNavigator = createBottomTabNavigator({
Home,
ChatList,
ScanFlight
}, {
tabBarOptions: {
activeTintColor: "#6200EE",
inactiveTintColor: "#858585",
style: {
paddingVertical: 10,
backgroundColor: "#fff",
border: '#ffffff'
},
labelStyle: {
fontSize: 14,
lineHeight: 16,
fontFamily: "Rubik_Regular"
},
tabBarPosition: "bottom",
tabBarComponent: appBottomTabs,
animationEnabled: true,
swipeEnabled: true,
unmountInactiveRoutes: true
}
});
// Drawer Navigation
const appDrawerNavigator = createDrawerNavigator({
Home: {screen: MainTabNavigator},
Login: LoginScreen,
SignUp: SignUpScreen,
ForgotPassword: ForgotPasswordScreen,
Settings: Setting,
About: AboutScreen,
FlightDetails: FlightDetails,
FlightAdd: FlightAdd,
}, {
unmountInactiveRoutes: true
});
const AppLoginNavigator = createSwitchNavigator({
LoginScreen,
ForgotPasswordScreen,
appDrawerNavigator: {
screen: appDrawerNavigator
},
appStackNavigator: {
screen: appStackNavigator
}
});
const AppContainer = createAppContainer(AppLoginNavigator);
class App extends Component {
render() {
return (
<AppContainer />
);
}
}
export default App;
NavigationLayout/bottomTabBar.js
import React, {Component} from 'react'
import {View, TouchableWithoutFeedback, Text, StyleSheet} from 'react-native'
class appBottomTabs extends Component {
constructor(){
super()
this.state = {
routeNameSelected:'Home'
}
}
onPressTab(routeName){
this.props.jumpTo(routeName)
this.setState({
routeNameSelected:routeName
})
}
render() {
const {navigation} = this.props;
const {routes} = navigation.state;
return (
<View style={styles.tabbar}>
{routes && routes.map((route, index) => {
return (
<TouchableWithoutFeedback
key={route.key}
style={styles.tab}
onPress={() => this.onPressTab(route.routeName)}
>
</TouchableWithoutFeedback>
);
})}
</View>
)
}
}
export default appBottomTabs;
This is the layout I'm aiming to achieve: https://postimg.cc/Mfc5HxPs
with the active link having bigger font size and a border bottom.

Answer 1

So you need to use defaultNavigationOptions in createBottomTabNavigator.
defaultNavigationOptions takes in a function/react component where you can return you component.
For example
const renderNav = (routeName, name, tintColor, focused) => (
<View style={{flex: 1, alignItems: 'center', borderBottomColor: focused ? tintColor: '', borderBottomWidth: focused ? 4 : 0}}>
<Icon name={name} color={tintColor} size={12} style={{paddingBottom: 4, paddingTop: 10}} />
<Text style={{paddingBottom: 8}}>{routeName}</Text>
</View>
)
const customTabs = ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
if (routeName === 'Profile') {
return renderNav(routeName, 'user', tintColor, focused);
} else if (routeName === 'Home') {
return renderNav(routeName, 'home', tintColor, focused);
} else if (routeName === 'History') {
return renderNav(routeName, 'history', tintColor, focused);
} else if (routeName === 'Cart') {
return renderNav(routeName, 'shopping-cart', tintColor, focused);
}
}
});
const DashboardTabNav = createBottomTabNavigator({
Profile: {
screen: ProfileScreen
},
Home: Dashboard,
History: SettingsScreen,
Cart: CartScreen
},
{
defaultNavigationOptions: customTabs,
animationEnabled: true,
swipeEnabled: true,
tabBarPosition: 'bottom',
initialRouteName: 'Cart',
tabBarOptions: {
activeTintColor: '#6C1D7C',
inactiveTintColor: 'rgba(0,0,0,0.6)',
showLabel: false,
style:{
shadowColor: 'rgba(58,55,55,0.1)',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 1,
shadowRadius: 15,
elevation: 3,
borderTopColor: 'transparent',
backgroundColor:'#fff',
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
height: 50
},
activeTabStyle: {
backgroundColor: 'white',
borderBottomWidth: 4,
borderColor: '#6C1D7C'
}
},
});