fix(modal): move dialogs above the on-screen keyboard

Components rendered in a `Portal`, such as `Modal` and `Dialog`, used to be
kept above the keyboard by the system: on Android `windowSoftInputMode`
was set to `adjustResize`, which shrank the whole window. That no longer
happens in edge-to-edge mode, which is enforced since Android 15, where
the keyboard is reported as an inset that has to be handled by the app,
and it never happened on iOS.

Track the keyboard in `Modal` and pad the wrapper by the distance between
its measured bottom edge and the top edge of the keyboard, so the content
stays centered in the visible area.

Both edges are relative to the window, so windows which are still resized
by the system need no special casing: their wrapper is already laid out
above the keyboard, which puts the overlap at or below zero.

Fixes #5021
Fixes #4218

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: aliyilmaztech

example/src/Examples/DialogExample.tsx

@@ -10,6 +10,7 @@ import {
   DialogWithLoadingIndicator,
   DialogWithLongText,
   DialogWithRadioBtns,
+  DialogWithTextInput,
   UndismissableDialog,
 } from './Dialogs';
 import ScreenWrapper from '../ScreenWrapper';
@@ -70,6 +71,13 @@ const DialogExample = () => {
       >
         With icon
       </Button>
+      <Button
+        mode="outlined"
+        onPress={_toggleDialog('dialog8')}
+        style={styles.button}
+      >
+        With text input
+      </Button>
       {Platform.OS === 'android' && (
         <Button
           mode="outlined"
@@ -107,6 +115,10 @@ const DialogExample = () => {
         visible={_getVisible('dialog7')}
         close={_toggleDialog('dialog7')}
       />
+      <DialogWithTextInput
+        visible={_getVisible('dialog8')}
+        close={_toggleDialog('dialog8')}
+      />
     </ScreenWrapper>
   );
 };

example/src/Examples/Dialogs/DialogWithTextInput.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+
+import { Button, Portal, Dialog, TextInput } from 'react-native-paper';
+
+import { TextComponent } from './DialogTextComponent';
+
+const DialogWithTextInput = ({
+  visible,
+  close,
+}: {
+  visible: boolean;
+  close: () => void;
+}) => {
+  const [name, setName] = React.useState('');
+
+  return (
+    <Portal>
+      <Dialog onDismiss={close} visible={visible}>
+        <Dialog.Title>Dialog with text input</Dialog.Title>
+        <Dialog.Content>
+          <TextComponent>
+            Focus the input below to check that the dialog stays above the
+            on-screen keyboard.
+          </TextComponent>
+          <TextInput
+            label="Name"
+            value={name}
+            onChangeText={setName}
+            style={styles.input}
+          />
+        </Dialog.Content>
+        <Dialog.Actions>
+          <Button onPress={close}>Cancel</Button>
+          <Button onPress={close}>Save</Button>
+        </Dialog.Actions>
+      </Dialog>
+    </Portal>
+  );
+};
+
+const styles = StyleSheet.create({
+  input: {
+    marginTop: 16,
+  },
+});
+
+export default DialogWithTextInput;

example/src/Examples/Dialogs/index.tsx

@@ -5,3 +5,4 @@ export { default as DialogWithRadioBtns } from './DialogWithRadioBtns';
 export { default as UndismissableDialog } from './UndismissableDialog';
 export { default as DialogWithIcon } from './DialogWithIcon';
 export { default as DialogWithDismissableBackButton } from './DialogWithDismissableBackButton';
+export { default as DialogWithTextInput } from './DialogWithTextInput';

src/components/Modal.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Animated, Easing, StyleSheet, Pressable, View } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
 
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import useLatestCallback from 'use-latest-callback';
@@ -12,6 +12,7 @@ import type { ThemeProp } from '../types';
 import { addEventListener } from '../utils/addEventListener';
 import { BackHandler } from '../utils/BackHandler/BackHandler';
 import useAnimatedValue from '../utils/useAnimatedValue';
+import useKeyboardOverlap from '../utils/useKeyboardOverlap';
 
 const scrimAlpha = tokens.md.sys.scrim.alpha;
 
@@ -114,6 +115,18 @@ function Modal({
   const { top, bottom } = useSafeAreaInsets();
   const opacity = useAnimatedValue(visible ? 1 : 0);
   const [visibleInternal, setVisibleInternal] = React.useState(visible);
+  const [wrapperBottom, setWrapperBottom] = React.useState<number | null>(null);
+
+  const keyboardOverlap = useKeyboardOverlap({
+    enabled: visibleInternal,
+    containerBottom: wrapperBottom,
+  });
+
+  const onWrapperLayout = React.useCallback((event: LayoutChangeEvent) => {
+    const { y, height } = event.nativeEvent.layout;
+
+    setWrapperBottom(y + height);
+  }, []);
 
   const showModalAnimation = React.useCallback(() => {
     Animated.timing(opacity, {
@@ -209,9 +222,16 @@ function Modal({
       <View
         style={[
           styles.wrapper,
-          { marginTop: top, marginBottom: bottom },
+          {
+            marginTop: top,
+            marginBottom: bottom,
+            // Keeps the content above the on-screen keyboard on platforms where
+            // the system doesn't resize the window, e.g. iOS or edge-to-edge Android.
+            paddingBottom: keyboardOverlap,
+          },
           style,
         ]}
+        onLayout={onWrapperLayout}
         pointerEvents="box-none"
         testID={`${testID}-wrapper`}
       >

src/components/__tests__/Modal.test.tsx

@@ -1,8 +1,15 @@
-import { Animated, BackHandler as RNBackHandler, Text } from 'react-native';
+import {
+  Animated,
+  BackHandler as RNBackHandler,
+  DeviceEventEmitter,
+  Dimensions,
+  Platform,
+  Text,
+} from 'react-native';
 import type { BackHandlerStatic as RNBackHandlerStatic } from 'react-native';
 
 import { afterAll, beforeAll, describe, expect, it, jest } from '@jest/globals';
-import { act, userEvent } from '@testing-library/react-native';
+import { act, fireEvent, userEvent } from '@testing-library/react-native';
 
 import { render, screen } from '../../test-utils';
 import { LightTheme } from '../../theme/schemes';
@@ -575,6 +582,186 @@ describe('Modal', () => {
     });
   });
 
+  // `keyboardWillShow` and `keyboardWillHide` are not emitted on Android
+  const keyboardEventsPerPlatform: Array<[typeof Platform.OS, string, string]> =
+    [
+      ['ios', 'keyboardWillShow', 'keyboardWillHide'],
+      ['android', 'keyboardDidShow', 'keyboardDidHide'],
+    ];
+
+  describe.each(keyboardEventsPerPlatform)(
+    'when the on-screen keyboard is shown on %s',
+    (platform, showEvent, hideEvent) => {
+      const KEYBOARD_HEIGHT = 300;
+      const TOP_INSET = 37;
+      const BOTTOM_INSET = 44;
+
+      const screenHeight = Dimensions.get('screen').height;
+      // Space taken by the keyboard below the bottom edge of the wrapper
+      const expectedOverlap = KEYBOARD_HEIGHT - BOTTOM_INSET;
+      const originalPlatform = Platform.OS;
+
+      beforeAll(() => {
+        Platform.OS = platform;
+      });
+
+      afterAll(() => {
+        Platform.OS = originalPlatform;
+      });
+
+      const showKeyboard = async () => {
+        await act(() => {
+          DeviceEventEmitter.emit(showEvent, {
+            endCoordinates: {
+              screenX: 0,
+              screenY: screenHeight - KEYBOARD_HEIGHT,
+              width: 750,
+              height: KEYBOARD_HEIGHT,
+            },
+          });
+        });
+      };
+
+      const hideKeyboard = async () => {
+        await act(() => {
+          DeviceEventEmitter.emit(hideEvent, {
+            endCoordinates: {
+              screenX: 0,
+              screenY: screenHeight,
+              width: 750,
+              height: 0,
+            },
+          });
+        });
+      };
+
+      const layoutWrapper = async (y: number, height: number) => {
+        await act(() =>
+          fireEvent(screen.getByTestId('modal-wrapper'), 'layout', {
+            nativeEvent: { layout: { x: 0, y, width: 750, height } },
+          })
+        );
+      };
+
+      it('should keep the content above the keyboard if the window is not resized', async () => {
+        await render(
+          <Modal visible={true} testID="modal">
+            {null}
+          </Modal>
+        );
+
+        expect(screen.getByTestId('modal-wrapper')).toHaveStyle({
+          paddingBottom: 0,
+        });
+
+        await layoutWrapper(TOP_INSET, screenHeight - TOP_INSET - BOTTOM_INSET);
+        await showKeyboard();
+
+        expect(screen.getByTestId('modal-wrapper')).toHaveStyle({
+          paddingBottom: expectedOverlap,
+        });
+      });
+
+      it('should account for a keyboard which is already open when it becomes visible', async () => {
+        // `Keyboard.metrics()` is populated from `keyboardDidShow` on every platform
+        await act(() => {
+          DeviceEventEmitter.emit('keyboardDidShow', {
+            endCoordinates: {
+              screenX: 0,
+              screenY: screenHeight - KEYBOARD_HEIGHT,
+              width: 750,
+              height: KEYBOARD_HEIGHT,
+            },
+          });
+        });
+
+        const { rerender } = await render(
+          <Modal visible={false} testID="modal">
+            {null}
+          </Modal>
+        );
+
+        await rerender(
+          <Modal visible={true} testID="modal">
+            {null}
+          </Modal>
+        );
+
+        await layoutWrapper(TOP_INSET, screenHeight - TOP_INSET - BOTTOM_INSET);
+
+        expect(screen.getByTestId('modal-wrapper')).toHaveStyle({
+          paddingBottom: expectedOverlap,
+        });
+
+        await act(() => {
+          DeviceEventEmitter.emit('keyboardDidHide', {
+            endCoordinates: {
+              screenX: 0,
+              screenY: screenHeight,
+              width: 750,
+              height: 0,
+            },
+          });
+        });
+      });
+
+      it('should not add any padding if the window is resized by the system', async () => {
+        await render(
+          <Modal visible={true} testID="modal">
+            {null}
+          </Modal>
+        );
+
+        // The system shrunk the window, so the wrapper is already above the keyboard
+        await layoutWrapper(
+          TOP_INSET,
+          screenHeight - TOP_INSET - BOTTOM_INSET - KEYBOARD_HEIGHT
+        );
+        await showKeyboard();
+
+        expect(screen.getByTestId('modal-wrapper')).toHaveStyle({
+          paddingBottom: 0,
+        });
+      });
+
+      it('should follow the wrapper if the safe area insets are overridden', async () => {
+        await render(
+          <Modal visible={true} testID="modal" style={{ marginBottom: 0 }}>
+            {null}
+          </Modal>
+        );
+
+        await layoutWrapper(TOP_INSET, screenHeight - TOP_INSET);
+        await showKeyboard();
+
+        expect(screen.getByTestId('modal-wrapper')).toHaveStyle({
+          paddingBottom: KEYBOARD_HEIGHT,
+        });
+      });
+
+      it('should restore the original padding once the keyboard is hidden', async () => {
+        await render(
+          <Modal visible={true} testID="modal">
+            {null}
+          </Modal>
+        );
+
+        await layoutWrapper(TOP_INSET, screenHeight - TOP_INSET - BOTTOM_INSET);
+        await showKeyboard();
+
+        expect(screen.getByTestId('modal-wrapper')).toHaveStyle({
+          paddingBottom: expectedOverlap,
+        });
+
+        await hideKeyboard();
+
+        expect(screen.getByTestId('modal-wrapper')).toHaveStyle({
+          paddingBottom: 0,
+        });
+      });
+    }
+  );
+
   it('animated value changes correctly', async () => {
     const value = new Animated.Value(1);
     await render(