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

@@ -60,7 +60,7 @@ public class ReactRootViewController extends ViewController {
 	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

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

lib/src/containers/ContainerRegistry.test.js

@@ -40,7 +40,7 @@ describe('ContainerRegistry', () => {
   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

@@ -7,20 +7,20 @@ export default class ContainerWrapper {
       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))
         };
       }
 
@@ -29,11 +29,11 @@ export default class ContainerWrapper {
       }
 
       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() {
@@ -50,7 +50,7 @@ export default class ContainerWrapper {
 
       componentWillReceiveProps(nextProps) {
         this.setState({
-          allProps: _.merge({}, nextProps, store.getPropsForContainerId(this.state.id))
+          allProps: _.merge({}, nextProps, store.getPropsForContainerId(this.state.containerId))
         });
       }
 
@@ -59,8 +59,8 @@ export default class ContainerWrapper {
           <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

@@ -34,7 +34,7 @@ describe('ContainerWrapper', () => {
     render() {
       const Child = this.ChildClass;
       return (
-        <Child id="container1" {...this.state.propsFromState} />
+        <Child containerId="container1" {...this.state.propsFromState} />
       );
     }
   }
@@ -43,27 +43,27 @@ describe('ContainerWrapper', () => {
     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');
   });
 
@@ -78,8 +78,8 @@ describe('ContainerWrapper', () => {
   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', () => {
@@ -96,42 +96,42 @@ describe('ContainerWrapper', () => {
   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();
@@ -154,14 +154,14 @@ describe('ContainerWrapper', () => {
 
     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);
@@ -169,7 +169,7 @@ describe('ContainerWrapper', () => {
 
     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

@@ -6,14 +6,14 @@ export default class Lifecycle {
   }
 
   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

@@ -11,7 +11,7 @@ describe('Lifecycle', () => {
       onStop: jest.fn()
     };
     store = new Store();
-    store.setRefForId('myUniqueId', mockRef);
+    store.setRefForContainerId('myUniqueId', mockRef);
 
     uut = new Lifecycle(store);
   });
@@ -30,7 +30,7 @@ describe('Lifecycle', () => {
     it('skips unimplemented onStart', () => {
       mockRef = {};
       expect(mockRef.onStart).toBeUndefined();
-      store.setRefForId('myUniqueId', mockRef);
+      store.setRefForContainerId('myUniqueId', mockRef);
       uut.containerStart('myUniqueId');
     });
   });
@@ -49,7 +49,7 @@ describe('Lifecycle', () => {
     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

@@ -23,11 +23,11 @@ export default class Store {
     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

@@ -32,18 +32,18 @@ describe('Store', () => {
 
   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

@@ -18,7 +18,7 @@ describe('PrivateEventsListener', () => {
     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

@@ -30,13 +30,13 @@ class LifecycleScreen extends Component {
         <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

@@ -32,7 +32,7 @@ class ModalScreen extends Component {
         {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>
     );
@@ -44,14 +44,14 @@ class ModalScreen extends Component {
         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

@@ -24,7 +24,7 @@ class OptionsScreen extends Component {
       <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

@@ -30,23 +30,23 @@ class PushedScreen extends Component {
         <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() {
@@ -58,7 +58,7 @@ class PushedScreen extends Component {
   }
 
   onClickPopToRoot() {
-    Navigation.popToRoot(this.props.id);
+    Navigation.popToRoot(this.props.containerId);
   }
 
   getStackPosition() {

playground/src/containers/TextScreen.js

@@ -11,7 +11,7 @@ class TextScreen extends Component {
       <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

@@ -23,7 +23,7 @@ class WelcomeScreen extends Component {
         <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>
     );
   }
@@ -102,13 +102,13 @@ class WelcomeScreen extends Component {
   }
 
   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'
     });
   }
@@ -126,7 +126,7 @@ class WelcomeScreen extends Component {
   }
 
   onClickPushOptionsScreen() {
-    Navigation.push(this.props.id, {
+    Navigation.push(this.props.containerId, {
       name: 'navigation.playground.OptionsScreen'
     });
   }