feat: add a simple stack and material tabs integration (#39)

.eslintrc.json

@@ -2,7 +2,12 @@
   "extends": "satya164",
   "settings": {
     "react": { "version": "16" },
-    "import/core-modules": ["@navigation-ex/core", "@navigation-ex/routers"]
+    "import/core-modules": [
+      "@navigation-ex/core",
+      "@navigation-ex/routers",
+      "@navigation-ex/stack",
+      "@navigation-ex/material-top-tabs"
+    ]
   },
   "env": { "browser": true }
 }

package.json

@@ -4,12 +4,6 @@
   "workspaces": {
     "packages": [
       "packages/*"
-    ],
-    "nohoist": [
-      "**/expo",
-      "**/expo/**",
-      "**/react-native",
-      "**/react-native/**"
     ]
   },
   "publishConfig": {

packages/example/App.tsx

@@ -1 +1,3 @@
+import 'react-native-gesture-handler';
+
 export { default } from './src/index';

packages/example/metro.config.js

@@ -31,6 +31,10 @@ module.exports = {
       '@babel/runtime',
       'react',
       'react-native',
+      'react-native-gesture-handler',
+      'react-native-reanimated',
+      'react-native-safe-area-view',
+      'react-native-tab-view',
       'shortid',
     ],
   },

packages/example/package.json

@@ -21,7 +21,10 @@
     "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-reanimated": "~1.1.0",
+    "react-native-tab-view": "2.7.1",
     "react-native-web": "^0.11.4",
     "scheduler": "^0.14.0",
     "shortid": "^2.2.14"
@@ -36,6 +39,7 @@
   },
   "resolutions": {
     "react": "16.8.3",
-    "react-dom": "^16.8.3"
+    "react-dom": "^16.8.3",
+    "react-native-safe-area-view": "0.14.6"
   }
 }

packages/example/src/index.tsx

@@ -16,8 +16,12 @@ import {
   InitialState,
   useFocusEffect,
 } from '@navigation-ex/core';
-import createStackNavigator, { StackNavigationProp } from './StackNavigator';
-import createTabNavigator, { TabNavigationProp } from './TabNavigator';
+import createStackNavigator, {
+  StackNavigationProp,
+} from '@navigation-ex/stack';
+import createMaterialTopTabNavigator, {
+  MaterialTopTabNavigationProp,
+} from '@navigation-ex/material-top-tabs';
 
 type StackParamList = {
   first: { author: string };
@@ -34,7 +38,7 @@ YellowBox.ignoreWarnings(['Require cycle:', 'Warning: Async Storage']);
 
 const Stack = createStackNavigator<StackParamList>();
 
-const Tab = createTabNavigator<TabParamList>();
+const Tab = createMaterialTopTabNavigator<TabParamList>();
 
 const First = ({
   navigation,
@@ -111,7 +115,7 @@ const Fourth = ({
   navigation,
 }: {
   navigation: CompositeNavigationProp<
-    TabNavigationProp<TabParamList, 'fourth'>,
+    MaterialTopTabNavigationProp<TabParamList, 'fourth'>,
     StackNavigationProp<StackParamList>
   >;
 }) => (
@@ -129,7 +133,7 @@ const Fifth = ({
   navigation,
 }: {
   navigation: CompositeNavigationProp<
-    TabNavigationProp<TabParamList, 'fifth'>,
+    MaterialTopTabNavigationProp<TabParamList, 'fifth'>,
     StackNavigationProp<StackParamList>
   >;
 }) => (
@@ -192,8 +196,16 @@ export default function App() {
         <Stack.Screen name="third" options={{ title: 'Baz' }}>
           {() => (
             <Tab.Navigator initialRouteName="fifth">
-              <Tab.Screen name="fourth" component={Fourth} />
-              <Tab.Screen name="fifth" component={Fifth} />
+              <Tab.Screen
+                name="fourth"
+                component={Fourth}
+                options={{ title: 'This' }}
+              />
+              <Tab.Screen
+                name="fifth"
+                component={Fifth}
+                options={{ title: 'That' }}
+              />
             </Tab.Navigator>
           )}
         </Stack.Screen>

packages/material-top-tabs/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@navigation-ex/material-top-tabs",
+  "version": "0.0.1",
+  "main": "src/index",
+  "license": "MIT",
+  "dependencies": {
+    "@navigation-ex/core": "^0.0.1",
+    "@navigation-ex/routers": "^0.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^16.8.24",
+    "@types/react-native": "^0.60.2",
+    "react": "16.8.3",
+    "react-native": "^0.59.8",
+    "react-native-tab-view": "^2.0.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-tab-view": "^2.0.0"
+  }
+}

packages/example/src/TabNavigator.tsx → packages/material-top-tabs/src/index.tsx

@@ -1,7 +1,5 @@
-/* eslint-disable react-native/no-inline-styles */
-
 import * as React from 'react';
-import { View } from 'react-native';
+import { TabView, TabBar } from 'react-native-tab-view';
 import {
   useNavigationBuilder,
   NavigationProp,
@@ -14,9 +12,15 @@ import {
   TabNavigationState,
 } from '@navigation-ex/routers';
 
-type Props = TabRouterOptions & {
-  children: React.ReactNode;
-};
+type Props = TabRouterOptions &
+  Partial<
+    Omit<
+      React.ComponentProps<typeof TabView>,
+      'navigationState' | 'onIndexChange' | 'renderScene' | 'renderTabBar'
+    >
+  > & {
+    children: React.ReactNode;
+  };
 
 export type TabNavigationOptions = {
   /**
@@ -25,7 +29,7 @@ export type TabNavigationOptions = {
   title?: string;
 };
 
-export type TabNavigationProp<
+export type MaterialTopTabNavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = string
 > = NavigationProp<
@@ -47,29 +51,37 @@ export type TabNavigationProp<
   ): void;
 };
 
-export function TabNavigator(props: Props) {
-  const { state, descriptors } = useNavigationBuilder<
+export function TabNavigator({
+  initialRouteName,
+  backBehavior,
+  children,
+  ...rest
+}: Props) {
+  const { state, descriptors, navigation } = useNavigationBuilder<
     TabNavigationState,
     TabNavigationOptions,
     TabRouterOptions
-  >(TabRouter, props);
+  >(TabRouter, {
+    initialRouteName,
+    backBehavior,
+    children,
+  });
 
   return (
-    <View style={{ display: 'flex', flexDirection: 'row', height: '100%' }}>
-      {state.routes.map((route, i, self) => (
-        <View
-          key={route.key}
-          style={{
-            width: `${100 / self.length}%`,
-            padding: 10,
-            borderRadius: 3,
-            backgroundColor: i === state.index ? 'tomato' : 'white',
-          }}
-        >
-          {descriptors[route.key].render()}
-        </View>
-      ))}
-    </View>
+    <TabView
+      {...rest}
+      navigationState={state}
+      onIndexChange={index =>
+        navigation.navigate({ key: state.routes[index].key }, {})
+      }
+      renderScene={({ route }) => descriptors[route.key].render()}
+      renderTabBar={props => (
+        <TabBar
+          getLabelText={({ route }) => descriptors[route.key].options.title}
+          {...props}
+        />
+      )}
+    />
   );
 }