expo-custom-navigation
Version:
custom navigation for your expo project
44 lines (43 loc) • 3.08 kB
JavaScript
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { NavigationContainer } from "@react-navigation/native";
import { Home, About, Contact } from '../screens';
import React from 'react';
const TopTabsNav = createMaterialTopTabNavigator();
const TopTabs = (props) => {
const { isNested, items, lazy, swipeEnabled, activeColor, inactiveColor, contentStyle, itemStyle, labelStyle, style, pressColor, pressOpacity, indicatorStyle, scrollEnabled, bounce, iconStyle, customTabs, position, orientation } = props;
const options = ({ navigation }) => ({
lazy: lazy,
swipeEnabled: swipeEnabled,
tabBarActiveTintColor: activeColor,
tabBarBounces: bounce,
tabBarContentContainerStyle: contentStyle,
tabBarInactiveTintColor: inactiveColor,
tabBarIndicatorStyle: indicatorStyle,
tabBarItemStyle: itemStyle,
tabBarLabelStyle: labelStyle,
tabBarStyle: style,
tabBarPressColor: pressColor,
tabBarPressOpacity: pressOpacity,
tabBarScrollEnabled: scrollEnabled,
});
return (isNested ?
<TopTabsNav.Navigator screenOptions={options} tabBar={customTabs} tabBarPosition={position} orientation={orientation}>
{items ? items.map((item, ind) => <TopTabsNav.Screen key={(item === null || item === void 0 ? void 0 : item.id) ? item.id : ind} name={item.name} options={{ tabBarBadge: item === null || item === void 0 ? void 0 : item.badge, tabBarIcon: item === null || item === void 0 ? void 0 : item.icon, tabBarShowIcon: item === null || item === void 0 ? void 0 : item.showIcon, tabBarShowLabel: item === null || item === void 0 ? void 0 : item.showLabel, tabBarIconStyle: iconStyle }} component={item.screen}/>) :
<>
<TopTabsNav.Screen name='Home' component={Home}/>
<TopTabsNav.Screen name='About' component={About}/>
<TopTabsNav.Screen name='Contact' component={Contact}/>
</>}
</TopTabsNav.Navigator> :
<NavigationContainer>
<TopTabsNav.Navigator screenOptions={options} tabBar={customTabs} tabBarPosition={position} orientation={orientation}>
{items ? items.map((item, ind) => <TopTabsNav.Screen key={(item === null || item === void 0 ? void 0 : item.id) ? item.id : ind} name={item.name} options={{ tabBarBadge: item === null || item === void 0 ? void 0 : item.badge, tabBarIcon: item === null || item === void 0 ? void 0 : item.icon, tabBarShowIcon: item === null || item === void 0 ? void 0 : item.showIcon, tabBarShowLabel: item === null || item === void 0 ? void 0 : item.showLabel, tabBarIconStyle: iconStyle }} component={item.screen}/>) :
<>
<TopTabsNav.Screen name='Home' component={Home}/>
<TopTabsNav.Screen name='About' component={About}/>
<TopTabsNav.Screen name='Contact' component={Contact}/>
</>}
</TopTabsNav.Navigator>
</NavigationContainer>);
};
export default TopTabs;