Keyboard accessory view safe area api support

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

@@ -1,6 +1,6 @@
 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 {ScrollView, StyleSheet, TextInput, Platform} from 'react-native';
+import {Keyboard, Text, View, Colors, Spacings, Constants, Typography, Button, Switch} from 'react-native-ui-lib';
 const KeyboardAccessoryView = Keyboard.KeyboardAccessoryView;
 const KeyboardUtils = Keyboard.KeyboardUtils;
 
@@ -15,7 +15,8 @@ export default class KeyboardInputViewScreen extends PureComponent {
       component: undefined,
       initialProps: undefined
     },
-    receivedKeyboardData: undefined
+    receivedKeyboardData: undefined,
+    useSafeArea: true
   };
 
   onKeyboardItemSelected = (keyboardId, params) => {
@@ -53,6 +54,13 @@ export default class KeyboardInputViewScreen extends PureComponent {
     this.setState({customKeyboard: {}});
   };
 
+  toggleUseSafeArea = () => {
+    this.resetKeyboardView();
+    this.setState({
+      useSafeArea: !this.state.useSafeArea
+    });
+  };
+
   showKeyboardView(component, title) {
     this.setState({
       customKeyboard: {
@@ -84,12 +92,14 @@ 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}/>
-          ))}
-        </View>
+        <View column>
+          { this.safeAreaSwitchToggleForIOS() }
+          <View row>
+            {this.getToolbarButtons().map((button, index) => (
+              <Button label={button.text} link onPress={button.onPress} key={index} style={styles.button}/>
+            ))}
+          </View>
+        </View> 
       </View>
     );
   };
@@ -107,10 +117,26 @@ export default class KeyboardInputViewScreen extends PureComponent {
     });
   };
 
+  safeAreaSwitchToggleForIOS = () => {
+    if (Platform.OS !== 'ios') {
+      return; 
+    } 
+    const {useSafeArea} = this.state;
+    return (  
+      <View column>
+        <View style={styles.separatorLine}/>
+        <View 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
@@ -135,6 +161,7 @@ export default class KeyboardInputViewScreen extends PureComponent {
           onKeyboardResigned={this.onKeyboardResigned}
           revealKeyboardInteractive
           onRequestShowKeyboard={this.onRequestShowKeyboard}
+          useSafeArea={useSafeArea}
         />
       </View>
     );
@@ -149,7 +176,7 @@ const styles = StyleSheet.create({
   },
   textInput: {
     flex: 1,
-    padding: Spacings.s2,
+    padding: Spacings.s1,
     ...Typography.text70
   },
   button: {
@@ -159,5 +186,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,8 @@ export default class CustomKeyboardView extends CustomKeyboardViewBase {
     inputRef: PropTypes.object,
     initialProps: PropTypes.object,
     component: PropTypes.string,
-    onItemSelected: PropTypes.func
+    onItemSelected: PropTypes.func,
+    useSafeArea: PropTypes.bool
   };
 
   constructor(props) {
@@ -42,14 +43,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/CustomKeyboardViewBase.js

@@ -6,11 +6,13 @@ export default class CustomKeyboardViewBase extends Component {
   static propTypes = {
     initialProps: PropTypes.object,
     component: PropTypes.string,
-    onItemSelected: PropTypes.func
+    onItemSelected: PropTypes.func,
+    useSafeArea: PropTypes.bool
   };
 
   static defaultProps = {
-    initialProps: {}
+    initialProps: {},
+    useSafeArea: true
   };
 
   constructor(props) {

lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.js

@@ -110,7 +110,15 @@ class KeyboardAccessoryView extends Component {
      *
      * default: false
      */
-    allowHitsOutsideBounds: PropTypes.bool
+    allowHitsOutsideBounds: PropTypes.bool,
+
+    /**
+     * iOS only.
+     * Allow KeyboardAccessoryView to reach to the bottom of the screen (on iPhone x and above)
+     *
+     * default: true
+     */
+    useSafeArea: PropTypes.bool
   };
 
   static iosScrollBehaviors = IOS_SCROLL_BEHAVIORS;
@@ -236,7 +244,8 @@ class KeyboardAccessoryView extends Component {
       kbInputRef,
       kbComponent,
       onItemSelected,
-      onRequestShowKeyboard
+      onRequestShowKeyboard,
+      useSafeArea
     } = this.props;
 
     return (
@@ -258,6 +267,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,
     /**