-
-
Notifications
You must be signed in to change notification settings - Fork 5k
/
MaterialBottomTabs.tsx
75 lines (70 loc) · 1.98 KB
/
MaterialBottomTabs.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
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import type { NavigatorScreenParams } from '@react-navigation/native';
import * as React from 'react';
import { StyleSheet } from 'react-native';
import Albums from '../Shared/Albums';
import Chat from '../Shared/Chat';
import Contacts from '../Shared/Contacts';
import SimpleStackScreen, { SimpleStackParams } from './SimpleStack';
type MaterialBottomTabParams = {
TabStack: NavigatorScreenParams<SimpleStackParams>;
TabAlbums: undefined;
TabContacts: undefined;
TabChat: undefined;
};
const MaterialBottomTabs =
createMaterialBottomTabNavigator<MaterialBottomTabParams>();
export default function MaterialBottomTabsScreen() {
return (
<MaterialBottomTabs.Navigator barStyle={styles.tabBar}>
<MaterialBottomTabs.Screen
name="TabStack"
options={{
tabBarLabel: 'Article',
tabBarIcon: 'file-document',
tabBarColor: '#C9E7F8',
}}
>
{(props) => (
<SimpleStackScreen
{...props}
screenOptions={{ headerShown: false }}
/>
)}
</MaterialBottomTabs.Screen>
<MaterialBottomTabs.Screen
name="TabChat"
component={Chat}
options={{
tabBarLabel: 'Chat',
tabBarIcon: 'message-reply',
tabBarColor: '#9FD5C9',
tabBarBadge: true,
}}
/>
<MaterialBottomTabs.Screen
name="TabContacts"
component={Contacts}
options={{
tabBarLabel: 'Contacts',
tabBarIcon: 'contacts',
tabBarColor: '#F7EAA2',
}}
/>
<MaterialBottomTabs.Screen
name="TabAlbums"
component={Albums}
options={{
tabBarLabel: 'Albums',
tabBarIcon: 'image-album',
tabBarColor: '#FAD4D6',
}}
/>
</MaterialBottomTabs.Navigator>
);
}
const styles = StyleSheet.create({
tabBar: {
backgroundColor: 'white',
},
});