[IMPROVEMENT] Bottom view color to custom keyboard

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

@@ -13,7 +13,8 @@ export default class CustomKeyboardView extends CustomKeyboardViewBase {
     initialProps: PropTypes.object,
     component: PropTypes.string,
     onItemSelected: PropTypes.func,
-    useSafeArea: PropTypes.bool
+    useSafeArea: PropTypes.bool,
+    bottomViewColor: PropTypes.string
   };
 
   static defaultProps = {
@@ -35,9 +36,11 @@ export default class CustomKeyboardView extends CustomKeyboardViewBase {
           this.keyboardExpandedToggle[args.keyboardId] = false;
         }
         this.keyboardExpandedToggle[args.keyboardId] = !this.keyboardExpandedToggle[args.keyboardId];
-        TextInputKeyboardManager.toggleExpandKeyboard(inputRef,
+        TextInputKeyboardManager.toggleExpandKeyboard(
+          inputRef,
           this.keyboardExpandedToggle[args.keyboardId],
-          initialProps.expandWithLayoutAnimation);
+          initialProps.expandWithLayoutAnimation
+        );
       }
     });
   }
@@ -48,15 +51,22 @@ export default class CustomKeyboardView extends CustomKeyboardViewBase {
   }
 
   async UNSAFE_componentWillReceiveProps(nextProps) {
-    const {inputRef: nextInputRef, component: nextComponent, initialProps: nextInitialProps, useSafeArea} = nextProps;
+    const {
+      inputRef: nextInputRef,
+      component: nextComponent,
+      initialProps: nextInitialProps,
+      useSafeArea,
+      bottomViewColor
+    } = nextProps;
     const {component} = this.props;
 
     if (nextInputRef && nextComponent !== component) {
       if (nextComponent) {
         TextInputKeyboardManager.setInputComponent(nextInputRef, {
           component: nextComponent,
           initialProps: nextInitialProps,
-          useSafeArea
+          useSafeArea,
+          bottomViewColor
         });
       } else {
         TextInputKeyboardManager.removeInputComponent(nextInputRef);

lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.js

@@ -280,6 +280,7 @@ class KeyboardAccessoryView extends Component {
           onItemSelected={onItemSelected}
           onRequestShowKeyboard={onRequestShowKeyboard}
           useSafeArea={useSafeArea}
+          bottomViewColor={this.props.bottomViewColor}
         />
       </KeyboardTrackingView>
     );

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

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

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

@@ -142,6 +142,16 @@ - (BOOL)shouldUseSafeAreaFrom:(NSDictionary *)params {
 
     BOOL useSafeArea = [self shouldUseSafeAreaFrom:params];
     RCTCustomKeyboardViewControllerTemp* customKeyboardController = [[RCTCustomKeyboardViewControllerTemp alloc] initWithUsingSafeArea:useSafeArea];
+    if(params[@"bottomViewColor"] != nil)
+    {
+        UIColor *safeAreaBackgroundColor = [RCTConvert UIColor:params[@"bottomViewColor"]];
+        if(safeAreaBackgroundColor != nil)
+        {
+            customKeyboardController.safeAreaBackgroundColor = safeAreaBackgroundColor;
+			// Using the same background from safe area view to root view
+            rv.backgroundColor = safeAreaBackgroundColor;
+        }
+    }
     customKeyboardController.rootView = rv;
 
     _WXInputHelperViewTemp* helperView = [[_WXInputHelperViewTemp alloc] initWithFrame:CGRectZero];

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

@@ -20,5 +20,6 @@
 
 @property (nonatomic, strong) NSLayoutConstraint *heightConstraint;
 @property (nonatomic, strong) RCTRootView *rootView;
+@property (nonatomic, strong) UIColor *safeAreaBackgroundColor;
 
 @end

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

@@ -57,6 +57,15 @@ - (void) setAllowsSelfSizing:(BOOL)allowsSelfSizing
     }
 }
 
+-(void)setSafeAreaBackgroundColor:(UIColor *)safeAreaBackgroundColor
+{
+    _safeAreaBackgroundColor = safeAreaBackgroundColor;
+
+    if (self.safeAreaBackgroundColor && _safeAreaBackgroundColor != nil) {
+       self.view.backgroundColor = _safeAreaBackgroundColor;
+    }
+}
+
 -(void)setRootView:(RCTRootView*)rootView
 {
     if(_rootView != nil)