fully linted

playground/src/screens/BackHandlerScreen.js

@@ -34,8 +34,8 @@ class BackHandlerScreen extends Component {
       <View style={styles.root}>
         <Text style={styles.h1}>{`Back Handler Screen`}</Text>
         <Text style={styles.h2}>{this.state.backPress}</Text>
-        <Button title="add back handler" onPress={this.addBackHandler} />
-        <Button title="remove back handler" onPress={this.removeBackHandler} />
+        <Button title='add back handler' onPress={this.addBackHandler} />
+        <Button title='remove back handler' onPress={this.removeBackHandler} />
       </View>
     );
   }

playground/src/screens/CustomDialog.js

@@ -12,7 +12,7 @@ class CustomDialog extends PureComponent {
     return (
       <View style={styles.root}>
         <Text style={styles.h1} testID={testIDs.DIALOG_HEADER}>Test view</Text>
-        <Button title="OK" testID={testIDs.OK_BUTTON} onPress={() => this.onCLickOk()} />
+        <Button title='OK' testID={testIDs.OK_BUTTON} onPress={() => this.onCLickOk()} />
       </View>
     );
   }

playground/src/screens/CustomTransitionOrigin.js

@@ -21,27 +21,27 @@ class CustomTransitionOrigin extends Component {
   render() {
     return (
       <View style={styles.root}>
-        <Navigation.Element elementId="title1">
+        <Navigation.Element elementId='title1'>
           <Text style={styles.h1}>Custom Transition Screen</Text>
         </Navigation.Element>
         <View style={{ flex: 1, justifyContent: 'flex-start' }}>
-          <TouchableOpacity testID="shared_image1" activeOpacity={0.5} onPress={this.onClickNavigationIcon}>
-            <Navigation.Element resizeMode="cover" elementId="image1">
-              <Image resizeMode="cover" style={styles.gyroImage} source={require('../../img/400.jpeg')} />
+          <TouchableOpacity testID='shared_image1' activeOpacity={0.5} onPress={this.onClickNavigationIcon}>
+            <Navigation.Element resizeMode='cover' elementId='image1'>
+              <Image resizeMode='cover' style={styles.gyroImage} source={require('../../img/400.jpeg')} />
             </Navigation.Element>
           </TouchableOpacity>
           <TouchableOpacity activeOpacity={0.5} onPress={this.onClickNavigationIcon}>
-            <Navigation.Element elementId="image2">
+            <Navigation.Element elementId='image2'>
               <Image style={styles.gyroImage} source={require('../../img/2048.jpeg')} />
             </Navigation.Element>
           </TouchableOpacity>
           <TouchableOpacity activeOpacity={0.5} onPress={this.onClickNavigationIcon}>
-            <Navigation.Element elementId="image3">
+            <Navigation.Element elementId='image3'>
               <Image style={styles.gyroImage} source={require('../../img/Icon-87.png')} />
             </Navigation.Element>
           </TouchableOpacity>
           <TouchableOpacity activeOpacity={0.5} onPress={this.onClickNavigationIcon}>
-            <Navigation.Element elementId="image4">
+            <Navigation.Element elementId='image4'>
               <Image style={styles.gyroImage} source={require('../../img/Icon-87.png')} />
             </Navigation.Element>
           </TouchableOpacity>
@@ -57,7 +57,10 @@ class CustomTransitionOrigin extends Component {
         customTransition: {
           animations: [
             { type: 'sharedElement', fromId: 'title1', toId: 'title2', startDelay: 0, springVelocity: 0.2, duration: 0.5 },
-            { type: 'sharedElement', fromId: 'image1', toId: 'customDestinationImage', startDelay: 0, springVelocity: 0.9, springDamping: 0.9, duration: 0.8, interactivePop: true },
+            {
+              type: 'sharedElement', fromId: 'image1', toId: 'customDestinationImage', startDelay: 0, springVelocity: 0.9,
+              springDamping: 0.9, duration: 0.8, interactivePop: true
+            },
             { type: 'sharedElement', fromId: 'image2', toId: 'customDestinationImage2', startDelay: 0, duration: 0.8 },
             { fromId: 'image4', endY: 50, endX: 50, endAlpha: 0, startDelay: 0, duration: 0.8, springVelocity: 0.5 },
             { fromId: 'customDestinationParagraph', startY: 50, startAlpha: 0, endAlpha: 1, startDelay: 0, duration: 0.8 }
@@ -94,4 +97,3 @@ const styles = {
     height: 100
   }
 };
-

playground/src/screens/LifecycleScreen.js

@@ -36,7 +36,7 @@ class LifecycleScreen extends Component {
       <View style={styles.root}>
         <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} />
+        <Button title='Push to test didDisappear' testID={testIDs.PUSH_TO_TEST_DID_DISAPPEAR_BUTTON} onPress={this.onClickPush} />
         <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
       </View>
     );

playground/src/screens/ModalScreen.js

@@ -33,15 +33,18 @@ class ModalScreen extends Component {
       <View style={styles.root}>
         <Text style={styles.h1} testID={testIDs.MODAL_SCREEN}>{`Modal Screen`}</Text>
         <Text style={styles.footer}>{`Modal Stack Position: ${this.getModalPosition()}`}</Text>
-        <Button title="Show Modal" testID={testIDs.SHOW_MODAL_BUTTON} onPress={this.onClickShowModal} />
-        <Button title="Dismiss Modal" testID={testIDs.DISMISS_MODAL_BUTTON} onPress={this.onClickDismissModal} />
-        <Button title="Dismiss Unknown Modal" testID={testIDs.DISMISS_UNKNOWN_MODAL_BUTTON} onPress={this.onClickDismissUnknownModal} />
-        <Button title="Dismiss All Modals" testID={testIDs.DISMISS_ALL_MODALS_BUTTON} onPress={this.onClickDismissAllModals} />
-        <Button title="Push screen" testID={testIDs.PUSH_BUTTON} onPress={this.onClickPushScreen} />
-        <Button title="Show Modal With Stack" testID={testIDs.MODAL_WITH_STACK_BUTTON} onPress={this.onShowModalWithDeepStack} />
-        {this.getPreviousModalId() ? (<Button title="Dismiss Previous Modal" testID={testIDs.DISMISS_PREVIOUS_MODAL_BUTTON} onPress={this.onClickDismissPreviousModal} />) : undefined}
-        {this.props.previousModalIds ? (<Button title="Dismiss ALL Previous Modals" testID={testIDs.DISMISS_ALL_PREVIOUS_MODAL_BUTTON} onPress={this.onClickDismissAllPreviousModals} />) : undefined}
-        {this.props.previousModalIds ? (<Button title="Dismiss First In Stack" testID={testIDs.DISMISS_FIRST_MODAL_BUTTON} onPress={this.onClickDismissFirstInStack} />) : undefined}
+        <Button title='Show Modal' testID={testIDs.SHOW_MODAL_BUTTON} onPress={this.onClickShowModal} />
+        <Button title='Dismiss Modal' testID={testIDs.DISMISS_MODAL_BUTTON} onPress={this.onClickDismissModal} />
+        <Button title='Dismiss Unknown Modal' testID={testIDs.DISMISS_UNKNOWN_MODAL_BUTTON} onPress={this.onClickDismissUnknownModal} />
+        <Button title='Dismiss All Modals' testID={testIDs.DISMISS_ALL_MODALS_BUTTON} onPress={this.onClickDismissAllModals} />
+        <Button title='Push screen' testID={testIDs.PUSH_BUTTON} onPress={this.onClickPushScreen} />
+        <Button title='Show Modal With Stack' testID={testIDs.MODAL_WITH_STACK_BUTTON} onPress={this.onShowModalWithDeepStack} />
+        {this.getPreviousModalId() ? (<Button title='Dismiss Previous Modal' testID={testIDs.DISMISS_PREVIOUS_MODAL_BUTTON}
+          onPress={this.onClickDismissPreviousModal} />) : undefined}
+        {this.props.previousModalIds ? (<Button title='Dismiss ALL Previous Modals' testID={testIDs.DISMISS_ALL_PREVIOUS_MODAL_BUTTON}
+          onPress={this.onClickDismissAllPreviousModals} />) : undefined}
+        {this.props.previousModalIds ? (<Button title='Dismiss First In Stack' testID={testIDs.DISMISS_FIRST_MODAL_BUTTON}
+          onPress={this.onClickDismissFirstInStack} />) : undefined}
         <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
       </View>
     );

playground/src/screens/OptionsScreen.js

@@ -57,18 +57,18 @@ class OptionsScreen extends Component {
     return (
       <View style={styles.root}>
         <Text style={styles.h1} testID={testIDs.OPTIONS_SCREEN_HEADER}>{`Options Screen`}</Text>
-        <Button title="Dynamic Options" testID={testIDs.DYNAMIC_OPTIONS_BUTTON} onPress={this.onClickDynamicOptions} />
-        <Button title="Show Top Bar" testID={testIDs.SHOW_TOP_BAR_BUTTON} onPress={this.onClickShowTopBar} />
-        <Button title="Hide Top Bar" testID={testIDs.HIDE_TOP_BAR_BUTTON} onPress={this.onClickHideTopBar} />
-        <Button title="Top Bar Transparent" onPress={this.onClickTopBarTransparent} />
-        <Button title="Top Bar Opaque" onPress={this.onClickTopBarOpaque} />
-        <Button title="scrollView Screen" testID={testIDs.SCROLLVIEW_SCREEN_BUTTON} onPress={this.onClickScrollViewScreen} />
-        <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} />
-        <Button title="Show overlay" testID={testIDs.SHOW_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(true)} />
-        <Button title="Show touch through overlay" testID={testIDs.SHOW_TOUCH_THROUGH_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(false)} />
-        <Button title="Push Default Options Screen" testID={testIDs.PUSH_DEFAULT_OPTIONS_BUTTON} onPress={this.onClickPushDefaultOptionsScreen} />
+        <Button title='Dynamic Options' testID={testIDs.DYNAMIC_OPTIONS_BUTTON} onPress={this.onClickDynamicOptions} />
+        <Button title='Show Top Bar' testID={testIDs.SHOW_TOP_BAR_BUTTON} onPress={this.onClickShowTopBar} />
+        <Button title='Hide Top Bar' testID={testIDs.HIDE_TOP_BAR_BUTTON} onPress={this.onClickHideTopBar} />
+        <Button title='Top Bar Transparent' onPress={this.onClickTopBarTransparent} />
+        <Button title='Top Bar Opaque' onPress={this.onClickTopBarOpaque} />
+        <Button title='scrollView Screen' testID={testIDs.SCROLLVIEW_SCREEN_BUTTON} onPress={this.onClickScrollViewScreen} />
+        <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} />
+        <Button title='Show overlay' testID={testIDs.SHOW_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(true)} />
+        <Button title='Show touch through overlay' testID={testIDs.SHOW_TOUCH_THROUGH_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(false)} />
+        <Button title='Push Default Options Screen' testID={testIDs.PUSH_DEFAULT_OPTIONS_BUTTON} onPress={this.onClickPushDefaultOptionsScreen} />
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
       </View>
     );

playground/src/screens/OrientationDetectScreen.js

@@ -21,9 +21,9 @@ class OrientationDetectScreen extends Component {
     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.componentId)} />
+        <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>
+        <Text style={styles.footer} testID='currentOrientation'>{this.state.horizontal ? 'Landscape' : 'Portrait'}</Text>
       </View>
     );
   }

playground/src/screens/OrientationSelectScreen.js

@@ -11,10 +11,10 @@ class OrientationSelectScreen extends Component {
     return (
       <View style={styles.root}>
         <Text style={styles.h1}>{`Orientation Menu`}</Text>
-        <Button title="default" testID={testIDs.DEFAULT_ORIENTATION_BUTTON} onPress={() => this.onClickOrientationScreen('default')} />
-        <Button title="landscape and portrait" testID={testIDs.LANDSCAPE_PORTRAIT_ORIENTATION_BUTTON} onPress={() => this.onClickOrientationScreen(['landscape', 'portrait'])} />
-        <Button title="portrait only" testID={testIDs.PORTRAIT_ORIENTATION_BUTTON} onPress={() => this.onClickOrientationScreen('portrait')} />
-        <Button title="landscape only" testID={testIDs.LANDSCAPE_ORIENTATION_BUTTON} onPress={() => this.onClickOrientationScreen(['landscape'])} />
+        <Button title='default' testID={testIDs.DEFAULT_ORIENTATION_BUTTON} onPress={() => this.onClickOrientationScreen('default')} />
+        <Button title='landscape and portrait' testID={testIDs.LANDSCAPE_PORTRAIT_ORIENTATION_BUTTON} onPress={() => this.onClickOrientationScreen(['landscape', 'portrait'])} />
+        <Button title='portrait only' testID={testIDs.PORTRAIT_ORIENTATION_BUTTON} onPress={() => this.onClickOrientationScreen('portrait')} />
+        <Button title='landscape only' testID={testIDs.LANDSCAPE_ORIENTATION_BUTTON} onPress={() => this.onClickOrientationScreen(['landscape'])} />
       </View>
     );
   }

playground/src/screens/PushedScreen.js

@@ -32,11 +32,11 @@ class PushedScreen extends Component {
       <View style={styles.root}>
         <Text testID={testIDs.PUSHED_SCREEN_HEADER} style={styles.h1}>{`Pushed Screen`}</Text>
         <Text style={styles.h2}>{`Stack Position: ${stackPosition}`}</Text>
-        <Button title="Push" testID={testIDs.PUSH_BUTTON} onPress={this.onClickPush} />
-        <Button title="Pop" testID={testIDs.POP_BUTTON} onPress={this.onClickPop} />
-        <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} />}
+        <Button title='Push' testID={testIDs.PUSH_BUTTON} onPress={this.onClickPush} />
+        <Button title='Pop' testID={testIDs.POP_BUTTON} onPress={this.onClickPop} />
+        <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.componentId = ${this.props.componentId}`}</Text>
       </View>
     );

playground/src/screens/ScrollViewScreen.js

@@ -30,7 +30,7 @@ class ScrollViewScreen extends Component {
       <View>
         <ScrollView testID={testIDs.SCROLLVIEW_ELEMENT} contentContainerStyle={styles.contentContainer}>
           <View>
-            <Button title="Toggle Top Bar Hide On Scroll" testID={testIDs.TOGGLE_TOP_BAR_HIDE_ON_SCROLL} onPress={this.onClickToggleTopBarHideOnScroll} />
+            <Button title='Toggle Top Bar Hide On Scroll' testID={testIDs.TOGGLE_TOP_BAR_HIDE_ON_SCROLL} onPress={this.onClickToggleTopBarHideOnScroll} />
           </View>
         </ScrollView>
       </View>
@@ -63,4 +63,3 @@ const styles = StyleSheet.create({
     height: 1200
   }
 });
-

playground/src/screens/SideMenuScreen.js

@@ -14,7 +14,7 @@ class SideMenuScreen extends Component {
       <View style={styles.root} testID={this.props.testID}>
         <Text testID={testIDs.SIDE_BAR}>Side Bar</Text>
         <Text style={styles.h1}>{`This is a ${this.props.side} side menu screen`}</Text>
-        <Button title="Hide Side Menu" testID={testID} onPress={() => this.hideSideMenu()} />
+        <Button title='Hide Side Menu' testID={testID} onPress={() => this.hideSideMenu()} />
       </View>
     );
   }
@@ -39,4 +39,3 @@ const styles = {
     backgroundColor: '#f5fcff'
   }
 };
-

playground/src/screens/StaticLifecycleOverlay.js

@@ -11,7 +11,6 @@ class StaticLifecycleOverlay extends Component {
       events: []
     };
     Navigation.events().componentLifecycle(({ event, componentName, componentId }) => {
-      console.log('guyca', `${event} ${componentName} [${componentId}]`);
       this.setState({
         events: [...this.state.events, { event, componentName, componentId }]
       });

playground/src/screens/TextScreen.js

@@ -31,10 +31,10 @@ class TextScreen extends Component {
         <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 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')} />
-        <Button title="Show Right Side Menu" testID={testIDs.SHOW_RIGHT_SIDE_MENU_BUTTON} onPress={() => this.showSideMenu('right')} />
+        <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')} />
+        <Button title='Show Right Side Menu' testID={testIDs.SHOW_RIGHT_SIDE_MENU_BUTTON} onPress={() => this.showSideMenu('right')} />
       </View>
     );
   }
@@ -118,4 +118,3 @@ const styles = {
     marginTop: 10
   }
 };
-

playground/src/screens/TopTabOptionsScreen.js

@@ -25,7 +25,7 @@ class TopTabOptionsScreen extends PureComponent {
       <View style={styles.root}>
         <Text style={styles.h1}>{this.props.text || 'Top Tab Screen'}</Text>
         <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
-        <Button title="Dynamic Options" testID={testIDs.DYNAMIC_OPTIONS_BUTTON} onPress={this.onClickDynamicOptions} />
+        <Button title='Dynamic Options' testID={testIDs.DYNAMIC_OPTIONS_BUTTON} onPress={this.onClickDynamicOptions} />
       </View>
     );
   }

playground/src/screens/WelcomeScreen.js

@@ -30,17 +30,17 @@ class WelcomeScreen extends Component {
     return (
       <View style={styles.root} key={'root'}>
         <Text testID={testIDs.WELCOME_SCREEN_HEADER} style={styles.h1}>{`React Native Navigation!`}</Text>
-        <Button title="Switch to tab based app" testID={testIDs.TAB_BASED_APP_BUTTON} onPress={this.onClickSwitchToTabs} />
-        <Button title="Switch to app with side menus" testID={testIDs.TAB_BASED_APP_SIDE_BUTTON} onPress={this.onClickSwitchToSideMenus} />
-        <Button title="Push Lifecycle Screen" testID={testIDs.PUSH_LIFECYCLE_BUTTON} onPress={this.onClickLifecycleScreen} />
-        <Button title="Static Lifecycle Events" testID={testIDs.PUSH_STATIC_LIFECYCLE_BUTTON} onPress={this.onClickShowStaticLifecycleOverlay} />
-        <Button title="Push" testID={testIDs.PUSH_BUTTON} onPress={this.onClickPush} />
-        <Button title="Push Options Screen" testID={testIDs.PUSH_OPTIONS_BUTTON} onPress={this.onClickPushOptionsScreen} />
-        {Platform.OS === 'android' && <Button title="Push Top Tabs screen" testID={testIDs.PUSH_TOP_TABS_BUTTON} onPress={this.onClickPushTopTabsScreen} />}
-        {Platform.OS === 'android' && <Button title="Back Handler" testID={testIDs.BACK_HANDLER_BUTTON} onPress={this.onClickBackHandler} />}
-        <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} />
+        <Button title='Switch to tab based app' testID={testIDs.TAB_BASED_APP_BUTTON} onPress={this.onClickSwitchToTabs} />
+        <Button title='Switch to app with side menus' testID={testIDs.TAB_BASED_APP_SIDE_BUTTON} onPress={this.onClickSwitchToSideMenus} />
+        <Button title='Push Lifecycle Screen' testID={testIDs.PUSH_LIFECYCLE_BUTTON} onPress={this.onClickLifecycleScreen} />
+        <Button title='Static Lifecycle Events' testID={testIDs.PUSH_STATIC_LIFECYCLE_BUTTON} onPress={this.onClickShowStaticLifecycleOverlay} />
+        <Button title='Push' testID={testIDs.PUSH_BUTTON} onPress={this.onClickPush} />
+        <Button title='Push Options Screen' testID={testIDs.PUSH_OPTIONS_BUTTON} onPress={this.onClickPushOptionsScreen} />
+        {Platform.OS === 'android' && <Button title='Push Top Tabs screen' testID={testIDs.PUSH_TOP_TABS_BUTTON} onPress={this.onClickPushTopTabsScreen} />}
+        {Platform.OS === 'android' && <Button title='Back Handler' testID={testIDs.BACK_HANDLER_BUTTON} onPress={this.onClickBackHandler} />}
+        <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.componentId = ${this.props.componentId}`}</Text>
       </View>
     );