expo-custom-navigation
Version:
custom navigation for your expo project
48 lines (47 loc) • 3.35 kB
JavaScript
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { Home, About, Contact } from '../screens';
import { NavigationContainer } from "@react-navigation/native";
import { defaultHeaderStyle, defaultHeaderTitleStyle } from '../utils/functions';
const StackNav = createStackNavigator();
const Stack = (props) => {
const { headerStyle, mode, navigationRef, presentation, header, isNested, items, gestureDirection, gestureEnabled } = props;
const options = ({ navigation }) => {
var _a;
return ({
headerStyle: defaultHeaderStyle(headerStyle),
headerShown: headerStyle === null || headerStyle === void 0 ? void 0 : headerStyle.showHeader,
headerTitle: (headerStyle === null || headerStyle === void 0 ? void 0 : headerStyle.showText) === false ? '' : undefined,
headerTitleStyle: defaultHeaderTitleStyle(headerStyle),
headerTitleAlign: (headerStyle === null || headerStyle === void 0 ? void 0 : headerStyle.textAlign) === 'left' ? 'left' : (headerStyle === null || headerStyle === void 0 ? void 0 : headerStyle.textAlign) === 'center' ? 'center' : undefined,
headerTitleContainerStyle: (headerStyle === null || headerStyle === void 0 ? void 0 : headerStyle.textAlign) === 'right' ? { width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'flex-end' } : undefined,
headerTintColor: headerStyle === null || headerStyle === void 0 ? void 0 : headerStyle.color,
header: header,
headerBackTitle: headerStyle === null || headerStyle === void 0 ? void 0 : headerStyle.backTitle,
headerBackTitleVisible: ((_a = headerStyle === null || headerStyle === void 0 ? void 0 : headerStyle.backTitle) === null || _a === void 0 ? void 0 : _a.length) !== 0 ? true : false,
headerMode: mode,
presentation: presentation,
gestureDirection: gestureDirection,
gestureEnabled: gestureEnabled,
});
};
return (isNested ?
<StackNav.Navigator screenOptions={options}>
{items ? items.map((item, ind) => <StackNav.Screen name={item.name} key={(item === null || item === void 0 ? void 0 : item.id) ? item.id : ind} options={{ headerShown: item === null || item === void 0 ? void 0 : item.showDefaultHeader }} component={item.screen}/>) : <>
<StackNav.Screen name="Home" component={Home}/>
<StackNav.Screen name="About" component={About}/>
<StackNav.Screen name="Contact" component={Contact}/>
</>}
</StackNav.Navigator>
:
<NavigationContainer ref={navigationRef}>
<StackNav.Navigator screenOptions={options}>
{items ? items.map((item, ind) => <StackNav.Screen name={item.name} key={(item === null || item === void 0 ? void 0 : item.id) ? item.id : ind} options={{ headerShown: item === null || item === void 0 ? void 0 : item.showDefaultHeader }} component={item.screen}/>) : <>
<StackNav.Screen name="Home" component={Home}/>
<StackNav.Screen name="About" component={About}/>
<StackNav.Screen name="Contact" component={Contact}/>
</>}
</StackNav.Navigator>
</NavigationContainer>);
};
export default Stack;