Usage
If you want to add custom sub-headers to your navigation system, you first have to create custom
navigator-creator functions. You can do so with createBottomTabNavigatorFactory
,
createNativeStackNavigatorFactory
and createStackNavigatorFactory
.
Step 1: Create your custom sub-header:
import { Text } from "react-native";
export const CustomSubHeader = () => <Text>This is a custom sub-header</Text>;
Step 2: Create your new navigator-creator functions:
import {
createBottomTabNavigatorFactory,
createNativeStackNavigatorFactory,
createStackNavigatorFactory,
} from "@equinor/mad-navigation";
import { CustomSubHeader } from "path/to/subHeader";
export const createBottomTabNavigator = createBottomTabNavigatorFactory(CustomSubHeader);
export const createNativeStackNavigator = createNativeStackNavigatorFactory(CustomSubHeader);
export const createStackNavigator = createStackNavigatorFactory(CustomSubHeader);
Follow React Navigation’s documentation. When you get to the point where you are creating a navigator, import your custom navigator-creators.
You can also import NavigationContainer
from this package if you need a onRouteChange
prop.
For example:
//import { createNativeStackNavigator } from '@react-navigation/native-stack';
//replace the above line with the line below
import { createNativeStackNavigator } from "path/to/createNativeStackNavigator";
Once you've finished the steps above, you should see your custom sub-header in your application. By
default, the sub-header will display if navigator’s header is displayed. if you want to overwrite
this behaviour, use the custom customSubHeaderShown
option. This option can be applied in the
Screen
’s options
prop, or in the Group
or Navigator
's screenOptions
prop. You can also use
customSubHeaderFloat
if you want the sub header to float above the content instead of pushing the
screen's content down.
<Stack.Navigator
screenOptions={{
// add it here
customSubHeaderShown: false,
customSubHeaderFloat: false,
}}
>
<Stack.Group
screenOptions={{
// or here
customSubHeaderShown: true,
customSubHeaderFloat: true,
}}
>
<Stack.Screen
name="Discover"
component={DiscoverScreen}
options={{
// or here
customSubHeaderShown: false,
customSubHeaderFloat: false,
}}
/>
</Stack.Group>
</Stack.Navigator>
CAUTION: sub-headers will not work properly if headerLargeTitle
is set to true, and
headerLargeTitle
make it hard for elements in your application to calculate header height. It is
therefore not recommended to use headerLargeTitle
. If you still decide to use it, we recommend
disabling sub-headers where it is used, as the sub-headers may cause the header to not work as
expected.
<DiscoverStack.Navigator
initialRouteName="Discover"
screenOptions={{
headerLargeTitle: true,
headerLargeTitleShadowVisible: true,
headerLargeTitleStyle: { fontFamily: "Equinor-Bold" },
headerTitleStyle: {
fontFamily: "Equinor-Regular",
},
headerBackTitleStyle: { fontFamily: "Equinor-Regular" },
customSubHeaderShown: false,
}}
>