Keyboard accessory view safe area api support (#827)

* keyboard-accessory-view now support enable/disable bottom safe area space (iOS only)

* remove native default safe-area value, so the default-value will be managed from a single place

* removed extra call to update constraint - in iOS native. + pass the useSafeArea flag in the root params object instead of initialProps + fix documentation typo in ActionBar

* PR comments - default  value is implemented in iOS only + doc change + toggle will be visible also for android devices to show users it won't effect other devices

* Change behaviour in keyboard-demo screen, now when the safe-area toggle is changed,
the keyboard will re-appear with the right safe-area. applicable only for iOS devices

* Changed  documentation

Author: mendyEdri

demo/src/screens/nativeComponentScreens/keyboardInput/KeyboardInputViewScreen.js

@@ -1,8 +1,9 @@
 import React, {PureComponent} from 'react';
 import {ScrollView, StyleSheet, TextInput} from 'react-native';
-import {Keyboard, Text, View, Colors, Spacings, Constants, Typography, Button} from 'react-native-ui-lib';
+import {Keyboard, Text, View, Colors, Spacings, Constants, Typography, Button, Switch} from 'react-native-ui-lib';
 const KeyboardAccessoryView = Keyboard.KeyboardAccessoryView;
 const KeyboardUtils = Keyboard.KeyboardUtils;
+import {_} from 'lodash';
 
 import './demoKeyboards';
 const KeyboardRegistry = Keyboard.KeyboardRegistry;
@@ -15,7 +16,9 @@ export default class KeyboardInputViewScreen extends PureComponent {
       component: undefined,
       initialProps: undefined
     },
-    receivedKeyboardData: undefined
+    receivedKeyboardData: undefined,
+    useSafeArea: true,
+    keyboardOpenState: false
   };
 
   onKeyboardItemSelected = (keyboardId, params) => {
@@ -49,12 +52,44 @@ export default class KeyboardInputViewScreen extends PureComponent {
     return buttons;
   }
 
+  isCustomKeyboardOpen = () => {
+    const {keyboardOpenState, customKeyboard} = this.state;
+    return keyboardOpenState && !_.isEmpty(customKeyboard);
+  }
+
   resetKeyboardView = () => {
     this.setState({customKeyboard: {}});
   };
 
+  dismissKeyboard = () => {
+    KeyboardUtils.dismiss();
+  }
+
+  toggleUseSafeArea = () => {
+    const {useSafeArea} = this.state;
+    this.setState({useSafeArea: !useSafeArea});
+
+    if (this.isCustomKeyboardOpen()) {
+      this.dismissKeyboard();
+      this.showLastKeyboard();
+    }
+  };
+
+  showLastKeyboard() {
+    const {customKeyboard} = this.state;
+    this.setState({customKeyboard: {}});
+
+    setTimeout(() => {
+      this.setState({
+        keyboardOpenState: true,
+        customKeyboard
+      });
+    }, 500);
+  }
+
   showKeyboardView(component, title) {
     this.setState({
+      keyboardOpenState: true,
       customKeyboard: {
         component,
         initialProps: {title}
@@ -84,7 +119,6 @@ export default class KeyboardInputViewScreen extends PureComponent {
           />
           <Button label="Close" link onPress={KeyboardUtils.dismiss} style={styles.button}/>
         </View>
-
         <View row>
           {this.getToolbarButtons().map((button, index) => (
             <Button label={button.text} link onPress={button.onPress} key={index} style={styles.button}/>
@@ -107,10 +141,26 @@ export default class KeyboardInputViewScreen extends PureComponent {
     });
   };
 
+  safeAreaSwitchToggle = () => {
+    if (!Constants.isIOS) { 
+      return;
+    }
+    const {useSafeArea} = this.state;
+    return (  
+      <View column center>
+        <View style={styles.separatorLine}/>
+        <View centerV row margin-10>
+          <Text text80 dark40>Safe Area Enabled:</Text>
+          <Switch value={useSafeArea} onValueChange={this.toggleUseSafeArea} marginL-14/>
+        </View>
+        <View style={styles.separatorLine}/>
+      </View>
+    );
+  }
+
   render() {
     const {message} = this.props;
-    const {receivedKeyboardData, customKeyboard} = this.state;
-
+    const {receivedKeyboardData, customKeyboard, useSafeArea} = this.state;
     return (
       <View flex bg-dark80>
         <ScrollView
@@ -122,6 +172,7 @@ export default class KeyboardInputViewScreen extends PureComponent {
           </Text>
           <Text testID={'demo-message'}>{receivedKeyboardData}</Text>
           <Button label={'Open keyboard #1'} link onPress={this.requestShowKeyboard} style={styles.button}/>
+          { this.safeAreaSwitchToggle() }
         </ScrollView>
 
         <KeyboardAccessoryView
@@ -135,6 +186,7 @@ export default class KeyboardInputViewScreen extends PureComponent {
           onKeyboardResigned={this.onKeyboardResigned}
           revealKeyboardInteractive
           onRequestShowKeyboard={this.onRequestShowKeyboard}
+          useSafeArea={useSafeArea}
         />
       </View>
     );
@@ -149,7 +201,7 @@ const styles = StyleSheet.create({
   },
   textInput: {
     flex: 1,
-    padding: Spacings.s2,
+    padding: Spacings.s1,
     ...Typography.text70
   },
   button: {
@@ -159,5 +211,10 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.white,
     borderWidth: 1,
     borderColor: Colors.dark60
+  }, 
+  separatorLine: {
+    flex: 1, 
+    height: 1,
+    backgroundColor: Colors.dark80
   }
 });

lib/components/Keyboard/KeyboardInput/CustomKeyboardView.ios.js

@@ -11,7 +11,12 @@ export default class CustomKeyboardView extends CustomKeyboardViewBase {
     inputRef: PropTypes.object,
     initialProps: PropTypes.object,
     component: PropTypes.string,
-    onItemSelected: PropTypes.func
+    onItemSelected: PropTypes.func,
+    useSafeArea: PropTypes.bool
+  };
+
+  static defaultProps = {
+    useSafeArea: true
   };
 
   constructor(props) {
@@ -42,14 +47,15 @@ export default class CustomKeyboardView extends CustomKeyboardViewBase {
   }
 
   async UNSAFE_componentWillReceiveProps(nextProps) {
-    const {inputRef: nextInputRef, component: nextComponent, initialProps: nextInitialProps} = nextProps;
+    const {inputRef: nextInputRef, component: nextComponent, initialProps: nextInitialProps, useSafeArea} = nextProps;
     const {component} = this.props;
 
     if (nextInputRef && nextComponent !== component) {
       if (nextComponent) {
         TextInputKeyboardManager.setInputComponent(nextInputRef, {
           component: nextComponent,
-          initialProps: nextInitialProps
+          initialProps: nextInitialProps,
+          useSafeArea
         });
       } else {
         TextInputKeyboardManager.removeInputComponent(nextInputRef);

lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.js

@@ -110,7 +110,14 @@ class KeyboardAccessoryView extends Component {
      *
      * default: false
      */
-    allowHitsOutsideBounds: PropTypes.bool
+    allowHitsOutsideBounds: PropTypes.bool,
+
+    /**
+     * iOS only.
+     * Whether or not to handle SafeArea
+     * default: true
+     */
+    useSafeArea: PropTypes.bool
   };
 
   static iosScrollBehaviors = IOS_SCROLL_BEHAVIORS;
@@ -236,7 +243,8 @@ class KeyboardAccessoryView extends Component {
       kbInputRef,
       kbComponent,
       onItemSelected,
-      onRequestShowKeyboard
+      onRequestShowKeyboard,
+      useSafeArea
     } = this.props;
 
     return (
@@ -258,6 +266,7 @@ class KeyboardAccessoryView extends Component {
           initialProps={this.processInitialProps()}
           onItemSelected={onItemSelected}
           onRequestShowKeyboard={onRequestShowKeyboard}
+          useSafeArea={useSafeArea}
         />
       </KeyboardTrackingView>
     );

lib/components/Keyboard/KeyboardInput/TextInputKeyboardManager.ios.js

@@ -3,13 +3,13 @@ import ReactNative, {NativeModules, LayoutAnimation} from 'react-native';
 const CustomInputControllerTemp = NativeModules.CustomInputControllerTemp;
 
 export default class TextInputKeyboardManager {
-  static setInputComponent = (textInputRef, {component, initialProps}) => {
+  static setInputComponent = (textInputRef, {component, initialProps, useSafeArea}) => {
     if (!textInputRef || !CustomInputControllerTemp) {
       return;
     }
     const reactTag = findNodeHandle(textInputRef);
     if (reactTag) {
-      CustomInputControllerTemp.presentCustomInputComponent(reactTag, {component, initialProps});
+      CustomInputControllerTemp.presentCustomInputComponent(reactTag, {component, initialProps, useSafeArea});
     }
   };
 

lib/ios/reactnativeuilib/keyboardinput/rctcustomInputcontroller/RCTCustomInputControllerTemp.m

@@ -114,6 +114,10 @@ -(UIView*)getFirstResponder:(UIView*)view
     return nil;
 }
 
+- (BOOL)shouldUseSafeAreaFrom:(NSDictionary *)params {
+    return [params[@"useSafeArea"] isEqual:@(1)];
+}
+
 RCT_EXPORT_METHOD(presentCustomInputComponent:(nonnull NSNumber*)inputFieldTag params:(nonnull NSDictionary*)params)
 {
     RCTBridge* bridge = [self.bridge valueForKey:@"parentBridge"];
@@ -136,7 +140,8 @@ -(UIView*)getFirstResponder:(UIView*)view
 
     self.customInputComponentPresented = NO;
 
-    RCTCustomKeyboardViewController* customKeyboardController = [[RCTCustomKeyboardViewController alloc] init];
+    BOOL useSafeArea = [self shouldUseSafeAreaFrom:params];
+    RCTCustomKeyboardViewController* customKeyboardController = [[RCTCustomKeyboardViewController alloc] initWithUsingSafeArea:useSafeArea];
     customKeyboardController.rootView = rv;
 
     _WXInputHelperView* helperView = [[_WXInputHelperView alloc] initWithFrame:CGRectZero];

lib/ios/reactnativeuilib/keyboardinput/rctcustomInputcontroller/RCTCustomKeyboardViewController.h

@@ -16,6 +16,7 @@
 @interface RCTCustomKeyboardViewController : UIInputViewController
 
 - (void) setAllowsSelfSizing:(BOOL)allowsSelfSizing;
+- (instancetype)initWithUsingSafeArea:(BOOL)useSafeArea;
 
 @property (nonatomic, strong) NSLayoutConstraint *heightConstraint;
 @property (nonatomic, strong) RCTRootView *rootView;

lib/ios/reactnativeuilib/keyboardinput/rctcustomInputcontroller/RCTCustomKeyboardViewController.m

@@ -8,21 +8,26 @@
 #import "RCTCustomKeyboardViewController.h"
 
 #if __has_include(<KeyboardTrackingView/ObservingInputAccessoryViewTemp.h>)
-    #import <KeyboardTrackingView/ObservingInputAccessoryViewTemp.h>
-    #define ObservingInputAccessoryViewTemp_IsAvailable true
+#import <KeyboardTrackingView/ObservingInputAccessoryViewTemp.h>
+#define ObservingInputAccessoryViewTemp_IsAvailable true
 #endif
 
+@interface RCTCustomKeyboardViewController ()
+@property (nonatomic, assign, getter=isUsingSafeArea) BOOL useSafeArea;
+@end
+
 @implementation RCTCustomKeyboardViewController
 
-- (instancetype)init
+- (instancetype)initWithUsingSafeArea:(BOOL)useSafeArea
 {
     self = [super init];
 
     if(self)
     {
         self.inputView = [[UIInputView alloc] initWithFrame:CGRectZero inputViewStyle:UIInputViewStyleKeyboard];
-
+        
         self.heightConstraint = [self.inputView.heightAnchor constraintEqualToConstant:0];
+        self.useSafeArea = useSafeArea;
 
 #ifdef ObservingInputAccessoryViewTemp_IsAvailable
         ObservingInputAccessoryViewTemp *activeObservingInputAccessoryViewTemp = [ObservingInputAccessoryViewTempManager sharedInstance].activeObservingInputAccessoryViewTemp;
@@ -62,18 +67,33 @@ -(void)setRootView:(RCTRootView*)rootView
     _rootView = rootView;
     _rootView.translatesAutoresizingMaskIntoConstraints = NO;
     [self.inputView addSubview:_rootView];
-    
+        
+    [self updateRootViewConstraints];
+    [self.inputView setNeedsLayout];
+}
+
+- (void)updateRootViewConstraints {
     [_rootView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor].active = YES;
     [_rootView.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor].active = YES;
     [_rootView.topAnchor constraintEqualToAnchor:self.view.topAnchor].active = YES;
+    
+    NSLayoutYAxisAnchor *yAxisAnchor = [self bottomLayoutAnchorUsingSafeArea:self.isUsingSafeArea];
+    [_rootView.bottomAnchor constraintEqualToAnchor:yAxisAnchor].active = YES;
+}
 
+- (NSLayoutYAxisAnchor *)bottomLayoutAnchorUsingSafeArea:(BOOL)useSafeArea {
     NSLayoutYAxisAnchor *yAxisAnchor = self.view.bottomAnchor;
+    
+    if (!useSafeArea) {
+        return yAxisAnchor;
+    }
+    
 #if __IPHONE_OS_VERSION_MAX_ALLOWED > __IPHONE_10_3
     if (@available(iOS 11.0, *)) {
         yAxisAnchor = self.view.safeAreaLayoutGuide.bottomAnchor;
     }
 #endif
-    [_rootView.bottomAnchor constraintEqualToAnchor:yAxisAnchor].active = YES;
+    return yAxisAnchor;
 }
 
 @end

src/components/actionBar/index.js

@@ -37,7 +37,7 @@ export default class ActionBar extends BaseComponent {
      */
     useSafeArea: PropTypes.bool,
     /**
-     * keep the action bar postion relative instead of it absolute position
+     * keep the action bar position relative instead of it absolute position
      */
     keepRelative: PropTypes.bool,
     /**