-
-
Notifications
You must be signed in to change notification settings - Fork 5k
/
CustomTabs.tsx
139 lines (128 loc) · 3.27 KB
/
CustomTabs.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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
import React from 'react';
import { ScrollView, StatusBar, StyleSheet, Text } from 'react-native';
import { BorderlessButton } from 'react-native-gesture-handler';
import {
createNavigator,
NavigationState,
SafeAreaView,
TabRouter,
Themed,
useTheme,
createAppContainer,
NavigationScreenProp,
} from 'react-navigation';
import { Button } from './commonComponents/ButtonWithMargin';
import SampleText from './SampleText';
const MyNavScreen = ({
navigation,
banner,
}: {
navigation: NavigationScreenProp<NavigationState>;
banner: string;
}) => (
<ScrollView>
<SafeAreaView forceInset={{ horizontal: 'always' }}>
<SampleText>{banner}</SampleText>
<Button
onPress={() => {
navigation.goBack(null);
}}
title="Go back"
/>
</SafeAreaView>
<Themed.StatusBar />
</ScrollView>
);
const MyHomeScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => <MyNavScreen banner="Home Screen" navigation={navigation} />;
const MyNotificationsScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => <MyNavScreen banner="Notifications Screen" navigation={navigation} />;
const MySettingsScreen = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => <MyNavScreen banner="Settings Screen" navigation={navigation} />;
const CustomTabBar = ({
navigation,
}: {
navigation: NavigationScreenProp<NavigationState>;
}) => {
const { routes } = navigation.state;
return (
<SafeAreaView style={styles.tabContainer}>
{routes.map(route => (
<BorderlessButton
onPress={() => navigation.navigate(route.routeName)}
style={styles.tab}
key={route.routeName}
>
<Themed.Text>{route.routeName}</Themed.Text>
</BorderlessButton>
))}
</SafeAreaView>
);
};
// @todo - how does the type definition for a custom navigator work?
class CustomTabView extends React.Component<any> {
render() {
const { navigation, descriptors } = this.props;
const { routes, index } = navigation.state;
const descriptor = descriptors[routes[index].key];
const ActiveScreen = descriptor.getComponent();
return (
<SafeAreaView forceInset={{ top: 'always' }}>
<CustomTabBar navigation={navigation} />
<ActiveScreen navigation={descriptor.navigation} />
</SafeAreaView>
);
}
}
const CustomTabRouter = TabRouter(
{
Home: {
path: '',
screen: MyHomeScreen,
},
Notifications: {
path: 'notifications',
screen: MyNotificationsScreen,
},
Settings: {
path: 'settings',
screen: MySettingsScreen,
},
},
{
// Change this to start on a different tab
initialRouteName: 'Home',
}
);
const CustomTabs = createAppContainer(
createNavigator(CustomTabView, CustomTabRouter, {})
);
const styles = StyleSheet.create({
tab: {
alignItems: 'center',
borderColor: '#ddd',
borderRadius: 4,
borderWidth: 1,
flex: 1,
justifyContent: 'center',
margin: 4,
},
tabContainer: {
flexDirection: 'row',
height: 48,
},
});
export default () => {
// Need to thread the theme through to detached nested navigator
let theme = useTheme();
return <CustomTabs detached theme={theme} />;
};