Keyboard demo playground

e2e/Keyboard.test.js

@@ -0,0 +1,28 @@
+import { default as TestIDs, default as testIDs } from '../playground/src/testIDs';
+import Android from './AndroidUtils';
+import Utils from './Utils';
+
+const { elementByLabel, elementById } = Utils;
+
+describe('Keyboard', () => {
+  beforeEach(async () => {
+    await device.launchApp({ newInstance: true });
+    await elementById(TestIDs.KEYBOARD_SCREEN_BTN).tap();
+  });
+
+  it('Push - should close keyboard when Back clicked', async () => {
+    await elementById(TestIDs.TEXT_INPUT1).tap();
+    await expect(elementByLabel("Keyboard Demo")).not.toBeVisible();
+    await elementById(TestIDs.BACK_BUTTON).tap();
+    await expect(elementById(testIDs.MAIN_BOTTOM_TABS)).toBeVisible();
+  });
+
+  it('Modal - should close keyboard when close clicked', async () => {
+    await elementById(TestIDs.MODAL_BTN).tap();
+    await elementById(TestIDs.TEXT_INPUT1).tap();
+    await expect(elementByLabel("Keyboard Demo")).not.toBeVisible();
+    await elementById(TestIDs.DISMISS_MODAL_TOPBAR_BTN).tap();
+    await expect(elementById(testIDs.MAIN_BOTTOM_TABS)).toBeVisible();
+  });
+
+});

playground/src/app.ts

@@ -31,6 +31,11 @@ function setRoot() {
   Navigation.setRoot({
     root: {
       bottomTabs: {
+        options: {
+          bottomTabs: {
+            testID: testIDs.MAIN_BOTTOM_TABS,
+          },
+        },
         children: [
           {
             stack: {

playground/src/screens/KeyboardScreen.tsx

@@ -1,10 +1,21 @@
 import React from 'react';
-import { View, ScrollView, Dimensions, StyleSheet, Image, Text, TextInput } from 'react-native';
-import { Navigation, NavigationComponentProps } from 'react-native-navigation';
-
+import { View, ScrollView, Dimensions, StyleSheet, Image, TextInput, Text } from 'react-native';
+import {
+  NavigationComponentProps,
+  NavigationComponent,
+  ComponentDidAppearEvent,
+} from 'react-native-navigation';
+import Navigation from '../services/Navigation';
+import Button from '../components/Button';
+import Screens from './Screens';
+import testIDs from '../testIDs';
+import { stack } from '../commons/Layouts';
 const screenWidth = Dimensions.get('window').width;
-
-export default class KeyboardScreen extends React.Component<NavigationComponentProps> {
+const KEYBOARD_LABEL = 'Keyboard Demo';
+interface Props extends NavigationComponentProps {
+  title?: string;
+}
+export default class KeyboardScreen extends NavigationComponent<Props> {
   static options() {
     return {
       bottomTabs: {
@@ -14,24 +25,94 @@ export default class KeyboardScreen extends React.Component<NavigationComponentP
         title: {
           text: 'Keyboard',
         },
+        backButton: {
+          testID: testIDs.BACK_BUTTON,
+          enableMenu: false,
+        },
       },
     };
   }
+  constructor(props: Props) {
+    super(props);
+    Navigation.events().bindComponent(this);
+  }
+
+  componentDidAppear(_event: ComponentDidAppearEvent) {
+    Navigation.mergeOptions(this.props.componentId, {
+      topBar: {
+        title: {
+          text: this.props.title ?? 'Keyboard',
+        },
+      },
+    });
+  }
 
   render() {
     return (
       <View style={styles.root}>
         <ScrollView>
           <Image style={styles.image} source={require('../../img/2048.jpeg')} />
-          <Text style={{ margin: 8 }}>Keyboard e2e</Text>
-          <TextInput placeholder="Input 1" />
-          <TextInput placeholder="Input 2" onFocus={this.hideTabs} onBlur={this.showTabs} />
-          {/* <Text>{LOREM_IPSUM}</Text> */}
+          <View style={{ alignItems: 'center' }}>
+            <Button
+              style={styles.button}
+              label={'Modal Keyboard Screen'}
+              testID={testIDs.MODAL_BTN}
+              onPress={async () => {
+                await this.openModalKeyboard(undefined);
+              }}
+            />
+            <TextInput
+              style={styles.input}
+              testID={testIDs.TEXT_INPUT1}
+              placeholderTextColor="rgba(255, 0, 0, 0.5)"
+              placeholder="Submit opens modal"
+              onSubmitEditing={async (event) => {
+                if (event.nativeEvent.text || event.nativeEvent.text.trim().length > 0)
+                  await this.openModalKeyboard(event.nativeEvent.text);
+              }}
+            />
+            <TextInput
+              style={styles.input}
+              testID={testIDs.TEXT_INPUT2}
+              placeholderTextColor="rgba(255, 0, 0, 0.5)"
+              placeholder="Submit pushes screen"
+              onFocus={this.hideTabs}
+              onBlur={this.showTabs}
+              onSubmitEditing={async (event) => {
+                if (event.nativeEvent.text || event.nativeEvent.text.trim().length > 0)
+                  await this.openPushedKeyboard(event.nativeEvent.text);
+              }}
+            />
+          </View>
         </ScrollView>
+        <View style={styles.footer}>
+          <Text style={styles.input}> {KEYBOARD_LABEL}</Text>
+        </View>
       </View>
     );
   }
 
+  openPushedKeyboard = async (text?: string) => {
+    await Navigation.push(this.props.componentId, {
+      component: {
+        name: Screens.KeyboardScreen,
+        passProps: {
+          title: text,
+        },
+      },
+    });
+  };
+  openModalKeyboard = async (text?: string) => {
+    await Navigation.showModal(
+      stack({
+        component: {
+          name: Screens.KeyboardScreen,
+          passProps: { title: text },
+        },
+      })
+    );
+  };
+
   hideTabs = () => {
     Navigation.mergeOptions(this.props.componentId, {
       bottomTabs: {
@@ -52,10 +133,18 @@ export default class KeyboardScreen extends React.Component<NavigationComponentP
 const styles = StyleSheet.create({
   root: {
     flex: 1,
-    backgroundColor: '#E3DCC3',
+  },
+  input: {
+    color: 'red',
+  },
+  footer: { flex: 1, alignItems: 'center' },
+  button: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    margin: 4,
   },
   image: {
-    height: 400,
+    height: 300,
     width: screenWidth,
     resizeMode: 'cover',
   },

playground/src/screens/LayoutsScreen.tsx

@@ -20,6 +20,7 @@ const {
   BOTTOM_TABS_BTN,
   BOTTOM_TABS,
   SIDE_MENU_BTN,
+  KEYBOARD_SCREEN_BTN,
   SPLIT_VIEW_BUTTON,
 } = testIDs;
 
@@ -60,6 +61,7 @@ export default class LayoutsScreen extends NavigationComponent<NavigationCompone
         <Button label="Stack" testID={STACK_BTN} onPress={this.stack} />
         <Button label="BottomTabs" testID={BOTTOM_TABS_BTN} onPress={this.bottomTabs} />
         <Button label="SideMenu" testID={SIDE_MENU_BTN} onPress={this.sideMenu} />
+        <Button label="Keyboard" testID={KEYBOARD_SCREEN_BTN} onPress={this.openKeyboardScreen} />
         <Button
           label="SplitView"
           testID={SPLIT_VIEW_BUTTON}
@@ -168,6 +170,9 @@ export default class LayoutsScreen extends NavigationComponent<NavigationCompone
     });
   };
 
+  openKeyboardScreen = async () => {
+    await Navigation.push(this.props.componentId, Screens.KeyboardScreen);
+  };
   onClickSearchBar = () => {
     Navigation.push(this.props.componentId, {
       component: {

playground/src/screens/Screens.ts

@@ -120,6 +120,7 @@ const Screens = {
   },
   StatusBarOptions,
   StatusBarFirstTab,
+  KeyboardScreen: 'KeyboardScreen',
   TopBarBackground: 'TopBarBackground',
   Toast: 'Toast',
   FlatListScreen: 'FlatListScreen',

playground/src/screens/index.tsx

@@ -151,10 +151,7 @@ function registerScreens() {
     () => require('./TopTabOptionsScreen').default
   );
   Navigation.registerComponent('CustomTextButton', () => require('./CustomTextButton').default);
-  Navigation.registerComponent(
-    'navigation.playground.KeyboardScreen',
-    () => require('./KeyboardScreen').default
-  );
+  Navigation.registerComponent(Screens.KeyboardScreen, () => require('./KeyboardScreen').default);
   Navigation.setLazyComponentRegistrator((componentName) => {
     switch (componentName) {
       case Screens.LazyTitleView:

playground/src/testIDs.ts

@@ -15,6 +15,8 @@ const testIDs = {
   BUTTONS_TAB: 'BUTTONS_TAB',
   SIDE_MENU_INSIDE_BOTTOM_TABS_BTN: 'SIDE_MENU_INSIDE_BOTTOM_TABS',
   OVERLAY_BTN: 'OVERLAY_BTN',
+  TEXT_INPUT1: 'TEXT_INPUT1',
+  TEXT_INPUT2: 'TEXT_INPUT2',
   DISMISS_ALL_OVERLAYS_BUTTON: 'DISMISS_ALL_OVERLAYS_BUTTON',
   SIDE_MENU_BTN: 'SIDE_MENU_BTN',
   MODAL_COMMANDS_BTN: 'MODAL_COMMANDS_BTN',
@@ -81,6 +83,7 @@ const testIDs = {
   SET_BADGE_BTN: 'SET_BADGE_BTN',
   CLEAR_BADGE_BTN: 'CLEAR_BADGE_BTN',
   BOTTOM_TABS: 'BOTTOM_TABS',
+  MAIN_BOTTOM_TABS: 'MAIN_BOTTOM_TABS',
   HIDE_TABS_BTN: 'HIDE_TABS_BTN',
   SHOW_TABS_BTN: 'SHOW_TABS_BTN',
   HIDE_TABS_PUSH_BTN: 'HIDE_TABS_PUSH_BTN',
@@ -174,6 +177,7 @@ const testIDs = {
   COMPLEX_LAYOUT_BUTTON: `COMPLEX_LAYOUT_BUTTON`,
   EXTERNAL_COMPONENT_IN_STACK: `EXTERNAL_COMPONENT_IN_STACK`,
   SPLIT_VIEW_BUTTON: `SPLIT_VIEW_BUTTON`,
+  KEYBOARD_SCREEN_BTN: `KEYBOARD_SCREEN_BTN`,
   SHOW_PREVIEW_BUTTON: `SHOW_PREVIEW_BUTTON`,
   SEARCH_RESULT_ITEM: `SEARCH_RESULT_ITEM`,
   SIDE_MENU_LAYOUT_INSIDE_BOTTOM_TAB: `SIDE_MENU_LAYOUT_INSIDE_BOTTOM_TAB`,