expo-custom-navigation
Version:
custom navigation for your expo project
54 lines (53 loc) • 4.15 kB
JavaScript
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from "@react-navigation/native";
import { Home, About, Contact } from '../screens';
import { defaultHeaderStyle, defaultHeaderTitleStyle, defaultItemStyle } from '../utils/functions';
import React from 'react';
const BottomTabNav = createBottomTabNavigator();
const BottomTabs = (props) => {
const { isNested, navigationRef, items, header, headerStyle, style, itemStyle, labelPosition, showLabel, labelStyle, iconStyle, badgeStyle, hideOnKeyboard } = props;
const options = ({ navigation }) => ({
header: header,
headerStyle: defaultHeaderStyle(headerStyle),
headerTitleStyle: defaultHeaderTitleStyle(headerStyle),
headerShown: headerStyle === null || headerStyle === void 0 ? void 0 : headerStyle.showHeader,
headerTintColor: headerStyle === null || headerStyle === void 0 ? void 0 : headerStyle.color,
headerTitleAlign: (headerStyle === null || headerStyle === void 0 ? void 0 : headerStyle.textAlign) === 'left' ? 'left' : (headerStyle === null || headerStyle === void 0 ? void 0 : headerStyle.textAlign) === 'center' ? 'center' : undefined,
headerTitle: (headerStyle === null || headerStyle === void 0 ? void 0 : headerStyle.showText) === false ? '' : undefined,
headerTitleContainerStyle: (headerStyle === null || headerStyle === void 0 ? void 0 : headerStyle.textAlign) === 'right' ? { width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'flex-end' } : undefined,
tabBarStyle: style,
tabBarItemStyle: defaultItemStyle(itemStyle),
tabBarActiveBackgroundColor: itemStyle === null || itemStyle === void 0 ? void 0 : itemStyle.activeBgColor,
tabBarActiveTintColor: itemStyle === null || itemStyle === void 0 ? void 0 : itemStyle.activeColor,
tabBarInactiveBackgroundColor: itemStyle === null || itemStyle === void 0 ? void 0 : itemStyle.BgColor,
tabBarInactiveTintColor: itemStyle === null || itemStyle === void 0 ? void 0 : itemStyle.color,
tabBarLabelPosition: labelPosition,
tabBarShowLabel: showLabel,
tabBarLabelStyle: labelStyle,
tabBarIconStyle: iconStyle,
tabBarBadgeStyle: badgeStyle,
tabBarHideOnKeyboard: hideOnKeyboard,
});
return (isNested ?
<BottomTabNav.Navigator screenOptions={options}>
{items ?
items.map((item, ind) => <BottomTabNav.Screen key={(item === null || item === void 0 ? void 0 : item.id) ? item.id : ind} name={item.name} options={{ headerShown: item === null || item === void 0 ? void 0 : item.showDefaultHeader, tabBarIcon: item === null || item === void 0 ? void 0 : item.icon, tabBarBadge: item === null || item === void 0 ? void 0 : item.counterBadge, tabBarBadgeStyle: badgeStyle }} component={item.screen}/>) :
<>
<BottomTabNav.Screen name='Home' component={Home}/>
<BottomTabNav.Screen name='About' component={About}/>
<BottomTabNav.Screen name='Contact' component={Contact}/>
</>}
</BottomTabNav.Navigator> :
<NavigationContainer ref={navigationRef}>
<BottomTabNav.Navigator screenOptions={options}>
{items ?
items.map((item, ind) => <BottomTabNav.Screen key={(item === null || item === void 0 ? void 0 : item.id) ? item.id : ind} name={item.name} options={{ headerShown: item === null || item === void 0 ? void 0 : item.showDefaultHeader, tabBarIcon: item === null || item === void 0 ? void 0 : item.icon, tabBarBadge: item === null || item === void 0 ? void 0 : item.counterBadge, tabBarBadgeStyle: badgeStyle }} component={item.screen}/>) :
<>
<BottomTabNav.Screen name='Home' component={Home}/>
<BottomTabNav.Screen name='About' component={About}/>
<BottomTabNav.Screen name='Contact' component={Contact}/>
</>}
</BottomTabNav.Navigator>
</NavigationContainer>);
};
export default BottomTabs;