changed this.props.id to this.props.containerId (#1327)

* changed this.props.id to this.props.containerId

* fixed js tests

* refactor

lib/android/app/src/main/java/com/reactnativenavigation/layout/ReactRootViewController.java

 	protected View createView() {
 		reactRootView = new ReactRootView(getActivity());
 		Bundle opts = new Bundle();
-		opts.putString("id", getId());
+		opts.putString("containerId", getId());
 		reactRootView.startReactApplication(this.reactInstanceManager, this.name, opts);
 		reactRootView.setEventListener(new ReactRootView.ReactRootViewEventListener() {
 			@Override

lib/ios/RNNReactRootViewCreator.m

 	
 	UIView *view = [[RNNReactRootView alloc] initWithBridge:_bridge
 										 moduleName:name
-								  initialProperties:@{@"id": rootViewId}];
+								  initialProperties:@{@"containerId": rootViewId}];
 	return view;
 }
 

lib/src/containers/ContainerRegistry.test.js

   it('resulting in a normal component', () => {
     uut.registerContainer('example.MyContainer.name', () => MyContainer);
     const Container = AppRegistry.registerComponent.mock.calls[0][1]();
-    const tree = renderer.create(<Container id="123" />);
+    const tree = renderer.create(<Container containerId="123" />);
     expect(tree.toJSON().children).toEqual(['Hello, World!']);
   });
 });

lib/src/containers/ContainerWrapper.js

       constructor(props) {
         super(props);
         this._saveContainerRef = this._saveContainerRef.bind(this);
-        this._assertId(props);
+        this._assertContainerId(props);
         this._createState(props);
       }
 
-      _assertId(props) {
-        if (!props.id) {
-          throw new Error(`Container ${containerName} does not have an id!`);
+      _assertContainerId(props) {
+        if (!props.containerId) {
+          throw new Error(`Container ${containerName} does not have a containerId!`);
         }
       }
 
       _createState(props) {
         this.state = {
-          id: props.id,
-          allProps: _.merge({}, props, store.getPropsForContainerId(props.id))
+          containerId: props.containerId,
+          allProps: _.merge({}, props, store.getPropsForContainerId(props.containerId))
         };
       }
 
       }
 
       componentWillMount() {
-        store.setRefForId(this.state.id, this);
+        store.setRefForContainerId(this.state.containerId, this);
       }
 
       componentWillUnmount() {
-        store.cleanId(this.state.id);
+        store.cleanId(this.state.containerId);
       }
 
       onStart() {
 
       componentWillReceiveProps(nextProps) {
         this.setState({
-          allProps: _.merge({}, nextProps, store.getPropsForContainerId(this.state.id))
+          allProps: _.merge({}, nextProps, store.getPropsForContainerId(this.state.containerId))
         });
       }
 
           <OriginalContainer
             ref={this._saveContainerRef}
             {...this.state.allProps}
-            id={this.state.id}
-            key={this.state.id}
+            containerId={this.state.containerId}
+            key={this.state.containerId}
           />
         );
       }

lib/src/containers/ContainerWrapper.test.js

     render() {
       const Child = this.ChildClass;
       return (
-        <Child id="container1" {...this.state.propsFromState} />
+        <Child containerId="container1" {...this.state.propsFromState} />
       );
     }
   }
     store = new Store();
   });
 
-  it('must have id as prop', () => {
+  it('must have containerId as prop', () => {
     const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
     const orig = console.error; //eslint-disable-line
     console.error = (a) => a; //eslint-disable-line
     expect(() => {
       renderer.create(<NavigationContainer />);
-    }).toThrow(new Error('Container example.MyContainer does not have an id!'));
+    }).toThrow(new Error('Container example.MyContainer does not have a containerId!'));
     console.error = orig; //eslint-disable-line
   });
 
   it('wraps the container', () => {
     const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
     expect(NavigationContainer).not.toBeInstanceOf(MyContainer);
-    const tree = renderer.create(<NavigationContainer id={'container1'} />);
+    const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
     expect(tree.toJSON().children).toEqual(['Hello, World!']);
     expect(myContainerRef).toBeInstanceOf(MyContainer);
   });
 
   it('injects props from wrapper into original container', () => {
     const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
-    renderer.create(<NavigationContainer id={'container1'} myProp={'yo'} />);
+    renderer.create(<NavigationContainer containerId={'container1'} myProp={'yo'} />);
     expect(myContainerRef.props.myProp).toEqual('yo');
   });
 
   it('pulls props from the store and injects them into the inner container', () => {
     store.setPropsForContainerId('container123', { numberProp: 1, stringProp: 'hello', objectProp: { a: 2 } });
     const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
-    renderer.create(<NavigationContainer id={'container123'} />);
-    expect(myContainerRef.props).toEqual({ id: 'container123', numberProp: 1, stringProp: 'hello', objectProp: { a: 2 } });
+    renderer.create(<NavigationContainer containerId={'container123'} />);
+    expect(myContainerRef.props).toEqual({ containerId: 'container123', numberProp: 1, stringProp: 'hello', objectProp: { a: 2 } });
   });
 
   it('updates props from store into inner container', () => {
   it('protects id from change', () => {
     const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
     renderer.create(<TestParent ChildClass={NavigationContainer} />);
-    expect(myContainerRef.props.id).toEqual('container1');
+    expect(myContainerRef.props.containerId).toEqual('container1');
     testParentRef.setState({ propsFromState: { id: 'ERROR' } });
-    expect(myContainerRef.props.id).toEqual('container1');
+    expect(myContainerRef.props.containerId).toEqual('container1');
   });
 
   it('assignes key by id', () => {
     const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
-    renderer.create(<NavigationContainer id={'container1'} />);
-    expect(myContainerRef.props.id).toEqual('container1');
+    renderer.create(<NavigationContainer containerId={'container1'} />);
+    expect(myContainerRef.props.containerId).toEqual('container1');
     expect(myContainerRef._reactInternalInstance.key).toEqual('container1');
   });
 
   it('saves self ref into store', () => {
     const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
-    const tree = renderer.create(<NavigationContainer id={'container1'} />);
-    expect(store.getRefForId('container1')).toBeDefined();
-    expect(store.getRefForId('container1')).toBe(tree.getInstance());
+    const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
+    expect(store.getRefForContainerId('container1')).toBeDefined();
+    expect(store.getRefForContainerId('container1')).toBe(tree.getInstance());
   });
 
   it('cleans ref from store on unMount', () => {
     const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
-    const tree = renderer.create(<NavigationContainer id={'container1'} />);
-    expect(store.getRefForId('container1')).toBeDefined();
+    const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
+    expect(store.getRefForContainerId('container1')).toBeDefined();
     tree.unmount();
-    expect(store.getRefForId('container1')).toBeUndefined();
+    expect(store.getRefForContainerId('container1')).toBeUndefined();
   });
 
   it('holds ref to OriginalContainer', () => {
     const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
-    const tree = renderer.create(<NavigationContainer id={'container1'} />);
+    const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
     expect(tree.getInstance().originalContainerRef).toBe(myContainerRef);
   });
 
   it('cleans ref to internal container on unount', () => {
     const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
-    const tree = renderer.create(<NavigationContainer id={'container1'} />);
+    const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
     const instance = tree.getInstance();
     expect(instance.originalContainerRef).toBeInstanceOf(Component);
     tree.unmount();
 
     it('onStart and onStop are optional', () => {
       const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
-      const tree = renderer.create(<NavigationContainer id={'container1'} />);
+      const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
       expect(() => tree.getInstance().onStart()).not.toThrow();
       expect(() => tree.getInstance().onStop()).not.toThrow();
     });
 
     it('calls onStart on OriginalContainer', () => {
       const NavigationContainer = ContainerWrapper.wrap(containerName, MyLifecycleContainer, store);
-      const tree = renderer.create(<NavigationContainer id={'container1'} />);
+      const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
       expect(onStartCallback).toHaveBeenCalledTimes(0);
       tree.getInstance().onStart();
       expect(onStartCallback).toHaveBeenCalledTimes(1);
 
     it('calls onSop on OriginalContainer', () => {
       const NavigationContainer = ContainerWrapper.wrap(containerName, MyLifecycleContainer, store);
-      const tree = renderer.create(<NavigationContainer id={'container1'} />);
+      const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
       expect(onStopCallback).toHaveBeenCalledTimes(0);
       tree.getInstance().onStop();
       expect(onStopCallback).toHaveBeenCalledTimes(1);

lib/src/containers/Lifecycle.js

   }
 
   containerStart(id) {
-    const ref = this.store.getRefForId(id);
+    const ref = this.store.getRefForContainerId(id);
     if (ref && ref.onStart) {
       ref.onStart();
     }
   }
 
   containerStop(id) {
-    const ref = this.store.getRefForId(id);
+    const ref = this.store.getRefForContainerId(id);
     if (ref && ref.onStop) {
       ref.onStop();
     }

lib/src/containers/Lifecycle.test.js

       onStop: jest.fn()
     };
     store = new Store();
-    store.setRefForId('myUniqueId', mockRef);
+    store.setRefForContainerId('myUniqueId', mockRef);
 
     uut = new Lifecycle(store);
   });
     it('skips unimplemented onStart', () => {
       mockRef = {};
       expect(mockRef.onStart).toBeUndefined();
-      store.setRefForId('myUniqueId', mockRef);
+      store.setRefForContainerId('myUniqueId', mockRef);
       uut.containerStart('myUniqueId');
     });
   });
     it('skips unimplemented onStop', () => {
       mockRef = {};
       expect(mockRef.onStop).toBeUndefined();
-      store.setRefForId('myUniqueId', mockRef);
+      store.setRefForContainerId('myUniqueId', mockRef);
       uut.containerStop('myUniqueId');
     });
   });

lib/src/containers/Store.js

     return _.get(this.containersByName, containerName);
   }
 
-  setRefForId(id, ref) {
+  setRefForContainerId(id, ref) {
     _.set(this.refsById, id, ref);
   }
 
-  getRefForId(id) {
+  getRefForContainerId(id) {
     return _.get(this.refsById, id);
   }
 

lib/src/containers/Store.test.js

 
   it('holds container refs by id', () => {
     const ref = {};
-    uut.setRefForId('refUniqueId', ref);
-    expect(uut.getRefForId('other')).toBeUndefined();
-    expect(uut.getRefForId('refUniqueId')).toBe(ref);
+    uut.setRefForContainerId('refUniqueId', ref);
+    expect(uut.getRefForContainerId('other')).toBeUndefined();
+    expect(uut.getRefForContainerId('refUniqueId')).toBe(ref);
   });
 
   it('clean by id', () => {
-    uut.setRefForId('refUniqueId', {});
+    uut.setRefForContainerId('refUniqueId', {});
     uut.setPropsForContainerId('refUniqueId', { foo: 'bar' });
 
     uut.cleanId('refUniqueId');
 
-    expect(uut.getRefForId('refUniqueId')).toBeUndefined();
+    expect(uut.getRefForContainerId('refUniqueId')).toBeUndefined();
     expect(uut.getPropsForContainerId('refUniqueId')).toEqual({});
   });
 });

lib/src/events/PrivateEventsListener.test.js

     const mockRef = {
       onStart: jest.fn()
     };
-    store.setRefForId('myContainerId', mockRef);
+    store.setRefForContainerId('myContainerId', mockRef);
     uut.listenAndHandlePrivateEvents();
     expect(nativeEventsReceiver.containerStart).toHaveBeenCalledTimes(1);
     const callbackFunction = nativeEventsReceiver.containerStart.mock.calls[0][0];

playground/src/containers/LifecycleScreen.js

         <Text style={styles.h1}>{`Lifecycle Screen`}</Text>
         <Text style={styles.h1}>{this.state.text}</Text>
         <Button title="Push to test onStop" onPress={this.onClickPush} />
-        <Text style={styles.footer}>{`this.props.id = ${this.props.id}`}</Text>
+        <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
       </View>
     );
   }
 
   onClickPush() {
-    Navigation.push(this.props.id, {
+    Navigation.push(this.props.containerId, {
       name: 'navigation.playground.TextScreen'
     });
   }

playground/src/containers/ModalScreen.js

         {this.getPreviousModalId() ? (<Button title="Dismiss Previous Modal" onPress={this.onClickDismissPreviousModal} />) : undefined}
         {this.props.previousModalIds ? (<Button title="Dismiss ALL Previous Modals" onPress={this.onClickDismissAllPreviousModals} />) : undefined}
         {this.props.previousModalIds ? (<Button title="Dismiss First In Stack" onPress={this.onClickDismissFirstInStack} />) : undefined}
-        <Text style={styles.footer}>{`this.props.id = ${this.props.id}`}</Text>
+        <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
 
       </View>
     );
         name: 'navigation.playground.ModalScreen',
         passProps: {
           modalPosition: this.getModalPosition() + 1,
-          previousModalIds: _.concat([], this.props.previousModalIds || [], this.props.id)
+          previousModalIds: _.concat([], this.props.previousModalIds || [], this.props.containerId)
         }
       }
     });
   }
 
   onClickDismissModal() {
-    Navigation.dismissModal(this.props.id);
+    Navigation.dismissModal(this.props.containerId);
   }
 
   onClickDismissPreviousModal() {

playground/src/containers/OptionsScreen.js

       <View style={styles.root}>
         <Text style={styles.h1}>{`Options Screen`}</Text>
         <Button title="Dynamic Options" onPress={this.onClickDynamicOptions} />
-        <Text style={styles.footer}>{`this.props.id = ${this.props.id}`}</Text>
+        <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
       </View>
     );
   }

playground/src/containers/PushedScreen.js

         <Button title="Pop Previous" onPress={this.onClickPopPrevious} />
         <Button title="Pop To Root" onPress={this.onClickPopToRoot} />
         {stackPosition > 2 && <Button title="Pop To Stack Position 1" onPress={this.onClickPopToFirstPosition} />}
-        <Text style={styles.footer}>{`this.props.id = ${this.props.id}`}</Text>
+        <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
       </View>
     );
   }
 
   onClickPush() {
-    Navigation.push(this.props.id, {
+    Navigation.push(this.props.containerId, {
       name: 'navigation.playground.PushedScreen',
       passProps: {
         stackPosition: this.getStackPosition() + 1,
-        previousScreenIds: _.concat([], this.props.previousScreenIds || [], this.props.id)
+        previousScreenIds: _.concat([], this.props.previousScreenIds || [], this.props.containerId)
       }
     });
   }
 
   onClickPop() {
-    Navigation.pop(this.props.id);
+    Navigation.pop(this.props.containerId);
   }
 
   onClickPopPrevious() {
   }
 
   onClickPopToRoot() {
-    Navigation.popToRoot(this.props.id);
+    Navigation.popToRoot(this.props.containerId);
   }
 
   getStackPosition() {

playground/src/containers/TextScreen.js

       <View style={styles.root}>
         <Text style={styles.h1}>{this.props.text || 'Text Screen'}</Text>
         {this.renderTextFromFunctionInProps()}
-        <Text style={styles.footer}>{`this.props.id = ${this.props.id}`}</Text>
+        <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
       </View>
     );
   }

playground/src/containers/WelcomeScreen.js

         <Button title="Push Options Screen" onPress={this.onClickPushOptionsScreen} />
         <Button title="Show Modal" onPress={this.onClickShowModal} />
         <Button title="Show Redbox" onPress={this.onClickShowRedbox} />
-        <Text style={styles.footer}>{`this.props.id = ${this.props.id}`}</Text>
+        <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
       </View>
     );
   }
   }
 
   onClickPush() {
-    Navigation.push(this.props.id, {
+    Navigation.push(this.props.containerId, {
       name: 'navigation.playground.PushedScreen'
     });
   }
 
   onClickLifecycleScreen() {
-    Navigation.push(this.props.id, {
+    Navigation.push(this.props.containerId, {
       name: 'navigation.playground.LifecycleScreen'
     });
   }
   }
 
   onClickPushOptionsScreen() {
-    Navigation.push(this.props.id, {
+    Navigation.push(this.props.containerId, {
       name: 'navigation.playground.OptionsScreen'
     });
   }