navigation: Use MaterialTopTabNavigator

WIP
zulip · Nov 2, 2018 · c1bcba2 · c1bcba2
1 parent e239bf2
commit c1bcba2
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 23 deletions.
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 { HOME_NARROW, MENTIONED_NARROW, STARRED_NARROW } 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,14 +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,18 +1,19 @@
 /* @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';
+import StreamsTab from './StreamsTab';
 import PmConversationsCard from '../pm-conversations/PmConversationsCard';
 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,
@@ -24,7 +25,7 @@ export default createMaterialTopTabNavigator(
       },
     },
     streams: {
-      screen: StreamTabs,
+      screen: StreamsTab,
       navigationOptions: {
         tabBarLabel: 'Streams',
         tabBarIcon: (props: TabNavigationOptionsPropsType) => (
@@ -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/main/StreamsTab.js b/src/main/StreamsTab.js
@@ -0,0 +1,24 @@
+/* @flow */
+import React, { PureComponent } from 'react';
+import { View } from 'react-native';
+
+import type { Context } from '../types';
+import StreamsTabsNavigator from './StreamsTabsNavigator';
+
+export default class StreamsTab extends PureComponent<{}> {
+  context: Context;
+
+  static contextTypes = {
+    styles: () => null,
+  };
+
+  render() {
+    const { styles } = this.context;
+
+    return (
+      <View style={styles.tabContainer}>
+        <StreamsTabsNavigator />
+      </View>
+    );
+  }
+}
diff --git a/src/main/StreamTabs.js → src/main/StreamsTabsNavigator.js b/src/main/StreamTabs.js → src/main/StreamsTabsNavigator.js
diff --git a/src/pm-conversations/PmConversationsCard.js b/src/pm-conversations/PmConversationsCard.js
@@ -12,9 +12,6 @@ import { getLoading, getPresence, getRecentConversations, getAllUsersByEmail } f
 import { navigateToCreateGroup, navigateToUsersScreen } from '../actions';
 
 const componentStyles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
   button: {
     margin: 8,
     flex: 1,
@@ -58,7 +55,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, GlobalState } from '../types';
 import { getSettings } from '../selectors';
@@ -25,9 +25,6 @@ import {
 } from '../actions';
 
 const componentStyles = StyleSheet.create({
-  optionWrapper: {
-    flex: 1,
-  },
   accountButtons: {
     flex: 1,
     alignItems: 'flex-end',
@@ -58,7 +55,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"
@@ -98,7 +95,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/yarn.lock b/yarn.lock
@@ -2212,6 +2212,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"
@@ -2382,7 +2389,13 @@ create-react-class@^15.6.3:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+<<<<<<< HEAD
 create-react-context@0.2.2:
+||||||| merged common ancestors
+create-react-context@^0.2.1:
+=======
+create-react-context@^0.2.1, create-react-context@^0.2.2:
+>>>>>>> navigation: Use MaterialTopTabNavigator
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca"
   integrity sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==
@@ -2528,6 +2541,10 @@ deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+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"
@@ -7171,7 +7188,23 @@ react-native-orientation@^3.1.3:
   resolved "https://registry.yarnpkg.com/react-native-orientation/-/react-native-orientation-3.1.3.tgz#d45803841fe94b6cce9acbe904fd5ca191a3711e"
   integrity sha512-A0h0E+2f95X4avmhaBG1ZT8WDxBACA/q//JN2eF1E7kq8AJVxt5XDiavv+aSBkBlqFsfF3bIS+T/DB5mXmnxuA==
 
+<<<<<<< HEAD
 react-native-photo-view@alwx/react-native-photo-view#c58fd6b30:
+||||||| merged common ancestors
+react-native-photo-view@^1.5.2:
+=======
+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:
+>>>>>>> navigation: Use MaterialTopTabNavigator
   version "1.5.2"
   resolved "https://codeload.github.com/alwx/react-native-photo-view/tar.gz/c58fd6b30d627fa23e39520d4fc3325ade8b0a51"
   dependencies:
@@ -7316,10 +7349,29 @@ react-navigation-drawer@0.5.0:
   dependencies:
     react-native-drawer-layout-polyfill "^1.3.2"
 
+<<<<<<< HEAD
 react-navigation-redux-helpers@^2.0.8:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/react-navigation-redux-helpers/-/react-navigation-redux-helpers-2.0.8.tgz#f237592d9a5f24f64b283c0693bc84c5e32676ec"
   integrity sha512-gCxHOGWNbRtt6Se93uuIE3cKqmqln73wlMeyD02aE1vs0cl9fn7BUKXX+UESrBSUOqadeoS1I7AH4arxZAARTQ==
+||||||| merged common ancestors
+react-navigation-redux-helpers@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-navigation-redux-helpers/-/react-navigation-redux-helpers-2.0.4.tgz#940c798c5996d0408318c838059063252cadb3b2"
+=======
+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.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-navigation-redux-helpers/-/react-navigation-redux-helpers-2.0.4.tgz#940c798c5996d0408318c838059063252cadb3b2"
+>>>>>>> navigation: Use MaterialTopTabNavigator
   dependencies:
     invariant "^2.2.2"
 
@@ -7338,10 +7390,30 @@ react-navigation-tabs@0.8.4:
     react-lifecycles-compat "^3.0.4"
     react-native-tab-view "^1.0.0"
 
+<<<<<<< HEAD
 react-navigation@^2.18.2:
   version "2.18.2"
   resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-2.18.2.tgz#ba278ded41f736d029c7cae5d54ab1427dc6ed34"
   integrity sha512-H9hkuC+Fyav/zlss4PU8XRjgBPMKXG9uudT7PSAaRi4kuRkGb77OJDZHBW6Vm9QPF9tAKK95AhaS1mbecLM8Yw==
+||||||| merged common ancestors
+react-navigation@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-2.9.0.tgz#714d14c085fa566088166c85f187bc5f5943812d"
+=======
+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.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-2.9.0.tgz#714d14c085fa566088166c85f187bc5f5943812d"
+>>>>>>> navigation: Use MaterialTopTabNavigator
   dependencies:
     clamp "^1.0.1"
     create-react-context "0.2.2"