Merge pull request #307 from grahammendick/tabbar-android

NavigationReactNative/sample/twitter/App.js

@@ -1,8 +1,7 @@
 import React, {useState} from 'react';
-import {Platform} from 'react-native';
 import {StateNavigator} from 'navigation';
 import {NavigationHandler} from 'navigation-react';
-import {NavigationStack, TabBarIOS, TabBarItemIOS} from 'navigation-react-native';
+import {NavigationStack, TabBar, TabBarItem} from 'navigation-react-native';
 import Home from './Home';
 import Notifications from './Notifications';
 import Tweet from './Tweet';
@@ -23,34 +22,30 @@ timeline.renderScene = ({id}) => <Timeline timeline={getTimeline(id)}  />;
 
 const notificationsNavigator = new StateNavigator(stateNavigator);
 stateNavigator.navigate('home');
+notificationsNavigator.navigate('notifications');
 
 export default () => {
   const [notified, setNotified] = useState(false);
-  return Platform.OS === 'ios' ? (
-    <TabBarIOS>
-      <TabBarItemIOS title="Home">
+  return (
+    <TabBar bottomTabs={true}>
+      <TabBarItem title="Home">
         <NavigationHandler stateNavigator={stateNavigator}>
-          <NavigationStack/>
+          <NavigationStack
+            crumbStyle={from => from ? 'scale_in' : 'scale_out'}
+            unmountStyle={from => from ? 'slide_in' : 'slide_out'} />
         </NavigationHandler>
-      </TabBarItemIOS>
-      <TabBarItemIOS
+      </TabBarItem>
+      <TabBarItem
         title="Notifications"
         badge={!notified ? getFollows().length : null} 
-        onPress={() => {
-          setNotified(true);
-          if (!notificationsNavigator.stateContext.state) 
-            notificationsNavigator.navigate('notifications');
-        }}>
+        onPress={() => {setNotified(true)}}>
         <NavigationHandler stateNavigator={notificationsNavigator}>
-          <NavigationStack/>
+          <NavigationStack
+            primary={false}
+            crumbStyle={from => from ? 'scale_in' : 'scale_out'}
+            unmountStyle={from => from ? 'slide_in' : 'slide_out'} />
         </NavigationHandler>
-      </TabBarItemIOS>
-    </TabBarIOS>
-  ) : (
-    <NavigationHandler stateNavigator={stateNavigator}>
-      <NavigationStack
-        crumbStyle={from => from ? 'scale_in' : 'scale_out'}
-        unmountStyle={from => from ? 'slide_in' : 'slide_out'} />
-    </NavigationHandler>
-  )
+      </TabBarItem>
+    </TabBar>
+  );
 }

NavigationReactNative/sample/twitter/Home.ios.js → NavigationReactNative/sample/twitter/Home.js

@@ -1,16 +1,20 @@
 import React from 'react';
-import {StyleSheet, ScrollView} from 'react-native';
+import {StyleSheet, ScrollView, ToolbarAndroid} from 'react-native';
 import {NavigationBarIOS} from 'navigation-react-native';
 import Tweets from './Tweets';
 
 export default ({tweets}) => (
   <ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.view}>
+    <ToolbarAndroid title="Home" style={styles.toolbar} />
     <NavigationBarIOS title="Home" />
     <Tweets tweets={tweets} />
   </ScrollView>
 );
 
 const styles = StyleSheet.create({
+  toolbar: {
+    height: Platform.OS === 'android' ? 50 : 0,
+  },
   view: {
     paddingLeft: 20,
     paddingRight: 20,

NavigationReactNative/sample/twitter/Notifications.js

@@ -1,12 +1,13 @@
 import React, {useContext} from 'react';
-import {ScrollView, StyleSheet, Text, Image, FlatList, View, TouchableHighlight} from 'react-native';
+import {ScrollView, StyleSheet, Text, Image, FlatList, View, TouchableHighlight, ToolbarAndroid} from 'react-native';
 import {NavigationContext} from 'navigation-react';
 import {NavigationBarIOS} from 'navigation-react-native';
 
 export default ({follows}) => {
   const {stateNavigator} = useContext(NavigationContext);
   return (
     <ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.view}>
+      <ToolbarAndroid title="Notifications" style={styles.toolbar} />
       <NavigationBarIOS title="Notifications" />
       <FlatList
           data={follows}
@@ -33,6 +34,9 @@ export default ({follows}) => {
 };
 
 const styles = StyleSheet.create({
+  toolbar: {
+    height: Platform.OS === 'android' ? 50 : 0,
+  },
   view: {
     paddingLeft: 20,
     paddingRight: 20,

NavigationReactNative/sample/twitter/ios/Podfile.lock

@@ -11,7 +11,7 @@ PODS:
     - DoubleConversion
     - glog
   - glog (0.3.5)
-  - navigation-react-native (5.7.0):
+  - navigation-react-native (6.0.0):
     - React
   - React (0.60.5):
     - React-Core (= 0.60.5)
@@ -81,8 +81,6 @@ PODS:
     - React-Core (= 0.60.5)
   - React-RCTWebSocket (0.60.5):
     - React-Core (= 0.60.5)
-  - RNCViewpager (1.1.7):
-    - React
   - yoga (0.60.5.React)
 
 DEPENDENCIES:
@@ -107,7 +105,6 @@ DEPENDENCIES:
   - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - React-RCTWebSocket (from `../node_modules/react-native/Libraries/WebSocket`)
-  - "RNCViewpager (from `../node_modules/@react-native-community/viewpager`)"
   - yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -157,8 +154,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/Libraries/Vibration"
   React-RCTWebSocket:
     :path: "../node_modules/react-native/Libraries/WebSocket"
-  RNCViewpager:
-    :path: "../node_modules/@react-native-community/viewpager"
   yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -167,7 +162,7 @@ SPEC CHECKSUMS:
   DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
   Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
   glog: 1f3da668190260b06b429bb211bfbee5cd790c28
-  navigation-react-native: 944bf1ce4c823f4a8b107a207422cefa3cfc433f
+  navigation-react-native: 3f24554bd74c200421e3d82fd583f89f12f06506
   React: 53c53c4d99097af47cf60594b8706b4e3321e722
   React-Core: ba421f6b4f4cbe2fb17c0b6fc675f87622e78a64
   React-cxxreact: 8384287780c4999351ad9b6e7a149d9ed10a2395
@@ -185,7 +180,6 @@ SPEC CHECKSUMS:
   React-RCTText: b074d89033583d4f2eb5faf7ea2db3a13c7553a2
   React-RCTVibration: 2105b2e0e2b66a6408fc69a46c8a7fb5b2fdade0
   React-RCTWebSocket: cd932a16b7214898b6b7f788c8bddb3637246ac4
-  RNCViewpager: eff3ba6712d3aff9ea779ef1c99f78aa7cd36771
   yoga: 312528f5bbbba37b4dcea5ef00e8b4033fdd9411
 
 PODFILE CHECKSUM: 537e09f47736fb4d255de40767187689e0a1fb2c

NavigationReactNative/sample/twitter/package.json

@@ -8,7 +8,6 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@react-native-community/viewpager": "^1.1.7",
     "navigation": "^5.2.0",
     "navigation-react": "^4.1.1",
     "navigation-react-native": "^6.0.0",

NavigationReactNative/src/BackButton.tsx

@@ -1,16 +1,17 @@
 import React from 'react';
 import { BackHandler } from 'react-native';
+import BackHandlerContext from './BackHandlerContext';
 
-class BackButton extends React.Component<{onPress: () => boolean}> {
+class BackButton extends React.Component<{backHandler: BackHandler, onPress: () => boolean}> {
     constructor(props) {
         super(props);
         this.handleBack = this.handleBack.bind(this);
     }
     componentDidMount() {
-        BackHandler.addEventListener('hardwareBackPress', this.handleBack);
+        this.props.backHandler.addEventListener('hardwareBackPress', this.handleBack);
     }
     componentWillUnmount() {
-        BackHandler.removeEventListener('hardwareBackPress', this.handleBack);
+        this.props.backHandler.removeEventListener('hardwareBackPress', this.handleBack);
     }
     handleBack() {
         return this.props.onPress();
@@ -20,4 +21,10 @@ class BackButton extends React.Component<{onPress: () => boolean}> {
     }
 }
 
-export default BackButton;
+export default props => (
+    <BackHandlerContext.Consumer>
+        {backHandler => (
+            <BackButton {...props} backHandler={backHandler} />
+        )}
+    </BackHandlerContext.Consumer>
+);

NavigationReactNative/src/BackHandlerContext.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { BackHandler } from 'react-native';
+
+export default React.createContext(BackHandler);

NavigationReactNative/src/NavigationReactNative.ts

@@ -1,13 +1,18 @@
+import { Platform } from 'react-native';
 import NavigationStack from './NavigationStack';
 import Scene from './Scene';
 import NavigationBarIOS from './NavigationBarIOS';
 import LeftBarIOS from './LeftBarIOS';
 import RightBarIOS from './RightBarIOS';
 import BarButtonIOS from './BarButtonIOS';
 import SearchBarIOS from './SearchBarIOS';
-import TabBarIOS from './TabBarIOS';
-import TabBarItemIOS from './TabBarItemIOS';
+import TabBar from './TabBar';
+import TabBarItem from './TabBarItem';
 import SharedElementAndroid from './SharedElementAndroid';
 import TitleBarIOS from './TitleBarIOS';
+import BackHandlerContext from './BackHandlerContext';
 
-export { NavigationStack, Scene, NavigationBarIOS, LeftBarIOS, RightBarIOS, BarButtonIOS, TitleBarIOS, SearchBarIOS, TabBarIOS, TabBarItemIOS, SharedElementAndroid };
+var TabBarIOS = Platform.OS === 'ios' ? TabBar : () => null;
+var TabBarItemIOS = Platform.OS === 'ios' ? TabBarItem : () => null;
+
+export { NavigationStack, Scene, NavigationBarIOS, LeftBarIOS, RightBarIOS, BarButtonIOS, TitleBarIOS, SearchBarIOS, TabBar, TabBarItem, TabBarIOS, TabBarItemIOS, SharedElementAndroid, BackHandlerContext };

NavigationReactNative/src/NavigationStack.tsx

@@ -78,12 +78,13 @@ class NavigationStack extends React.Component<NavigationStackProps, NavigationSt
     }
     render() {
         var {keys, finish} = this.state;
-        var {stateNavigator, fragmentMode, unmountStyle, crumbStyle, title, renderScene} = this.props;
+        var {stateNavigator, primary, fragmentMode, unmountStyle, crumbStyle, title, renderScene} = this.props;
         var {crumbs, nextCrumb} = stateNavigator.stateContext;
         return (
             <NVNavigationStack
                 ref={this.ref}
                 keys={keys}
+                primary={primary}
                 finish={finish}
                 fragmentMode={fragmentMode}
                 style={[styles.stack, fragmentMode ? {backgroundColor: '#000'} : null]}