renaming

integration/redux/MyContainer.js

 const { connect } = require('react-redux');
 const store = require('./MyStore');
 
-class MyContainer extends Component {
+class MyComponent extends Component {
   render() {
     if (this.props.renderCountIncrement) {
       this.props.renderCountIncrement();
   };
 }
 
-module.exports = connect(mapStateToProps)(MyContainer);
+module.exports = connect(mapStateToProps)(MyComponent);

integration/redux/Redux.test.js

 const { Provider } = require('react-redux');
 
 describe('redux support', () => {
-  let MyConnectedContainer;
+  let MyConnectedComponent;
   let store;
 
   beforeEach(() => {
-    MyConnectedContainer = require('./MyContainer');
+    MyConnectedComponent = require('./MyComponent');
     store = require('./MyStore');
   });
 
   it('renders normally', () => {
     const tree = renderer.create(
       <Provider store={store.reduxStore}>
-        <MyConnectedContainer />
+        <MyConnectedComponent />
       </Provider>
     );
     expect(tree.toJSON().children).toEqual(['no name']);
     const renderCountIncrement = jest.fn();
     const tree = renderer.create(
       <Provider store={store.reduxStore}>
-        <MyConnectedContainer renderCountIncrement={renderCountIncrement} />
+        <MyConnectedComponent renderCountIncrement={renderCountIncrement} />
       </Provider>
     );
 
     const renderCountIncrement = jest.fn();
     const tree = renderer.create(
       <Provider store={store.reduxStore}>
-        <MyConnectedContainer printAge={true} renderCountIncrement={renderCountIncrement} />
+        <MyConnectedComponent printAge={true} renderCountIncrement={renderCountIncrement} />
       </Provider>
     );
 

integration/remx/MyContainer.js

 const { connect } = require('remx');
 const store = require('./MyStore');
 
-class MyContainer extends Component {
+class MyComponent extends Component {
   render() {
     if (this.props.renderCountIncrement) {
       this.props.renderCountIncrement();
   };
 }
 
-module.exports = connect(mapStateToProps)(MyContainer);
+module.exports = connect(mapStateToProps)(MyComponent);

integration/remx/remx.test.js

 const renderer = require('react-test-renderer');
 
 describe('remx support', () => {
-  let MyConnectedContainer;
+  let MyConnectedComponent;
   let store;
 
   beforeEach(() => {
-    MyConnectedContainer = require('./MyContainer');
+    MyConnectedComponent = require('./MyComponent');
     store = require('./MyStore');
   });
 
   it('renders normally', () => {
-    const tree = renderer.create(<MyConnectedContainer />);
+    const tree = renderer.create(<MyConnectedComponent />);
     expect(tree.toJSON().children).toEqual(['no name']);
   });
 
   it('rerenders as a result of an underlying state change (by selector)', () => {
     const renderCountIncrement = jest.fn();
-    const tree = renderer.create(<MyConnectedContainer renderCountIncrement={renderCountIncrement} />);
+    const tree = renderer.create(<MyConnectedComponent renderCountIncrement={renderCountIncrement} />);
 
     expect(tree.toJSON().children).toEqual(['no name']);
     expect(renderCountIncrement).toHaveBeenCalledTimes(1);
 
   it('rerenders as a result of an underlying state change with a new key', () => {
     const renderCountIncrement = jest.fn();
-    const tree = renderer.create(<MyConnectedContainer printAge={true} renderCountIncrement={renderCountIncrement} />);
+    const tree = renderer.create(<MyConnectedComponent printAge={true} renderCountIncrement={renderCountIncrement} />);
 
     expect(tree.toJSON().children).toEqual(null);
     expect(renderCountIncrement).toHaveBeenCalledTimes(1);

playground/src/app.js

 const Navigation = require('react-native-navigation');
-const { registerContainers } = require('./containers');
+const { registerComponents } = require('./components');
 
 function start() {
-  registerContainers();
+  registerComponents();
   Navigation.events().onAppLaunched(() => {
     Navigation.setRoot({
       stack: {

playground/src/containers/CustomTransitionDestination.js

     };
   }
   push() {
-    Navigation.push(this.props.containerId, {
+    Navigation.push(this.props.componentId, {
       component: {
         name: 'navigation.playground.OptionsScreen'
       }
     });
   }
   pop() {
-    Navigation.pop(this.props.containerId, {
+    Navigation.pop(this.props.componentId, {
       customTransition: {
         animations: [{ type: 'sharedElement', fromId: 'title2', toId: 'title1', startDelay: 0, springVelocity: 0.2, duration: 0.5 },
         { type: 'sharedElement', toId: 'image1', fromId: 'customDestinationImage', startDelay: 0, springVelocity: 0.2, duration: 0.5 },

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 didDisappear" testID={testIDs.PUSH_TO_TEST_DID_DISAPPEAR_BUTTON} onPress={this.onClickPush} />
-        <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
+        <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
       </View>
     );
   }
 
   onClickPush() {
-    Navigation.push(this.props.containerId, { component: { name: 'navigation.playground.TextScreen' } });
+    Navigation.push(this.props.componentId, { component: { name: 'navigation.playground.TextScreen' } });
   }
 }
 module.exports = LifecycleScreen;

playground/src/containers/OptionsScreen.js

         <Button title="Custom Transition" onPress={this.onClickCustomTranstition} />
         <Button title="Show custom alert" testID={testIDs.SHOW_CUSTOM_ALERT_BUTTON} onPress={this.onClickAlert} />
         <Button title="Show snackbar" testID={testIDs.SHOW_SNACKBAR_BUTTON} onPress={this.onClickSnackbar} />
-        <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
+        <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
       </View>
     );
   }
 
   onNavigationButtonPressed(id) {
     if (id === BUTTON_ONE) {
-      Navigation.setOptions(this.props.containerId, {
+      Navigation.setOptions(this.props.componentId, {
         topBar: {
           rightButtons: [{
             id: BUTTON_TWO,
         }
       });
     } else if (id === BUTTON_TWO) {
-      Navigation.setOptions(this.props.containerId, {
+      Navigation.setOptions(this.props.componentId, {
         topBar: {
           rightButtons: [{
             id: BUTTON_ONE,
         }
       });
     } else if (id === BUTTON_LEFT) {
-      Navigation.pop(this.props.containerId);
+      Navigation.pop(this.props.componentId);
     }
   }
 
   onClickDynamicOptions() {
-    Navigation.setOptions(this.props.containerId, {
+    Navigation.setOptions(this.props.componentId, {
       topBar: {
         title: 'Dynamic Title',
         textColor: '#00FFFF',
   }
 
   onClickScrollViewScreen() {
-    Navigation.push(this.props.containerId, {
+    Navigation.push(this.props.componentId, {
       component: {
         name: 'navigation.playground.ScrollViewScreen'
       }
   }
 
   onClickCustomTranstition() {
-    Navigation.push(this.props.containerId, {
+    Navigation.push(this.props.componentId, {
       component: {
         name: 'navigation.playground.CustomTransitionOrigin'
       }
   }
 
   onClickTopBarTransparent() {
-    Navigation.setOptions(this.props.containerId, {
+    Navigation.setOptions(this.props.componentId, {
       topBar: {
         transparent: true
       }
     });
   }
   onClickTopBarOpaque() {
-    Navigation.setOptions(this.props.containerId, {
+    Navigation.setOptions(this.props.componentId, {
       topBar: {
         transparent: false
       }
     });
   }
   onClickShowTopBar() {
-    Navigation.setOptions(this.props.containerId, {
+    Navigation.setOptions(this.props.componentId, {
       topBar: {
         hidden: false,
         animateHide: true
   }
 
   onClickHideTopBar() {
-    Navigation.setOptions(this.props.containerId, {
+    Navigation.setOptions(this.props.componentId, {
       topBar: {
         hidden: true,
         animateHide: true

playground/src/containers/OrientationDetectScreen.js

 
     this.detectHorizontal = this.detectHorizontal.bind(this);
     this.state = { horizontal: false };
-    Navigation.setOptions(this.props.containerId, {
+    Navigation.setOptions(this.props.componentId, {
       orientation: props.orientation
     });
   }
     return (
       <View style={styles.root} onLayout={this.detectHorizontal}>
         <Text style={styles.h1}>{`Orientation Screen`}</Text>
-        <Button title="Dismiss" testID={testIDs.DISMISS_BUTTON} onPress={() => Navigation.dismissModal(this.props.containerId)} />
-        <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
+        <Button title="Dismiss" testID={testIDs.DISMISS_BUTTON} onPress={() => Navigation.dismissModal(this.props.componentId)} />
+        <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
         <Text style={styles.footer} testID="currentOrientation">{this.state.horizontal ? 'Landscape' : 'Portrait'}</Text>
       </View>
     );

playground/src/containers/PushedScreen.js

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

playground/src/containers/ScrollViewScreen.js

   }
 
   onClickToggleTopBarHideOnScroll() {
-    Navigation.setOptions(this.props.containerId, {
+    Navigation.setOptions(this.props.componentId, {
       topBar: {
         hideOnScroll: !this.state.topBarHideOnScroll
       }

playground/src/containers/SideMenuScreen.js

   }
 
   hideSideMenu() {
-    Navigation.setOptions(this.props.containerId, {
+    Navigation.setOptions(this.props.componentId, {
       sideMenu: {
         [this.props.side]: {
           visible: false

playground/src/containers/TextScreen.js

 const Navigation = require('react-native-navigation');
 const testIDs = require('../testIDs');
 
-let globalFirstContainerID;
+let globalFirstComponentID;
 
 class TextScreen extends Component {
   static get options() {
 
   constructor(props) {
     super(props);
-    globalFirstContainerID = (props.text === 'This is tab 1') ? props.containerId : globalFirstContainerID;
+    globalFirstComponentID = (props.text === 'This is tab 1') ? props.componentId : globalFirstComponentID;
   }
 
   render() {
       <View style={styles.root}>
         <Text style={styles.h1} testID={testIDs.CENTERED_TEXT_HEADER}>{this.props.text || 'Text Screen'}</Text>
         {this.renderTextFromFunctionInProps()}
-        <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
+        <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
         <Button title={'Set Tab Badge'} testID={testIDs.SET_TAB_BADGE_BUTTON} onPress={() => this.onButtonPress()} />
         <Button title={'Switch To Tab 2'} testID={testIDs.SWITCH_SECOND_TAB_BUTTON} onPress={() => this.onClickSwitchToTab()} />
-        <Button title={'Switch To Tab 1 by containerID'} testID={testIDs.SWITCH_FIRST_TAB_BUTTON} onPress={() => this.onClickSwitchToTabByContainerID()} />
+        <Button title={'Switch To Tab 1 by componentID'} testID={testIDs.SWITCH_FIRST_TAB_BUTTON} onPress={() => this.onClickSwitchToTabByComponentID()} />
         <Button title="Hide Tab Bar" testID={testIDs.HIDE_BOTTOM_TABS_BUTTON} onPress={() => this.hideTabBar(true)} />
         <Button title="Show Tab Bar" testID={testIDs.SHOW_BOTTOM_TABS_BUTTON} onPress={() => this.hideTabBar(false)} />
         <Button title="Show Left Side Menu" testID={testIDs.SHOW_LEFT_SIDE_MENU_BUTTON} onPress={() => this.showSideMenu('left')} />
   }
 
   onButtonPress() {
-    Navigation.setOptions(this.props.containerId, {
+    Navigation.setOptions(this.props.componentId, {
       bottomTab: {
         badge: `TeSt`
       }
   }
 
   onClickSwitchToTab() {
-    Navigation.setOptions(this.props.containerId, {
+    Navigation.setOptions(this.props.componentId, {
       bottomTabs: {
         currentTabIndex: 1,
         hidden: true,
     });
   }
 
-  onClickSwitchToTabByContainerID() {
-    Navigation.setOptions(this.props.containerId, {
+  onClickSwitchToTabByComponentID() {
+    Navigation.setOptions(this.props.componentId, {
       bottomTabs: {
-        currentTabId: globalFirstContainerID
+        currentTabId: globalFirstComponentID
       }
     });
   }
 
   hideTabBar(hidden) {
-    Navigation.setOptions(this.props.containerId, {
+    Navigation.setOptions(this.props.componentId, {
       bottomTabs: {
         hidden
       }
   }
 
   showSideMenu(side) {
-    Navigation.setOptions(this.props.containerId, {
+    Navigation.setOptions(this.props.componentId, {
       sideMenu: {
         [side]: {
           visible: true

playground/src/containers/TopTabOptionsScreen.js

     return (
       <View style={styles.root}>
         <Text style={styles.h1}>{this.props.text || 'Top Tab Screen'}</Text>
-        <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
+        <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
         <Button title="Dynamic Options" testID={testIDs.DYNAMIC_OPTIONS_BUTTON} onPress={this.onClickDynamicOptions} />
       </View>
     );
   }
 
   onClickDynamicOptions() {
-    Navigation.setOptions(this.props.containerId, {
+    Navigation.setOptions(this.props.componentId, {
       topBar: {
         title: 'Dynamic Title',
         textColor: '#00FFFF',

playground/src/containers/TopTabScreen.js

 
   constructor(props) {
     super(props);
-    Navigation.setOptions(this.props.containerId, {
+    Navigation.setOptions(this.props.componentId, {
       topBar: {
         title: this.props.title
       }
     return (
       <View style={styles.root}>
         <Text style={styles.h1}>{this.props.text || 'Top Tab Screen'}</Text>
-        <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
+        <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
       </View>
     );
   }

playground/src/containers/WelcomeScreen.js

         <Button title="Show Modal" testID={testIDs.SHOW_MODAL_BUTTON} onPress={this.onClickShowModal} />
         <Button title="Show Redbox" testID={testIDs.SHOW_REDBOX_BUTTON} onPress={this.onClickShowRedbox} />
         <Button title="Orientation" testID={testIDs.ORIENTATION_BUTTON} onPress={this.onClickPushOrientationMenuScreen} />
-        <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
+        <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
       </View>
     );
   }
   }
 
   async onClickPush() {
-    await Navigation.push(this.props.containerId, {
+    await Navigation.push(this.props.componentId, {
       component: {
         name: 'navigation.playground.PushedScreen'
       }
   }
 
   onClickLifecycleScreen() {
-    Navigation.push(this.props.containerId, {
+    Navigation.push(this.props.componentId, {
       component: {
         name: 'navigation.playground.LifecycleScreen'
       }
   }
 
   onClickPushOptionsScreen() {
-    Navigation.push(this.props.containerId, {
+    Navigation.push(this.props.componentId, {
       component: {
         name: 'navigation.playground.OptionsScreen'
       }
   }
 
   onClickPushTopTabsScreen() {
-    Navigation.push(this.props.containerId, {
+    Navigation.push(this.props.componentId, {
       topTabs: [
         {
           name: 'navigation.playground.TopTabOptionsScreen',
   }
 
   onClickBackHandler() {
-    Navigation.push(this.props.containerId, {
+    Navigation.push(this.props.componentId, {
       component: {
         name: 'navigation.playground.BackHandlerScreen'
       }
   }
 
   onClickPushOrientationMenuScreen() {
-    Navigation.push(this.props.containerId, {
+    Navigation.push(this.props.componentId, {
       component: {
         name: 'navigation.playground.OrientationSelectScreen'
       }

playground/src/containers/index.js

 const TopTabScreen = require('./TopTabScreen');
 const TopTabOptionsScreen = require('./TopTabOptionsScreen');
 
-function registerContainers() {
-  Navigation.registerContainer(`navigation.playground.CustomTransitionDestination`, () => CustomTransitionDestination);
-  Navigation.registerContainer(`navigation.playground.CustomTransitionOrigin`, () => CustomTransitionOrigin);
-  Navigation.registerContainer(`navigation.playground.ScrollViewScreen`, () => ScrollViewScreen);
-  Navigation.registerContainer(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
-  Navigation.registerContainer(`navigation.playground.ModalScreen`, () => ModalScreen);
-  Navigation.registerContainer(`navigation.playground.LifecycleScreen`, () => LifecycleScreen);
-  Navigation.registerContainer(`navigation.playground.TextScreen`, () => TextScreen);
-  Navigation.registerContainer(`navigation.playground.PushedScreen`, () => PushedScreen);
-  Navigation.registerContainer(`navigation.playground.OptionsScreen`, () => OptionsScreen);
-  Navigation.registerContainer(`navigation.playground.OrientationSelectScreen`, () => OrientationSelectScreen);
-  Navigation.registerContainer(`navigation.playground.OrientationDetectScreen`, () => OrientationDetectScreen);
-  Navigation.registerContainer('navigation.playground.CustomDialog', () => CustomDialog);
-  Navigation.registerContainer('navigation.playground.BackHandlerScreen', () => BandHandlerScreen);
-  Navigation.registerContainer('navigation.playground.SideMenuScreen', () => SideMenuScreen);
-  Navigation.registerContainer('navigation.playground.TopTabScreen', () => TopTabScreen);
-  Navigation.registerContainer('navigation.playground.TopTabOptionsScreen', () => TopTabOptionsScreen);
+function registerComponents() {
+  Navigation.registerComponent(`navigation.playground.CustomTransitionDestination`, () => CustomTransitionDestination);
+  Navigation.registerComponent(`navigation.playground.CustomTransitionOrigin`, () => CustomTransitionOrigin);
+  Navigation.registerComponent(`navigation.playground.ScrollViewScreen`, () => ScrollViewScreen);
+  Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
+  Navigation.registerComponent(`navigation.playground.ModalScreen`, () => ModalScreen);
+  Navigation.registerComponent(`navigation.playground.LifecycleScreen`, () => LifecycleScreen);
+  Navigation.registerComponent(`navigation.playground.TextScreen`, () => TextScreen);
+  Navigation.registerComponent(`navigation.playground.PushedScreen`, () => PushedScreen);
+  Navigation.registerComponent(`navigation.playground.OptionsScreen`, () => OptionsScreen);
+  Navigation.registerComponent(`navigation.playground.OrientationSelectScreen`, () => OrientationSelectScreen);
+  Navigation.registerComponent(`navigation.playground.OrientationDetectScreen`, () => OrientationDetectScreen);
+  Navigation.registerComponent('navigation.playground.CustomDialog', () => CustomDialog);
+  Navigation.registerComponent('navigation.playground.BackHandlerScreen', () => BandHandlerScreen);
+  Navigation.registerComponent('navigation.playground.SideMenuScreen', () => SideMenuScreen);
+  Navigation.registerComponent('navigation.playground.TopTabScreen', () => TopTabScreen);
+  Navigation.registerComponent('navigation.playground.TopTabOptionsScreen', () => TopTabOptionsScreen);
 }
 
 module.exports = {
-  registerContainers
+  registerComponents
 };

scripts/generate-js-doc.js

 
 const BASE_DIR = './lib/src/params/';
 const OPTIONS_DIR = BASE_DIR + 'options/';
-const CONTAINERS_DIR = BASE_DIR + 'containers/';
+const CONTAINERS_DIR = BASE_DIR + 'components/';
 const OUTPUT_DIR = './docs/docs/';
 const PARAMS_PARTIALS = ['./docs/templates/header.hbs', './docs/templates/sig-name.hbs'];
 const PARTIALS = [