Adds changes to example-redux showcasing passing props functionality

example-redux/src/app.js

@@ -41,13 +41,25 @@ export default class App {
             title: 'Login',
             navigatorStyle: {},
             passProps: {
-              passed: 'This is a prop passed in \'startSingleScreenApp\'!',
-              deep: {
-                deepProp: 123,
-                deeper: {
-                  deeperProp: 'Deep!'
-                }
-              }
+              str: 'This is a prop passed in \'startSingleScreenApp()\'!',
+              obj: {
+                str: 'This is a prop passed in an object!',
+                arr: [
+                  {
+                    str: 'This is a prop in an object in an array in an object!'
+                  }
+                ],
+                arr2: [
+                    [
+                        'array of strings',
+                        'with two strings'
+                    ],
+                    [
+                        1, 2, 3
+                    ]
+                ]
+              },
+              num: 1234
             }
           }
         });
@@ -63,8 +75,17 @@ export default class App {
               title: 'Screen One',
               navigatorStyle: {},
               passProps: {
-                passed: 'This is a prop passed in \'startTabBasedApp\'!'
-  }
+                str: 'This is a prop passed in \'startTabBasedApp\'!',
+                obj: {
+                  str: 'This is a prop passed in an object!',
+                  arr: [
+                    {
+                      str: 'This is a prop in an object in an array in an object!'
+                    }
+                  ]
+                },
+                num: 1234
+              }
             },
             {
               label: 'Two',
@@ -74,7 +95,16 @@ export default class App {
               title: 'Screen Two',
               navigatorStyle: {},
               passProps: {
-                passed: 'This is a prop passed in \'startTabBasedApp\'!'
+                str: 'This is a prop passed in \'startTabBasedApp\'!',
+                obj: {
+                  str: 'This is a prop passed in an object!',
+                  arr: [
+                    {
+                      str: 'This is a prop in an object in an array in an object!'
+                    }
+                  ]
+                },
+                num: 1234
               }
             }
           ],

example-redux/src/screens/FirstTabScreen.js

@@ -38,7 +38,9 @@ class FirstTabScreen extends Component {
   };
 
   static propTypes = {
-    passed: PropTypes.string.isRequired
+    str: PropTypes.string.isRequired,
+    obj: PropTypes.object.isRequired,
+    num: PropTypes.number.isRequired
   };
 
   constructor(props) {
@@ -82,7 +84,10 @@ class FirstTabScreen extends Component {
           <Text style={styles.button}>Modal Screen</Text>
         </TouchableOpacity>
 
-        <Text style={{fontWeight: '500'}}>{this.props.passed}</Text>
+        <Text style={{fontWeight: '500'}}>String prop: {this.props.str}</Text>
+        <Text style={{fontWeight: '500'}}>Number prop: {this.props.num}</Text>
+        <Text style={{fontWeight: '500'}}>Object prop: {this.props.obj.str}</Text>
+        <Text style={{fontWeight: '500'}}>Array prop: {this.props.obj.arr[0].str}</Text>
       </View>
     );
   }
@@ -96,7 +101,16 @@ class FirstTabScreen extends Component {
       title: "More",
       screen: "example.PushedScreen",
       passProps: {
-        passed: 'This is a prop passed in \'navigator.push()\'!'
+        passed: 'This is a prop passed in \'navigator.push()\'!',
+        obj: {
+          str: 'This is a prop passed in an object!',
+          arr: [
+            {
+              str: 'This is a prop in an object in an array in an object!'
+            }
+          ]
+        },
+        num: 1234
       }
     });
   }
@@ -106,7 +120,16 @@ class FirstTabScreen extends Component {
       title: "Modal Screen",
       screen: "example.PushedScreen",
       passProps: {
-        passed: 'This is a prop passed in \'navigator.showModal()\'!'
+        passed: 'This is a prop passed in \'navigator.showModal()\'!',
+        obj: {
+          str: 'This is a prop passed in an object!',
+          arr: [
+            {
+              str: 'This is a prop in an object in an array in an object!'
+            }
+          ]
+        },
+        num: 1234
       }
     });
   }

example-redux/src/screens/LoginScreen.js

@@ -14,11 +14,14 @@ import * as appActions from '../reducers/app/actions';
 class LoginScreen extends Component {
 
   static propTypes = {
-    passed: PropTypes.string.isRequired
+    str: PropTypes.string.isRequired,
+    obj: PropTypes.object.isRequired,
+    num: PropTypes.number.isRequired
   };
 
   constructor(props) {
     super(props);
+    console.log(props);
   }
 
   render() {
@@ -37,8 +40,11 @@ class LoginScreen extends Component {
           <Text style={styles.button}>Login</Text>
         </TouchableOpacity>
 
-
-        <Text style={{fontWeight: '500'}}>{this.props.passed}</Text>
+        <Text style={{fontWeight: '500'}}>String prop: {this.props.str}</Text>
+        <Text style={{fontWeight: '500'}}>Number prop: {this.props.num}</Text>
+        <Text style={{fontWeight: '500'}}>Object prop: {this.props.obj.str}</Text>
+        <Text style={{fontWeight: '500'}}>Array prop: {this.props.obj.arr[0].str}</Text>
+        <Text style={{fontWeight: '500'}}>Array of arrays prop: {JSON.stringify(this.props.obj.arr2)}</Text>
 
       </View>
     );

example-redux/src/screens/PushedScreen.js

@@ -24,7 +24,9 @@ class PushedScreen extends Component {
   };
 
   static propTypes = {
-    passed: PropTypes.string.isRequired
+    str: PropTypes.string.isRequired,
+    obj: PropTypes.object.isRequired,
+    num: PropTypes.number.isRequired
   };
 
   constructor(props) {
@@ -76,7 +78,10 @@ class PushedScreen extends Component {
 
         <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}}/>
 
-        <Text style={{fontWeight: '500'}}>{this.props.passed}</Text>
+        <Text style={{fontWeight: '500'}}>String prop: {this.props.str}</Text>
+        <Text style={{fontWeight: '500'}}>Number prop: {this.props.num}</Text>
+        <Text style={{fontWeight: '500'}}>Object prop: {this.props.obj.str}</Text>
+        <Text style={{fontWeight: '500'}}>Array prop: {this.props.obj.arr[0].str}</Text>
 
       </View>
     );
@@ -89,7 +94,19 @@ class PushedScreen extends Component {
   onPushPress() {
     this.props.navigator.push({
       title: "More",
-      screen: "example.PushedScreen"
+      screen: "example.PushedScreen",
+      passProps: {
+        passed: 'This is a prop passed in \'navigator.push()\'!',
+        obj: {
+          str: 'This is a prop passed in an object!',
+          arr: [
+            {
+              str: 'This is a prop in an object in an array in an object!'
+            }
+          ]
+        },
+        num: 1234
+      }
     });
   }
 
@@ -100,7 +117,19 @@ class PushedScreen extends Component {
   onShowModalPress() {
     this.props.navigator.showModal({
       title: "Modal Screen",
-      screen: "example.PushedScreen"
+      screen: "example.PushedScreen",
+      passProps: {
+        passed: 'This is a prop passed in \'navigator.showModal()\'!',
+        obj: {
+          str: 'This is a prop passed in an object!',
+          arr: [
+            {
+              str: 'This is a prop in an object in an array in an object!'
+            }
+          ]
+        },
+        num: 1234
+      }
     });
   }
 

example-redux/src/screens/SecondTabScreen.js

@@ -20,7 +20,9 @@ class SecondTabScreen extends Component {
   };
 
   static propTypes = {
-    passed: PropTypes.string.isRequired
+    str: PropTypes.string.isRequired,
+    obj: PropTypes.object.isRequired,
+    num: PropTypes.number.isRequired
   };
 
   constructor(props) {
@@ -43,7 +45,10 @@ class SecondTabScreen extends Component {
             <Text style={styles.button}>Increment Counter</Text>
           </TouchableOpacity>
 
-          <Text style={{fontWeight: '500'}}>{this.props.passed}</Text>
+          <Text style={{fontWeight: '500'}}>String prop: {this.props.str}</Text>
+          <Text style={{fontWeight: '500'}}>Number prop: {this.props.num}</Text>
+          <Text style={{fontWeight: '500'}}>Object prop: {this.props.obj.str}</Text>
+          <Text style={{fontWeight: '500'}}>Array prop: {this.props.obj.arr[0].str}</Text>
 
         </View>