[Mobile] - Android - Bring the Keyboard back when closing modals

packages/components/src/mobile/bottom-sheet/index.native.js

@@ -19,7 +19,10 @@ import SafeArea from 'react-native-safe-area';
 /**
  * WordPress dependencies
  */
-import { subscribeAndroidModalClosed } from '@wordpress/react-native-bridge';
+import {
+	subscribeAndroidModalClosed,
+	showAndroidSoftKeyboard,
+} from '@wordpress/react-native-bridge';
 import { Component } from '@wordpress/element';
 import { withPreferredColorScheme } from '@wordpress/compose';
 
@@ -209,12 +212,21 @@ class BottomSheet extends Component {
 	}
 
 	componentWillUnmount() {
+		const { isFullScreen } = this.props;
+
 		this.dimensionsChangeSubscription.remove();
 		this.keyboardShowListener.remove();
 		this.keyboardHideListener.remove();
 		if ( this.androidModalClosedSubscription ) {
 			this.androidModalClosedSubscription.remove();
 		}
+
+		if ( this.props.isVisible ) {
+			// For full screen modals we add a delay for the keyboard
+			const keyboardDelay = isFullScreen ? 500 : 0;
+			showAndroidSoftKeyboard( { delay: keyboardDelay } );
+		}
+
 		if ( this.safeAreaEventSubscription === null ) {
 			return;
 		}
@@ -315,6 +327,9 @@ class BottomSheet extends Component {
 	onDismiss() {
 		const { onDismiss } = this.props;
 
+		// Restore Keyboard Visibility
+		showAndroidSoftKeyboard();
+
 		if ( onDismiss ) {
 			onDismiss();
 		}
@@ -368,6 +383,7 @@ class BottomSheet extends Component {
 	onHardwareButtonPress() {
 		const { onClose } = this.props;
 		const { handleHardwareButtonPress } = this.state;
+
 		if ( handleHardwareButtonPress && handleHardwareButtonPress() ) {
 			return;
 		}
@@ -528,6 +544,8 @@ class BottomSheet extends Component {
 				}
 				onAccessibilityEscape={ this.onCloseBottomSheet }
 				testID="bottom-sheet"
+				hardwareAccelerated={ true }
+				useNativeDriverForBackdrop={ true }
 				{ ...rest }
 			>
 				<KeyboardAvoidingView

packages/format-library/src/link/test/__snapshots__/modal.native.js.snap

@@ -7,6 +7,7 @@ exports[`LinksUI LinksUI renders 1`] = `
   backdropOpacity={0.2}
   backdropTransitionInTiming={50}
   backdropTransitionOutTiming={50}
+  hardwareAccelerated={true}
   isVisible={true}
   onAccessibilityEscape={[Function]}
   onBackButtonPress={[Function]}
@@ -18,6 +19,7 @@ exports[`LinksUI LinksUI renders 1`] = `
   preferredColorScheme="light"
   swipeDirection="down"
   testID="link-settings-modal"
+  useNativeDriverForBackdrop={true}
 >
   <View
     behavior={false}

packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java

@@ -8,6 +8,7 @@
 import android.os.Vibrator;
 import android.provider.Settings;
 import android.view.View;
+import android.view.ViewTreeObserver;
 import android.view.inputmethod.InputMethodManager;
 
 import androidx.annotation.Nullable;
@@ -44,6 +45,7 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu
         DeferredEventEmitter.JSEventEmitter {
     private final ReactApplicationContext mReactContext;
     private final GutenbergBridgeJS2Parent mGutenbergBridgeJS2Parent;
+    private Runnable mKeyboardRunnable;
 
     private static final String EVENT_NAME_REQUEST_GET_HTML = "requestGetHtml";
     private static final String EVENT_NAME_UPDATE_HTML = "updateHtml";
@@ -554,14 +556,59 @@ private ConnectionStatusCallback requestConnectionStatusCallback(final Callback
         };
     }
 
+    @ReactMethod
+    public void showAndroidSoftKeyboard(Integer delayMillis) {
+        Activity currentActivity = mReactContext.getCurrentActivity();
+        if (currentActivity != null) {
+            View currentFocusedView = currentActivity.getCurrentFocus();
+            if (currentFocusedView != null) {
+                // Cancel any previously scheduled Runnable
+                if (mKeyboardRunnable != null) {
+                    currentActivity.getWindow().getDecorView().removeCallbacks(mKeyboardRunnable);
+                }
+
+                final Runnable showTheKeyboardNow = new Runnable() {
+                    @Override
+                    public void run() {
+                        try {
+                            View activeFocusedView = currentActivity.getCurrentFocus();
+                            if (activeFocusedView != null && currentActivity.getWindow().getDecorView().isShown()) {
+                                InputMethodManager imm =
+                                    (InputMethodManager) mReactContext.getSystemService(Context.INPUT_METHOD_SERVICE);
+                                imm.showSoftInput(activeFocusedView, InputMethodManager.SHOW_IMPLICIT);
+                            }
+                        } catch (Exception e) {
+                            // Noop
+                        }
+                    }
+                };
+
+                // Schedule the keyboard showing with a delay
+                if (currentFocusedView.hasWindowFocus()) {
+                    currentActivity.getWindow().getDecorView().postDelayed(showTheKeyboardNow, delayMillis);
+                } else {
+                    currentFocusedView.getViewTreeObserver().addOnWindowFocusChangeListener(new ViewTreeObserver.OnWindowFocusChangeListener() {
+                        @Override
+                        public void onWindowFocusChanged(boolean hasFocus) {
+                            if (hasFocus) {
+                                currentActivity.getWindow().getDecorView().postDelayed(showTheKeyboardNow, delayMillis);
+                                currentFocusedView.getViewTreeObserver().removeOnWindowFocusChangeListener(this);
+                            }
+                        }
+                    });
+                }
+            }
+        }
+    }
+
     @ReactMethod
     public void hideAndroidSoftKeyboard() {
         Activity currentActivity = mReactContext.getCurrentActivity();
         if (currentActivity != null) {
             View currentFocusedView = currentActivity.getCurrentFocus();
             if (currentFocusedView != null) {
                 InputMethodManager imm =
-                        (InputMethodManager) mReactContext.getSystemService(Context.INPUT_METHOD_SERVICE);
+                    (InputMethodManager) mReactContext.getSystemService(Context.INPUT_METHOD_SERVICE);
                 imm.hideSoftInputFromWindow(currentFocusedView.getWindowToken(), 0);
             }
         }

packages/react-native-bridge/index.js

@@ -515,6 +515,22 @@ export function sendEventToHost( eventName, properties ) {
 	);
 }
 
+/**
+ * Shows Android's soft keyboard if there's a TextInput focused and
+ * the keyboard is hidden.
+ *
+ * @param {Object} options
+ * @return {void}
+ */
+export function showAndroidSoftKeyboard( options ) {
+	if ( isIOS ) {
+		return;
+	}
+
+	const { delay = 0 } = options || {};
+	RNReactNativeGutenbergBridge.showAndroidSoftKeyboard( delay );
+}
+
 /**
  * Hides Android's soft keyboard.
  *

test/native/setup.js

@@ -109,6 +109,7 @@ jest.mock( '@wordpress/react-native-bridge', () => {
 		subscribeOnRedoPressed: jest.fn(),
 		useIsConnected: jest.fn( () => ( { isConnected: true } ) ),
 		editorDidMount: jest.fn(),
+		showAndroidSoftKeyboard: jest.fn(),
 		hideAndroidSoftKeyboard: jest.fn(),
 		editorDidAutosave: jest.fn(),
 		subscribeMediaUpload: jest.fn(),