passProps works

playground/e2e/app.test.js

@@ -9,12 +9,12 @@ describe('app', () => {
 
   it('switch to tab based app', () => {
     elementByLabel('Switch to tab based app').tap();
-    expect(elementByLabel('This is a tab screen')).toBeVisible();
+    expect(elementByLabel('This is tab 1')).toBeVisible();
   });
 
   xit('switch to tabs with side menus', () => {
     elementByLabel('Switch to tab based app with side menus').tap();
-    expect(elementByLabel('This is a tab screen')).toBeVisible();
+    // expect(elementByLabel('This is a tab screen')).toBeVisible();
   });
 });
 

playground/src/containers/SimpleTabScreen.js → playground/src/containers/SimpleScreen.js

@@ -1,16 +1,17 @@
 import React, { Component } from 'react';
 import { View, Text } from 'react-native';
 
-class SimpleTabScreen extends Component {
+class SimpleScreen extends Component {
   render() {
+    const text = this.props.text || 'Simple Screen';
     return (
       <View style={styles.root}>
-        <Text style={styles.h1}>{`This is a tab screen`}</Text>
+        <Text style={styles.h1}>{text}</Text>
       </View>
     );
   }
 }
-export default SimpleTabScreen;
+export default SimpleScreen;
 
 const styles = {
   root: {

playground/src/containers/WelcomeScreen.js

@@ -12,14 +12,8 @@ class WelcomeScreen extends Component {
     return (
       <View style={styles.root}>
         <Text style={styles.h1}>{`React Native Navigation!`}</Text>
-        <Button
-          title="Switch to tab based app"
-          onPress={this.onClickSwitchToTabs}
-        />
-        <Button
-          title="Switch to tab based app with side menus"
-          onPress={this.onClickSwitchToTabsWithSideMenus}
-        />
+        <Button title="Switch to tab based app" onPress={this.onClickSwitchToTabs} />
+        <Button title="Switch to tab based app with side menus" onPress={this.onClickSwitchToTabsWithSideMenus} />
       </View>
     );
   }
@@ -29,12 +23,18 @@ class WelcomeScreen extends Component {
       tabs: [
         {
           container: {
-            name: 'com.example.SimpleTabScreen'
+            name: 'com.example.SimpleScreen',
+            passProps: {
+              text: 'This is tab 1'
+            }
           }
         },
         {
           container: {
-            name: 'com.example.WelcomeScreen'
+            name: 'com.example.SimpleScreen',
+            passProps: {
+              text: 'This is tab 2'
+            }
           }
         }
       ]
@@ -46,7 +46,7 @@ class WelcomeScreen extends Component {
       tabs: [
         {
           container: {
-            name: 'com.example.SimpleTabScreen'
+            name: 'com.example.SimpleScreen'
           }
         },
         {
@@ -56,16 +56,16 @@ class WelcomeScreen extends Component {
         },
         {
           container: {
-            name: 'com.example.SimpleTabScreen'
+            name: 'com.example.SimpleScreen'
           }
         }
       ],
       sideMenu: {
         left: {
-          name: 'com.example.SimpleTabScreen'
+          name: 'com.example.SimpleScreen'
         },
         right: {
-          name: 'com.example.SimpleTabScreen'
+          name: 'com.example.SimpleScreen'
         }
       }
     });

playground/src/containers/index.js

@@ -1,9 +1,9 @@
 import Navigation from 'react-native-navigation';
 
 import WelcomeScreen from './WelcomeScreen';
-import SimpleTabScreen from './SimpleTabScreen';
+import SimpleScreen from './SimpleScreen';
 
 export function registerContainers() {
   Navigation.registerContainer(`com.example.WelcomeScreen`, () => WelcomeScreen);
-  Navigation.registerContainer(`com.example.SimpleTabScreen`, () => SimpleTabScreen);
+  Navigation.registerContainer(`com.example.SimpleScreen`, () => SimpleScreen);
 }

src/Navigation.js

@@ -12,7 +12,7 @@ class Navigation {
     this.nativeEventsReceiver = new NativeEventsReceiver();
     this.uniqueIdProvider = new UniqueIdProvider();
     this.containerRegistry = new ContainerRegistry(this.store);
-    this.commands = new Commands(new NativeCommandsSender(), this.uniqueIdProvider);
+    this.commands = new Commands(new NativeCommandsSender(), this.uniqueIdProvider, this.store);
   }
 
   registerContainer(containerName, getContainerFunc) {

src/commands/Commands.js

@@ -1,12 +1,23 @@
+import * as _ from 'lodash';
 import LayoutTreeParser from './LayoutTreeParser';
 
 export default class Commands {
-  constructor(nativeCommandsSender, uniqueIdProvider) {
+  constructor(nativeCommandsSender, uniqueIdProvider, store) {
     this.nativeCommandsSender = nativeCommandsSender;
     this.layoutTreeParser = new LayoutTreeParser(uniqueIdProvider);
+    this.store = store;
   }
 
   setRoot(simpleApi) {
-    this.nativeCommandsSender.setRoot(this.layoutTreeParser.parseFromSimpleJSON(simpleApi));
+    const layout = this.layoutTreeParser.parseFromSimpleJSON(simpleApi);
+    this._savePassProps(layout);
+    this.nativeCommandsSender.setRoot(layout);
+  }
+
+  _savePassProps(node) {
+    if (node.type === 'Container') {
+      this.store.setPropsForContainerId(node.id, node.data.passProps);
+    }
+    _.forEach(node.children, (child) => this._savePassProps(child));
   }
 }

src/commands/Commands.test.js

@@ -1,15 +1,19 @@
+import * as SimpleLayouts from './SimpleLayouts';
+
 describe('Commands', () => {
   let uut;
-  const mockCommandsSender = {
-    setRoot: jest.fn()
-  };
-  const mockIdProvider = {
-    generate: (prefix) => `${prefix}UNIQUE_ID`
-  };
+  let mockCommandsSender;
+  let store;
 
   beforeEach(() => {
+    const NativeCommandsSender = jest.genMockFromModule('../adapters/NativeCommandsSender').default;
+    mockCommandsSender = new NativeCommandsSender();
+    const mockIdProvider = { generate: (prefix) => `${prefix}+UNIQUE_ID` };
+    const Store = require('../containers/Store').default;
+    store = new Store();
+
     const Commands = require('./Commands').default;
-    uut = new Commands(mockCommandsSender, mockIdProvider);
+    uut = new Commands(mockCommandsSender, mockIdProvider, store);
   });
 
   describe('setRoot', () => {
@@ -22,11 +26,12 @@ describe('Commands', () => {
       expect(mockCommandsSender.setRoot).toHaveBeenCalledTimes(1);
       expect(mockCommandsSender.setRoot).toHaveBeenCalledWith({
         type: 'ContainerStack',
-        id: 'ContainerStackUNIQUE_ID',
+        id: 'ContainerStack+UNIQUE_ID',
+        data: {},
         children: [
           {
             type: 'Container',
-            id: 'ContainerUNIQUE_ID',
+            id: 'Container+UNIQUE_ID',
             children: [],
             data: {
               name: 'com.example.MyScreen'
@@ -35,5 +40,11 @@ describe('Commands', () => {
         ]
       });
     });
+
+    it('passProps into containers', () => {
+      expect(store.getPropsForContainerId('Container+UNIQUE_ID')).toEqual({});
+      uut.setRoot(SimpleLayouts.singleScreenWithAditionalParams);
+      expect(store.getPropsForContainerId('Container+UNIQUE_ID')).toEqual(SimpleLayouts.passProps);
+    });
   });
 });

src/commands/LayoutTreeParser.js

@@ -29,6 +29,7 @@ export default class LayoutTreeParser {
   _node(node) {
     node.id = this.uniqueIdProvider.generate(node.type);
     node.children = node.children || [];
+    node.data = node.data || {};
     return node;
   }
 

src/commands/LayoutTreeParser.test.js

@@ -22,7 +22,8 @@ describe('LayoutTreeParser', () => {
             data: {},
             children: []
           }
-        ]
+        ],
+        data: {}
       });
   });
 
@@ -37,6 +38,7 @@ describe('LayoutTreeParser', () => {
       .toEqual({
         type: 'ContainerStack',
         id: 'ContainerStack+UNIQUE_ID',
+        data: {},
         children: [
           {
             type: 'Container',
@@ -55,6 +57,7 @@ describe('LayoutTreeParser', () => {
       .toEqual({
         type: 'ContainerStack',
         id: 'ContainerStack+UNIQUE_ID',
+        data: {},
         children: [
           {
             type: 'Container',
@@ -62,21 +65,17 @@ describe('LayoutTreeParser', () => {
             children: [],
             data: {
               name: 'com.example.MyScreen',
-              passProps: {
-                foo: {
-                  number: 1,
-                  string: 'Hello!'
-                },
-                bar: SimpleLayouts.passedFunction
-              },
+              passProps: SimpleLayouts.passProps,
               style: {},
               buttons: {}
             }
           }
         ]
       });
-    expect(uut.parseFromSimpleJSON(SimpleLayouts.singleScreenWithAditionalParams).children[0].data.passProps.bar).toBe(SimpleLayouts.passedFunction);
-    expect(uut.parseFromSimpleJSON(SimpleLayouts.singleScreenWithAditionalParams).children[0].data.passProps.bar()).toEqual('Hello from a function');
+    const parsedPropsFn = uut.parseFromSimpleJSON(SimpleLayouts.singleScreenWithAditionalParams)
+      .children[0].data.passProps.fnProp;
+    expect(parsedPropsFn).toBe(SimpleLayouts.passProps.fnProp);
+    expect(parsedPropsFn()).toEqual('Hello from a function');
   });
 
   it('parses tab based', () => {
@@ -84,10 +83,12 @@ describe('LayoutTreeParser', () => {
       .toEqual({
         type: 'Tabs',
         id: 'Tabs+UNIQUE_ID',
+        data: {},
         children: [
           {
             type: 'ContainerStack',
             id: 'ContainerStack+UNIQUE_ID',
+            data: {},
             children: [
               {
                 type: 'Container',
@@ -102,6 +103,7 @@ describe('LayoutTreeParser', () => {
           {
             type: 'ContainerStack',
             id: 'ContainerStack+UNIQUE_ID',
+            data: {},
             children: [
               {
                 type: 'Container',
@@ -116,6 +118,7 @@ describe('LayoutTreeParser', () => {
           {
             type: 'ContainerStack',
             id: 'ContainerStack+UNIQUE_ID',
+            data: {},
             children: [
               {
                 type: 'Container',
@@ -136,10 +139,12 @@ describe('LayoutTreeParser', () => {
       .toEqual({
         type: 'SideMenuRoot',
         id: 'SideMenuRoot+UNIQUE_ID',
+        data: {},
         children: [
           {
             type: 'SideMenuLeft',
             id: 'SideMenuLeft+UNIQUE_ID',
+            data: {},
             children: [
               {
                 type: 'Container',
@@ -154,10 +159,12 @@ describe('LayoutTreeParser', () => {
           {
             type: 'SideMenuCenter',
             id: 'SideMenuCenter+UNIQUE_ID',
+            data: {},
             children: [
               {
                 type: 'ContainerStack',
                 id: 'ContainerStack+UNIQUE_ID',
+                data: {},
                 children: [
                   {
                     type: 'Container',
@@ -180,14 +187,17 @@ describe('LayoutTreeParser', () => {
       .toEqual({
         type: 'SideMenuRoot',
         id: 'SideMenuRoot+UNIQUE_ID',
+        data: {},
         children: [
           {
             type: 'SideMenuCenter',
             id: 'SideMenuCenter+UNIQUE_ID',
+            data: {},
             children: [
               {
                 type: 'ContainerStack',
                 id: 'ContainerStack+UNIQUE_ID',
+                data: {},
                 children: [
                   {
                     type: 'Container',
@@ -204,6 +214,7 @@ describe('LayoutTreeParser', () => {
           {
             type: 'SideMenuRight',
             id: 'SideMenuRight+UNIQUE_ID',
+            data: {},
             children: [
               {
                 type: 'Container',
@@ -224,10 +235,12 @@ describe('LayoutTreeParser', () => {
       .toEqual({
         type: 'SideMenuRoot',
         id: 'SideMenuRoot+UNIQUE_ID',
+        data: {},
         children: [
           {
             type: 'SideMenuLeft',
             id: 'SideMenuLeft+UNIQUE_ID',
+            data: {},
             children: [
               {
                 type: 'Container',
@@ -242,10 +255,12 @@ describe('LayoutTreeParser', () => {
           {
             type: 'SideMenuCenter',
             id: 'SideMenuCenter+UNIQUE_ID',
+            data: {},
             children: [
               {
                 type: 'ContainerStack',
                 id: 'ContainerStack+UNIQUE_ID',
+                data: {},
                 children: [
                   {
                     type: 'Container',
@@ -262,6 +277,7 @@ describe('LayoutTreeParser', () => {
           {
             type: 'SideMenuRight',
             id: 'SideMenuRight+UNIQUE_ID',
+            data: {},
             children: [
               {
                 type: 'Container',
@@ -282,10 +298,12 @@ describe('LayoutTreeParser', () => {
       .toEqual({
         type: 'SideMenuRoot',
         id: 'SideMenuRoot+UNIQUE_ID',
+        data: {},
         children: [
           {
             type: 'SideMenuLeft',
             id: 'SideMenuLeft+UNIQUE_ID',
+            data: {},
             children: [
               {
                 type: 'Container',
@@ -300,14 +318,17 @@ describe('LayoutTreeParser', () => {
           {
             type: 'SideMenuCenter',
             id: 'SideMenuCenter+UNIQUE_ID',
+            data: {},
             children: [
               {
                 type: 'Tabs',
                 id: 'Tabs+UNIQUE_ID',
+                data: {},
                 children: [
                   {
                     type: 'ContainerStack',
                     id: 'ContainerStack+UNIQUE_ID',
+                    data: {},
                     children: [
                       {
                         type: 'Container',
@@ -322,6 +343,7 @@ describe('LayoutTreeParser', () => {
                   {
                     type: 'ContainerStack',
                     id: 'ContainerStack+UNIQUE_ID',
+                    data: {},
                     children: [
                       {
                         type: 'Container',
@@ -340,6 +362,7 @@ describe('LayoutTreeParser', () => {
           {
             type: 'SideMenuRight',
             id: 'SideMenuRight+UNIQUE_ID',
+            data: {},
             children: [
               {
                 type: 'Container',

src/commands/SimpleLayouts.js

@@ -4,18 +4,17 @@ export const singleScreenApp = {
   }
 };
 
-export const passedFunction = () => 'Hello from a function';
+export const passProps = {
+  strProp: 'string prop',
+  numProp: 12345,
+  objProp: { inner: { foo: 'bar' } },
+  fnProp: () => 'Hello from a function'
+};
 
 export const singleScreenWithAditionalParams = {
   container: {
     name: 'com.example.MyScreen',
-    passProps: {
-      foo: {
-        number: 1,
-        string: 'Hello!'
-      },
-      bar: passedFunction
-    },
+    passProps: passProps,
     style: {},
     buttons: {}
   }