feat: add integration for paper's bottom navigation

react-navigation · Aug 8, 2019 · f3b6d1f · f3b6d1f
1 parent d09f936
commit f3b6d1f
Show file tree

Hide file tree

Showing 9 changed files with 169 additions and 127 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -8,7 +8,8 @@
       "@navigation-ex/stack",
       "@navigation-ex/drawer",
       "@navigation-ex/bottom-tabs",
-      "@navigation-ex/material-top-tabs"
+      "@navigation-ex/material-top-tabs",
+      "@navigation-ex/material-bottom-tabs"
     ]
   },
   "env": { "browser": true, "node": true }

diff --git a/packages/example/metro.config.js b/packages/example/metro.config.js
@@ -28,13 +28,15 @@ module.exports = {
 
     providesModuleNodeModules: [
       '@babel/runtime',
+      '@expo/vector-icons',
       '@react-native-community/masked-view',
       'react',
       'react-native',
       'react-native-gesture-handler',
       'react-native-reanimated',
       'react-native-safe-area-view',
       'react-native-screens',
+      'react-native-paper',
       'react-native-tab-view',
       'shortid',
     ],

diff --git a/packages/example/package.json b/packages/example/package.json
@@ -20,12 +20,12 @@
     "@react-native-community/masked-view": "^0.1.1",
     "@expo/vector-icons": "10.0.3",
     "expo": "^34.0.1",
-    "expo-asset": "4.0.0",
+    "expo-asset": "~6.0.0",
     "react": "16.8.3",
     "react-dom": "^16.8.3",
     "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
     "react-native-gesture-handler": "~1.3.0",
-    "react-native-paper": "3.0.0-alpha.3",
+    "react-native-paper": "^3.0.0-alpha.3",
     "react-native-reanimated": "~1.1.0",
     "react-native-screens": "1.0.0-alpha.22",
     "react-native-tab-view": "2.7.1",

diff --git a/packages/example/src/Screens/MaterialBottomTabs.tsx b/packages/example/src/Screens/MaterialBottomTabs.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import createMaterialBottomTabNavigator from '@navigation-ex/material-bottom-tabs';
+import Article from '../Shared/Article';
+import Albums from '../Shared/Albums';
+import Contacts from '../Shared/Contacts';
+import Chat from '../Shared/Chat';
+
+type MaterialBottomTabParams = {
+  article: undefined;
+  albums: undefined;
+  contacts: undefined;
+  chat: undefined;
+};
+
+const MaterialBottomTabs = createMaterialBottomTabNavigator<
+  MaterialBottomTabParams
+>();
+
+export default function MaterialBottomTabsScreen() {
+  return (
+    <MaterialBottomTabs.Navigator barStyle={styles.tabBar}>
+      <MaterialBottomTabs.Screen
+        name="article"
+        component={Article}
+        options={{
+          tabBarLabel: 'Article',
+          tabBarIcon: 'chrome-reader-mode',
+          tabBarColor: '#C9E7F8',
+        }}
+      />
+      <MaterialBottomTabs.Screen
+        name="chat"
+        component={Chat}
+        options={{
+          tabBarLabel: 'Chat',
+          tabBarIcon: 'chat-bubble',
+          tabBarColor: '#9FD5C9',
+          tabBarBadge: true,
+        }}
+      />
+      <MaterialBottomTabs.Screen
+        name="contacts"
+        component={Contacts}
+        options={{
+          tabBarLabel: 'Contacts',
+          tabBarIcon: 'contacts',
+          tabBarColor: '#F7EAA2',
+        }}
+      />
+      <MaterialBottomTabs.Screen
+        name="albums"
+        component={Albums}
+        options={{
+          tabBarLabel: 'Albums',
+          tabBarIcon: 'photo-album',
+          tabBarColor: '#FAD4D6',
+        }}
+      />
+    </MaterialBottomTabs.Navigator>
+  );
+}
+
+const styles = StyleSheet.create({
+  tabBar: {
+    backgroundColor: 'white',
+  },
+});
diff --git a/...ages/example/src/Screens/MaterialTabs.tsx → ...s/example/src/Screens/MaterialTopTabs.tsx b/...ages/example/src/Screens/MaterialTabs.tsx → ...s/example/src/Screens/MaterialTopTabs.tsx
@@ -5,39 +5,39 @@ import Albums from '../Shared/Albums';
 import Contacts from '../Shared/Contacts';
 import Chat from '../Shared/Chat';
 
-type MaterialTabParams = {
+type MaterialTopTabParams = {
   albums: undefined;
   contacts: undefined;
   chat: undefined;
 };
 
-const MaterialTabs = createMaterialTopTabNavigator<MaterialTabParams>();
+const MaterialTopTabs = createMaterialTopTabNavigator<MaterialTopTabParams>();
 
-export default function MaterialTabsScreen() {
+export default function MaterialTopTabsScreen() {
   return (
-    <MaterialTabs.Navigator
+    <MaterialTopTabs.Navigator
       tabBarOptions={{
         style: styles.tabBar,
         labelStyle: styles.tabLabel,
         indicatorStyle: styles.tabIndicator,
       }}
     >
-      <MaterialTabs.Screen
+      <MaterialTopTabs.Screen
         name="chat"
         component={Chat}
         options={{ title: 'Chat' }}
       />
-      <MaterialTabs.Screen
+      <MaterialTopTabs.Screen
         name="contacts"
         component={Contacts}
         options={{ title: 'Contacts' }}
       />
-      <MaterialTabs.Screen
+      <MaterialTopTabs.Screen
         name="albums"
         component={Albums}
         options={{ title: 'Albums' }}
       />
-    </MaterialTabs.Navigator>
+    </MaterialTopTabs.Navigator>
   );
 }
 

diff --git a/packages/example/src/Shared/Profile.tsx b/packages/example/src/Shared/Profile.tsx
diff --git a/packages/example/src/index.tsx b/packages/example/src/index.tsx
@@ -13,7 +13,8 @@ import createStackNavigator, {
 
 import SimpleStackScreen from './Screens/SimpleStack';
 import BottomTabsScreen from './Screens/BottomTabs';
-import MaterialTabsScreen from './Screens/MaterialTabs';
+import MaterialTopTabsScreen from './Screens/MaterialTopTabs';
+import MaterialBottomTabs from './Screens/MaterialBottomTabs';
 
 YellowBox.ignoreWarnings(['Require cycle:', 'Warning: Async Storage']);
 
@@ -30,7 +31,14 @@ type RootStackParamList = {
 const SCREENS = {
   SimpleStack: { title: 'Simple Stack', component: SimpleStackScreen },
   BottomTabs: { title: 'Bottom Tabs', component: BottomTabsScreen },
-  MaterialTabs: { title: 'Material Tabs', component: MaterialTabsScreen },
+  MaterialTopTabs: {
+    title: 'Material Top Tabs',
+    component: MaterialTopTabsScreen,
+  },
+  MaterialBottomTabs: {
+    title: 'Material Bottom Tabs',
+    component: MaterialBottomTabs,
+  },
 };
 
 const Drawer = createDrawerNavigator<RootDrawerParamList>();

diff --git a/packages/material-top-tabs/src/types.tsx b/packages/material-top-tabs/src/types.tsx
@@ -10,10 +10,8 @@ import {
 import { TabNavigationState } from '@navigation-ex/routers';
 
 export type MaterialTopTabNavigationEventMap = {
-  tabPress: {
-    defaultPrevented: boolean;
-    preventDefault(): void;
-  };
+  refocus: undefined;
+  tabPress: undefined;
   tabLongPress: undefined;
   swipeStart: undefined;
   swipeEnd: undefined;