navigation: Use MaterialTopTabNavigator

WIP
zulip · Jul 7, 2018 · 9e97460 · 9e97460
1 parent 7be36fd
commit 9e97460
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -63,6 +63,7 @@
     "react-native-text-input-reset": "^1.0.2",
     "react-native-vector-icons": "^4.6.0",
     "react-navigation": "^2.6.0",
+    "react-navigation-material-bottom-tabs": "^0.3.0",
     "react-navigation-redux-helpers": "^2.0.2",
     "react-redux": "^5.0.7",
     "react-test-renderer": "16.3.2",

diff --git a/src/main/HomeTab.js b/src/main/HomeTab.js
@@ -4,17 +4,13 @@ import { connect } from 'react-redux';
 import React, { PureComponent } from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import type { Dispatch } from '../types';
+import type { Context, Dispatch } from '../types';
 import { homeNarrow, specialNarrow } from '../utils/narrow';
 import NavButton from '../nav/NavButton';
 import UnreadCards from '../unread/UnreadCards';
 import { doNarrow, navigateToSearch } from '../actions';
 
-const styles = StyleSheet.create({
-  wrapper: {
-    flex: 1,
-    flexDirection: 'column',
-  },
+const componentStyles = StyleSheet.create({
   iconList: {
     justifyContent: 'space-between',
     flexDirection: 'row',
@@ -26,12 +22,20 @@ type Props = {
 };
 
 class HomeTab extends PureComponent<Props> {
+  context: Context;
+  props: Props;
+
+  static contextTypes = {
+    styles: () => null,
+  };
+
   render() {
+    const { styles } = this.context;
     const { dispatch } = this.props;
 
     return (
-      <View style={styles.wrapper}>
-        <View style={styles.iconList}>
+      <View style={styles.tabContainer}>
+        <View style={componentStyles.iconList}>
           <NavButton
             name="home"
             onPress={() => {

diff --git a/src/main/MainTabs.js b/src/main/MainTabs.js
@@ -1,9 +1,10 @@
 /* @flow */
 import React from 'react';
 import { Platform } from 'react-native';
-import { createMaterialTopTabNavigator } from 'react-navigation';
+import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
 
 import type { TabNavigationOptionsPropsType } from '../types';
+import { BRAND_COLOR } from '../styles';
 import tabsOptions from '../styles/tabs';
 import HomeTab from './HomeTab';
 import StreamTabs from './StreamTabs';
@@ -12,7 +13,7 @@ import SettingsCard from '../settings/SettingsCard';
 import { IconHome, IconStream, IconSettings } from '../common/Icons';
 import IconUnreadConversations from '../nav/IconUnreadConversations';
 
-export default createMaterialTopTabNavigator(
+export default createMaterialBottomTabNavigator(
   {
     home: {
       screen: HomeTab,
@@ -53,7 +54,7 @@ export default createMaterialTopTabNavigator(
   },
   {
     backBehavior: 'none',
-    tabBarPosition: 'bottom',
+    barStyle: { backgroundColor: BRAND_COLOR },
     ...tabsOptions({
       showLabel: !!Platform.isPad,
       showIcon: true,

diff --git a/src/pm-conversations/PmConversationsCard.js b/src/pm-conversations/PmConversationsCard.js
@@ -17,9 +17,6 @@ import {
 import { navigateToCreateGroup, navigateToUsersScreen } from '../actions';
 
 const componentStyles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
   button: {
     margin: 8,
     flex: 1,
@@ -63,7 +60,7 @@ class PmConversationsCard extends PureComponent<Props> {
     }
 
     return (
-      <View style={[componentStyles.container, styles.background]}>
+      <View style={styles.tabContainer}>
         <View style={componentStyles.row}>
           <ZulipButton
             secondary

diff --git a/src/settings/SettingsCard.js b/src/settings/SettingsCard.js
@@ -2,7 +2,7 @@
 import { connect } from 'react-redux';
 
 import React, { PureComponent } from 'react';
-import { StyleSheet, View, ScrollView } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import type { Context, Dispatch } from '../types';
 import { getSettings } from '../selectors';
@@ -18,9 +18,6 @@ import {
 } from '../actions';
 
 const componentStyles = StyleSheet.create({
-  optionWrapper: {
-    flex: 1,
-  },
   accountButtons: {
     flex: 1,
     alignItems: 'flex-end',
@@ -51,7 +48,7 @@ class SettingsCard extends PureComponent<Props> {
     const { theme, dispatch } = this.props;
 
     return (
-      <ScrollView style={componentStyles.optionWrapper}>
+      <View style={styles.tabContainer}>
         <OptionRow
           Icon={IconNight}
           label="Night mode"
@@ -88,7 +85,7 @@ class SettingsCard extends PureComponent<Props> {
           <SwitchAccountButton />
           <LogoutButton />
         </View>
-      </ScrollView>
+      </View>
     );
   }
 }

diff --git a/src/styles/miscStyles.js b/src/styles/miscStyles.js
@@ -42,6 +42,7 @@ export type MiscStyles = {
   lineSeparator: Style,
   floatingView: Style,
   alignBottom: Style,
+  tabContainer: Style,
 };
 
 type Props = {
@@ -186,4 +187,8 @@ export default ({ color, backgroundColor, borderColor, cardColor, dividerColor }
     flexDirection: 'column',
     justifyContent: 'flex-end',
   },
+  tabContainer: {
+    backgroundColor,
+    flex: 1,
+  },
 });
diff --git a/src/styles/tabs.js b/src/styles/tabs.js
@@ -9,6 +9,7 @@ type Props = {
 export default ({ showLabel, showIcon }: Props) => ({
   swipeEnabled: true,
   animationEnabled: true,
+  backgroundColor: 'red',
   tabBarOptions: {
     showLabel,
     showIcon,

diff --git a/yarn.lock b/yarn.lock
@@ -1835,6 +1835,13 @@ color-string@^1.5.2:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
+color@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color/-/color-2.0.1.tgz#e4ed78a3c4603d0891eba5430b04b86314f4c839"
+  dependencies:
+    color-convert "^1.9.1"
+    color-string "^1.5.2"
+
 color@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/color/-/color-3.0.0.tgz#d920b4328d534a3ac8295d68f7bd4ba6c427be9a"
@@ -1971,7 +1978,7 @@ create-react-class@^15.6.3:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-create-react-context@^0.2.1:
+create-react-context@^0.2.1, create-react-context@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca"
   dependencies:
@@ -2103,6 +2110,10 @@ deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
 
+deepmerge@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.1.1.tgz#e862b4e45ea0555072bf51e7fd0d9845170ae768"
+
 default-require-extensions@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
@@ -6067,6 +6078,16 @@ react-native-orientation@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/react-native-orientation/-/react-native-orientation-3.1.3.tgz#d45803841fe94b6cce9acbe904fd5ca191a3711e"
 
+react-native-paper@2.0.0-alpha.4:
+  version "2.0.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-2.0.0-alpha.4.tgz#2186fd85e3e5aee368a0861f6a302015e76f24d9"
+  dependencies:
+    color "^2.0.1"
+    create-react-context "^0.2.2"
+    deepmerge "^2.1.0"
+    hoist-non-react-statics "^2.5.0"
+    react-lifecycles-compat "^3.0.4"
+
 react-native-photo-view@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/react-native-photo-view/-/react-native-photo-view-1.5.2.tgz#5d7f406ed5532a5a8a78c8ef8f40e81f688de1e2"
@@ -6208,6 +6229,15 @@ react-navigation-drawer@0.4.3:
   dependencies:
     react-native-drawer-layout-polyfill "^1.3.2"
 
+react-navigation-material-bottom-tabs@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/react-navigation-material-bottom-tabs/-/react-navigation-material-bottom-tabs-0.3.0.tgz#7fae682a41c1c290f2584fe50879e36b41da5394"
+  dependencies:
+    hoist-non-react-statics "^2.5.0"
+    prop-types "^15.6.0"
+    react-native-paper "2.0.0-alpha.4"
+    react-navigation-tabs "^0.4.0"
+
 react-navigation-redux-helpers@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/react-navigation-redux-helpers/-/react-navigation-redux-helpers-2.0.2.tgz#029cd5d0b50deabd2aa157afe1a2512ce205f541"
@@ -6224,6 +6254,16 @@ react-navigation-tabs@0.5.1:
     react-native-safe-area-view "^0.7.0"
     react-native-tab-view "^1.0.0"
 
+react-navigation-tabs@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-0.4.1.tgz#b367535c1b00fc2046341ae93cb8d3e8e0b96a11"
+  dependencies:
+    hoist-non-react-statics "^2.5.0"
+    prop-types "^15.6.1"
+    react-lifecycles-compat "^3.0.4"
+    react-native-safe-area-view "^0.7.0"
+    react-native-tab-view "^1.0.0"
+
 react-navigation@^2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-2.6.0.tgz#7734aec4acf690d556a5bdcbda10ea79a3dc6c7e"