Infra/keyboard fixes (#1913)

* lib - remove unused code and unnecessary changes

* demo - rename screen to reflect the component used

* Demo - renaming sub-folder

* demo - clean screen errors

* dependencies - removing `react-native-keyboard-tracking-view` from dev's

* Demo screens cleanup

* reverting and updating comment

* migrating TextField

Author: Inbal-Tish

demo/src/screens/MenuStructure.js

@@ -135,7 +135,7 @@ export const navigationData = {
         tags: 'KeyboardTracking',
         screen: 'unicorn.nativeComponents.KeyboardTrackingViewScreen'
       },
-      {title: 'KeyboardAccessoryView', tags: 'KeyboardInput', screen: 'unicorn.nativeComponents.KeyboardInputViewScreen'}
+      {title: 'KeyboardAccessoryView', tags: 'KeyboardInput', screen: 'unicorn.nativeComponents.KeyboardAccessoryViewScreen'}
     ]
   },
   AnimationsAndGestures: {

demo/src/screens/nativeComponentScreens/KeyboardTrackingViewScreen.js

@@ -1,21 +1,19 @@
+import _ from 'lodash';
 import React, {PureComponent} from 'react';
 import {ScrollView, StyleSheet} from 'react-native';
 import {
+  Constants,
+  Colors,
+  Spacings,
   Keyboard,
-  Text,
   View,
+  Text,
   TextField,
-  Image,
   Button,
-  Colors,
-  Switch,
-  Constants,
-  Spacings
+  Switch
 } from 'react-native-ui-lib';
-import _ from 'lodash';
 
 const KeyboardTrackingView = Keyboard.KeyboardTrackingView;
-
 const messages = [
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
   'integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit amet porttitor eget dolor',
@@ -68,6 +66,7 @@ export default class KeyboardTrackingViewScreen extends PureComponent {
         <ScrollView
           contentContainerStyle={styles.scrollContainer}
           keyboardDismissMode={trackInteractive ? 'interactive' : 'none'}
+          showsVerticalScrollIndicator={false}
         >
           <Text h1 grey10 marginB-s1>
             Keyboard Tracking View
@@ -88,23 +87,18 @@ export default class KeyboardTrackingViewScreen extends PureComponent {
         <KeyboardTrackingView
           style={styles.trackingToolbarContainer}
           trackInteractive={trackInteractive}
+          useSafeArea
         >
           <View bg-white row spread centerV paddingH-s5 paddingV-s3>
             <TextField
-              containerStyle={{
-                flex: 1,
-                backgroundColor: Colors.grey60,
-                paddingVertical: Spacings.s2,
-                paddingHorizontal: Spacings.s4,
-                borderRadius: 8
-              }}
-              hideUnderline
+              migrate
+              containerStyle={styles.textField}
+              preset={null}
               placeholder={'Message'}
               floatingPlaceholder={false}
-              floatOnFocus
               enableErrors={false}
             />
-            <Button label="Send" link marginL-s4 />
+            <Button label="Send" link marginL-s4/>
           </View>
         </KeyboardTrackingView>
       </View>
@@ -116,15 +110,18 @@ const styles = StyleSheet.create({
   scrollContainer: {
     paddingHorizontal: Spacings.s5
   },
-  image: {
-    height: 250,
-    marginBottom: Spacings.s3
-  },
   trackingToolbarContainer: {
     position: Constants.isIOS ? 'absolute' : 'relative',
     bottom: 0,
     width: '100%',
     borderWidth: 1,
     borderColor: Colors.grey60
+  },
+  textField: {
+    flex: 1,
+    backgroundColor: Colors.grey60,
+    paddingVertical: Spacings.s2,
+    paddingHorizontal: Spacings.s4,
+    borderRadius: 8
   }
 });

demo/src/screens/nativeComponentScreens/index.js

@@ -3,6 +3,5 @@ export function registerScreens(registrar) {
   registrar('unicorn.nativeComponents.SafeAreaSpacerViewScreen', () => require('./SafeAreaSpacerViewScreen').default);
   registrar('unicorn.nativeComponents.WheelPickerViewScreen', () => require('./WheelPickerViewScreen').default);
   registrar('unicorn.nativeComponents.KeyboardTrackingViewScreen', () => require('./KeyboardTrackingViewScreen').default);
-  registrar('unicorn.nativeComponents.KeyboardInputViewScreen', () => require('./keyboardInput/KeyboardInputViewScreen').default);
+  registrar('unicorn.nativeComponents.KeyboardAccessoryViewScreen', () => require('./keyboardAccessory/KeyboardAccessoryViewScreen').default);
 }
-

demo/src/screens/nativeComponentScreens/keyboardInput/KeyboardInputViewScreen.js renamed to demo/src/screens/nativeComponentScreens/keyboardAccessory/KeyboardAccessoryViewScreen.js

@@ -1,26 +1,26 @@
+import _ from 'lodash';
 import React, {PureComponent} from 'react';
-import {ScrollView, StyleSheet, TextInput} from 'react-native';
+import {ScrollView, StyleSheet} from 'react-native';
 import {
-  Keyboard,
-  Text,
-  View,
+  Constants,
+  Assets,
   Colors,
   Spacings,
-  Constants,
-  Typography,
+  Keyboard,
+  View,
+  Text,
+  TextField,
   Button,
-  Switch,
-  Assets
+  Switch
 } from 'react-native-ui-lib';
-import _ from 'lodash';
 import './demoKeyboards';
 
 const KeyboardAccessoryView = Keyboard.KeyboardAccessoryView;
 const KeyboardUtils = Keyboard.KeyboardUtils;
 const KeyboardRegistry = Keyboard.KeyboardRegistry;
 const TrackInteractive = true;
 
-const keyboards = [
+const demoKeyboards = [
   {
     id: 'unicorn.ImagesKeyboard',
     icon: Assets.icons.demo.image
@@ -31,7 +31,7 @@ const keyboards = [
   }
 ];
 
-export default class KeyboardInputViewScreen extends PureComponent {
+export default class KeyboardAccessoryViewScreen extends PureComponent {
   state = {
     customKeyboard: {
       component: undefined,
@@ -105,21 +105,24 @@ export default class KeyboardInputViewScreen extends PureComponent {
   renderKeyboardAccessoryViewContent = () => {
     return (
       <View style={styles.keyboardContainer} paddingV-s4>
-        <View row paddingH-s4>
-          <TextInput
-            style={styles.textInput}
+        <View bg-white row spread centerV paddingH-s5 paddingV-s3>
+          <TextField
+            migrate
             ref={r => {
               this.textInputRef = r;
             }}
+            containerStyle={styles.textField}
+            preset={null}
             placeholder={'Message'}
-            underlineColorAndroid="transparent"
+            floatingPlaceholder={false}
+            enableErrors={false}
             onFocus={this.resetKeyboardView}
           />
           <Button link grey10 iconSource={Assets.icons.demo.close} onPress={KeyboardUtils.dismiss} marginL-s2/>
         </View>
         <View row paddingH-s4 marginT-s2 spread>
           <View row>
-            {keyboards.map(keyboard => (
+            {demoKeyboards.map(keyboard => (
               <Button
                 key={keyboard.id}
                 grey10
@@ -170,7 +173,7 @@ export default class KeyboardInputViewScreen extends PureComponent {
   };
 
   render() {
-    const {message, isModal} = this.props;
+    const {message/* , isModal */} = this.props;
     const {receivedKeyboardData, customKeyboard, useSafeArea} = this.state;
 
     return (
@@ -181,6 +184,7 @@ export default class KeyboardInputViewScreen extends PureComponent {
         <ScrollView
           contentContainerStyle={styles.scrollContainer}
           keyboardDismissMode={TrackInteractive ? 'interactive' : 'none'}
+          showsVerticalScrollIndicator={false}
         >
           <Text text40 grey10 marginV-20 center>
             {message}
@@ -202,7 +206,7 @@ export default class KeyboardInputViewScreen extends PureComponent {
           revealKeyboardInteractive
           onRequestShowKeyboard={this.onRequestShowKeyboard}
           useSafeArea={useSafeArea}
-          usesBottomTabs={!isModal}
+          // usesBottomTabs={!isModal}
         />
       </View>
     );
@@ -215,13 +219,11 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center'
   },
-  textInput: {
+  textField: {
     flex: 1,
-    paddingVertical: Spacings.s2,
-    paddingHorizontal: Spacings.s3,
-    ...Typography.text70,
-    lineHeight: undefined,
     backgroundColor: Colors.grey60,
+    paddingVertical: Spacings.s2,
+    paddingHorizontal: Spacings.s4,
     borderRadius: 8
   },
   button: {

demo/src/screens/nativeComponentScreens/keyboardInput/demoKeyboards.js renamed to demo/src/screens/nativeComponentScreens/keyboardAccessory/demoKeyboards.js

@@ -1,9 +1,9 @@
+import _ from 'lodash';
 import React from 'react';
 import {ScrollView} from 'react-native';
 import {Keyboard, View, Text, Image, Spacings} from 'react-native-ui-lib';
-import _ from 'lodash';
-const KeyboardRegistry = Keyboard.KeyboardRegistry;
 
+const KeyboardRegistry = Keyboard.KeyboardRegistry;
 const images = [
   'https://images.pexels.com/photos/1148521/pexels-photo-1148521.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=200',
   'https://images.pexels.com/photos/1528975/pexels-photo-1528975.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=200',
@@ -43,11 +43,5 @@ function CustomKeyboard() {
   );
 }
 
-KeyboardRegistry.registerKeyboard(
-  'unicorn.ImagesKeyboard',
-  () => ImagesKeyboard
-);
-KeyboardRegistry.registerKeyboard(
-  'unicorn.CustomKeyboard',
-  () => CustomKeyboard
-);
+KeyboardRegistry.registerKeyboard('unicorn.ImagesKeyboard', () => ImagesKeyboard);
+KeyboardRegistry.registerKeyboard('unicorn.CustomKeyboard', () => CustomKeyboard);

lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.tsx

@@ -113,10 +113,11 @@ export type KeyboardAccessoryViewProps = {
    * default: true
    */
   useSafeArea?: boolean;
+
   /**
    * iOS only.
    * Whether or not to include bottom tab bat inset
-   * default: true
+   * default: false
    */
   usesBottomTabs?: boolean;
 

lib/ios/reactnativeuilib/keyboardtrackingview/KeyboardTrackingViewTempManager.m

@@ -505,30 +505,11 @@ - (void) rctContentDidAppearNotification:(NSNotification*)notification
     });
 }
 
-#pragma mark - root view controller and presenting style
-
-
-- (BOOL)isModal {
-    UIWindow *window = UIApplication.sharedApplication.windows.firstObject;
-    UIViewController *presentedViewController = window.rootViewController.presentedViewController;
-
-    if (presentedViewController != nil) {
-        if ([presentedViewController isKindOfClass:[UINavigationController class]]) {
-            UINavigationController *presented = (UINavigationController*)presentedViewController;
-            if (presented.visibleViewController) {
-                return YES;
-            }
-        }
-    }
-    return NO;
-}
-
 #pragma mark - TabBarController
 
 -(CGFloat)getTabBarHeight
 {
     if (@available(iOS 11.0, *)) {
-        NSLog(@"INBAL usesBottomTabs: %d", self.usesBottomTabs);
         if (self.usesBottomTabs == YES)
         {
             UITabBarController *tabBarController = [UITabBarController new];

package.json

@@ -103,7 +103,6 @@
     "react-native": "0.66.4",
     "react-native-gesture-handler": "2.1.1",
     "react-native-haptic-feedback": "^1.11.0",
-    "react-native-keyboard-tracking-view": "^5.6.1",
     "react-native-linear-gradient": "2.5.6",
     "react-native-navigation": "^7.19.1",
     "react-native-reanimated": "2.4.1",