This repository has been archived by the owner on Feb 8, 2020. It is now read-only.
generated from satya164/typescript-template
/
HeaderConfig.tsx
79 lines (76 loc) · 2.31 KB
/
HeaderConfig.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import * as React from 'react';
import {
// @ts-ignore
ScreenStackHeaderConfig,
// @ts-ignore
ScreenStackHeaderRightView,
// eslint-disable-next-line import/no-unresolved
} from 'react-native-screens';
import { Route, useTheme } from '@react-navigation/native';
import { NativeStackNavigationOptions } from '../types';
type Props = NativeStackNavigationOptions & {
route: Route<string>;
};
export default function HeaderConfig(props: Props) {
const { colors } = useTheme();
const {
route,
title,
headerRight,
headerTitle,
headerBackTitle,
headerBackTitleVisible = true,
headerHideBackButton,
headerHideShadow,
headerTintColor,
headerLargeTitle,
headerTranslucent,
headerStyle = {},
headerTitleStyle = {},
headerLargeTitleStyle = {},
headerBackTitleStyle = {},
headerShown,
gestureEnabled,
} = props;
return (
<ScreenStackHeaderConfig
hidden={headerShown === false}
translucent={headerTranslucent === true}
hideShadow={headerHideShadow}
hideBackButton={headerHideBackButton}
title={
headerTitle !== undefined
? headerTitle
: title !== undefined
? title
: route.name
}
titleFontFamily={headerTitleStyle.fontFamily}
titleFontSize={headerTitleStyle.fontSize}
titleColor={
headerTitleStyle.color !== undefined
? headerTitleStyle.color
: headerTintColor !== undefined
? headerTintColor
: colors.text
}
backTitle={headerBackTitleVisible ? headerBackTitle : ''}
backTitleFontFamily={headerBackTitleStyle.fontFamily}
backTitleFontSize={headerBackTitleStyle.fontSize}
color={headerTintColor !== undefined ? headerTintColor : colors.primary}
gestureEnabled={gestureEnabled === undefined ? true : gestureEnabled}
largeTitle={headerLargeTitle}
largeTitleFontFamily={headerLargeTitleStyle.fontFamily}
largeTitleFontSize={headerLargeTitleStyle.fontSize}
backgroundColor={
headerStyle.backgroundColor !== undefined
? headerStyle.backgroundColor
: colors.card
}
>
{headerRight !== undefined ? (
<ScreenStackHeaderRightView>{headerRight()}</ScreenStackHeaderRightView>
) : null}
</ScreenStackHeaderConfig>
);
}