Fix Navigation

wix-incubator · Nov 11, 2019 · 9dacb8c · 9dacb8c
1 parent bb655bc
commit 9dacb8c
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 16 deletions.
diff --git a/demo/demoRoot.android.js b/demo/demoRoot.android.js
@@ -4,23 +4,41 @@ import {
   View,
   TouchableOpacity,
 } from 'react-native';
+import PropTypes from 'prop-types';
+import {Navigation} from 'react-native-navigation';
 
 export default class KeyboardInput extends Component {
+  static propTypes = {
+    componentId: PropTypes.string,
+  };
+
+  constructor(props) {
+    super(props);
+    this.onPressBodyMessage = this.onPressBodyMessage.bind(this);
+  }
 
   onPressBodyMessage() {
-    this.props.navigator.push({
-      screen: 'screens.innerScreen',
-      navigatorStyle: {drawUnderNavBar: true, navBarHidden: true},
-      passProps: {
-        message: 'In the secondary tab, the keyboard input is inside a pushed screen, yet it works nonetheless! :-)'
-      }
+    Navigation.push(this.props.componentId, {
+      component: {
+        name: 'screens.innerScreen',
+        passProps: {
+          message: 'In the secondary tab, the keyboard input is inside a pushed screen, yet it works nonetheless! :-)',
+        },
+        options: {
+          topBar: {
+            title: {
+              text: 'Second screen',
+            },
+          },
+        },
+      },
     });
   }
 
   render() {
     return (
       <View style={{flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
-        <TouchableOpacity onPress={this.onPressBodyMessage.bind(this)}>
+        <TouchableOpacity onPress={this.onPressBodyMessage}>
           <Text style={{fontSize: 21}}>Tap for more keyboard fun...</Text>
         </TouchableOpacity>
       </View>

diff --git a/demo/demoScreen.js b/demo/demoScreen.js
@@ -8,6 +8,7 @@ import {
   PixelRatio,
   Platform,
 } from 'react-native';
+import PropTypes from 'prop-types';
 import {AutoGrowingTextInput} from 'react-native-autogrow-textinput';
 import {KeyboardAccessoryView, KeyboardUtils} from 'react-native-keyboard-input';
 
@@ -17,6 +18,9 @@ const IsIOS = Platform.OS === 'ios';
 const TrackInteractive = true;
 
 export default class KeyboardInput extends Component {
+  static propTypes = {
+    message: PropTypes.string,
+  };
 
   constructor(props) {
     super(props);
@@ -143,10 +147,12 @@ export default class KeyboardInput extends Component {
   }
 }
 
+const COLOR = '#F5FCFF';
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#F5FCFF',
+    backgroundColor: COLOR,
   },
   scrollContainer: {
     justifyContent: 'center',
@@ -170,6 +176,7 @@ const styles = StyleSheet.create({
     ...Platform.select({
       ios: {
         flex: 1,
+        backgroundColor: COLOR,
       },
     }),
   },

diff --git a/index.android.js b/index.android.js
@@ -1,10 +1,10 @@
 import KeyboardAppScreen from './demo/demoScreen';
-import KeyboardInput from './demo/demoRoot';
+import DemoRootScreen from './demo/demoRoot';
 
 import {Navigation} from 'react-native-navigation';
 
 Navigation.registerComponent('screens.star', () => KeyboardAppScreen);
-Navigation.registerComponent('screens.settings', () => KeyboardInput);
+Navigation.registerComponent('screens.settings', () => DemoRootScreen);
 Navigation.registerComponent('screens.innerScreen', () => KeyboardAppScreen);
 
 Navigation.setRoot({
@@ -16,7 +16,7 @@ Navigation.setRoot({
             component: {
               name: 'screens.star',
               passProps: {
-                text: 'On the main tab, the keyboard input is in the root screen!'
+                message: 'On the main tab, the keyboard input is in the root screen!',
               },
             },
           }],
@@ -25,20 +25,34 @@ Navigation.setRoot({
               text: 'Main Tab',
               icon: require('./demo/res/star.png'),
             },
+            topBar: {
+              title: {
+                text: 'Main Tab',
+              },
+            },
           },
         },
       },
       {
-        component: {
-          name: 'screens.settings',
-          passProps: {
-            text: 'Secondary Tab',
-          },
+        stack: {
+          children: [{
+            component: {
+              name: 'screens.settings',
+              passProps: {
+                message: 'Secondary Tab',
+              },
+            },
+          }],
           options: {
             bottomTab: {
               text: 'Second Tab',
               icon: require('./demo/res/settings.png'),
             },
+            topBar: {
+              title: {
+                text: 'Second Tab',
+              },
+            },
           },
         },
       }],