Tab navigator (#9)

* Prepare example for tab navigator

* adding basic implementation of tab navigator with screen props, but without navigation inside tab yet

* adding screen props

* Reformat code

* Update exmple

* Comment onPress option

* experiments with navigation + nesting tab navigator

Author: vnovick

example/package.json

@@ -22,7 +22,8 @@
     "react-navigation": "^3.0.5",
     "react-navigation-stack": "~1.0.5",
     "@react-navigation/core": "^3.0.1",
-    "@react-navigation/native": "^3.0.3"
+    "@react-navigation/native": "^3.0.3",
+    "react-navigation-tabs": "1.0.1"
   },
   "private": true
 }

example/src/App.re

@@ -1,44 +1,6 @@
-open BsReactNavigation;
-
-/**
- * Route and Navigation types are kept in a separate module to
- * handle circular references between modules
- */
-open Config;
-
-module Stack =
-  StackNavigator.Create({
-    open StackNavigator;
-
-    /**
-     * StackNavigator requires `route` type to be defined.
-     */
-    type route = Config.route;
-
-    /**
-     * Initial route to start with. Has to be one of `route` variants.
-     */
-    let initialRoute = Home;
-
-    /**
-     * Returns a screen for a given route and its options.
-     *
-     * To declare options, you call `StackNavigator.screenOptions` and provide
-     * same keys as `navigationOptions` of React Navigation.
-     *
-     * This is to allow optional fields to be provided.
-     */
-    let getScreen = (route, navigation) =>
-      switch (route) {
-      | Home => (<Screen navigation />, screenOptions(~title="Home", ()))
-      | UserDetails(userId) => (
-          <Screen navigation text={"Browsing profile of: " ++ userId} />,
-          screenOptions(~title="Hello " ++ userId, ()),
-        )
-      };
-  });
-
-let app = Stack.render;
+let stack = Stack.render;
+let tab = TabExample.render;
+let drawer = DrawerExample.render;
 
 module Switch =
   SwitchNavigator.Create({
@@ -56,5 +18,4 @@ module Switch =
 
 let switchNavigator = Switch.render;
 
-let drawer = DrawerExample.render;
-let app = drawer;
+let app = drawer;

example/src/Config.re

@@ -2,7 +2,18 @@ open BsReactNavigation;
 
 type route =
   | Home
-  | UserDetails(string);
+  | UserDetails(string)
+  | TabExample;
+
+
+type navigationProp = StackNavigator.navigation(route);
+
+type tabs =
+  | Info
+  | Profile
+  | Settings;
+
+type tabNavigationProp = TabNavigator.navigation;
 
 type navigation = StackNavigator.navigation(route);
 
@@ -16,4 +27,4 @@ type item =
   | Dashbord
   | Settings;
 
-type drawerNavigationProp = DrawerNavigation.navigation(route);
+type drawerNavigationProp = DrawerNavigation.navigation(route);

example/src/Screen.re

@@ -13,7 +13,8 @@ module Styles = {
 
 let component = ReasonReact.statelessComponent("App");
 
-let make = (~navigation: Config.navigation, ~text: string="Hi!", _children) => {
+let make =
+    (~navigation: Config.navigationProp, ~text: string="Hi!", _children) => {
   ...component,
   render: _self =>
     <SafeAreaView>
@@ -23,6 +24,10 @@ let make = (~navigation: Config.navigation, ~text: string="Hi!", _children) => {
           title="Go to details screen "
           onPress={() => navigation.push(UserDetails("Mike Grabowski"))}
         />
+        <Button 
+          title="Go to tab example"
+          onPress={() => navigation.push(TabExample)}
+        />
       </View>
     </SafeAreaView>,
 };

example/src/Stack.re

@@ -0,0 +1,44 @@
+open BsReactNavigation;
+
+/**
+  * Route and Navigation types are kept in a separate module to
+  * handle circular references between modules
+  */
+open Config;
+
+module Stack =
+
+  StackNavigator.Create({
+    open StackNavigator;
+
+    /**
+      * StackNavigator requires `route` type to be defined.
+      */
+    type route = Config.route;
+
+    /**
+      * Initial route to start with. Has to be one of `route` variants.
+      */
+    let initialRoute = Home;
+
+
+    /**
+      * Returns a screen for a given route and its options.
+      *
+      * To declare options, you call `StackNavigator.screenOptions` and provide
+      * same keys as `navigationOptions` of React Navigation.
+      *
+      * This is to allow optional fields to be provided.
+      */
+    let getScreen = (route, navigation) =>
+      switch (route) {
+      | Home => (<Screen navigation />, screenOptions(~title="Home", ()))
+      | UserDetails(userId) => (
+          <Screen navigation text={"Browsing profile of: " ++ userId} />,
+          screenOptions(~title="Hello " ++ userId, ()),
+        )
+      | TabExample => (<TabExample navigation/>, screenOptions())
+      };
+  });
+
+let render = Stack.render;

example/src/TabExample.re

@@ -0,0 +1,40 @@
+open BsReactNavigation;
+open Config;
+
+module Tabs =
+  TabNavigator.Create({
+    type tabs = Config.tabs;
+    type order = list(tabs);
+
+    let tabBarOptions =
+      TabNavigator.tabBarOptions(~activeTintColor="#847", ());
+
+    let order = [Info, Profile, Settings];
+
+    let getTab = tab => {
+      switch (tab) {
+      | Info => (
+          "Info",
+          ((navigation) => <Tabs.Info navigation/>),
+          TabNavigator.screenOptions(~title="Info", ()),
+        )
+      | Profile => (
+          "Profile",
+          ((navigation) => <Tabs.Profile navigation/>),
+          TabNavigator.screenOptions(~title="Profile", ()),
+        )
+      | Settings => (
+          "Settings",
+          ((navigation) => <Tabs.Settings navigation/>),
+          TabNavigator.screenOptions(~title="Settings", ()),
+        )
+      };
+    };
+  });
+
+let render = Tabs.render;
+
+let make = (~navigation, _children) => {
+  ...(ReasonReact.statelessComponent("TabExample")),
+  render: _ => Tabs.render
+}

example/src/Tabs.re

@@ -0,0 +1,62 @@
+open BsReactNative;
+open Config;
+let str = ReasonReact.string;
+
+module Styles = {
+  open Style;
+  let container =
+    style([flex(1.), alignItems(Center), justifyContent(Center)]);
+  let profileContainer =
+    style([backgroundColor(String("rgb(76, 217, 100)"))]);
+  let infoContainer = style([backgroundColor(String("rgb(90, 200, 250)"))]);
+  let settingsContainer =
+    style([backgroundColor(String("rgb(255, 149, 0)"))]);
+
+  let titile = style([fontSize(Float(30.))]);
+};
+
+module Profile = {
+  let component = ReasonReact.statelessComponent("Profile");
+
+  let make = (~navigation: tabNavigationProp, _children) => {
+    ...component,
+    render: _self =>
+      <SafeAreaView
+        style={StyleSheet.flatten([
+          Styles.container,
+          Styles.profileContainer,
+        ])}>
+        <View> <Text style=Styles.titile> {str("Profile")} </Text> </View>
+      </SafeAreaView>,
+  };
+};
+
+module Info = {
+  let component = ReasonReact.statelessComponent("Info");
+
+  let make = (~navigation: tabNavigationProp, _children) => {
+    ...component,
+    render: _self =>
+      <SafeAreaView
+        style={StyleSheet.flatten([Styles.container, Styles.infoContainer])}>
+        <View> <Text style=Styles.titile> {str("Info")} </Text> </View>
+      </SafeAreaView>,
+  };
+};
+
+module Settings = {
+  let component = ReasonReact.statelessComponent("Settings");
+
+  let make = (~navigation: tabNavigationProp, _children) => {
+    ...component,
+    render: _self =>
+      <SafeAreaView
+        style={StyleSheet.flatten([
+          Styles.container,
+          Styles.settingsContainer,
+        ])}>
+        <View> <Text style=Styles.titile> {str("Settings")} </Text> </View>
+        <Button onPress={() => navigation.navigate("Profile")} title="info"/>
+      </SafeAreaView>,
+  };
+};