In edge-to-edge Android, Dialogs do not move when keyboard is opened

[sandeepsengupta]

Current behavior

On Android, when edge-to-edge mode is enabled (either by setting edgeToEdgeEnabled=true in android/gradle.properties or by running the app on a recent Android version where edge-to-edge is enforced), Dialog objects do not move when the keyboard is opened. See the screenshots below.

Note: A similar issue (#4218) has already been reported for react-native-paper on iOS.

Android 14 (API 34) with edgeToEdgeEnabled=false (expected behavior):

Android 14 (API 34) with edgeToEdgeEnabled=true:

Android 16 (API 36.1):

(Edge-to-edge mode is of course always enabled by Android 16, regardless of the value of edgeToEdgeEnabled.)

Expected behavior

It would be great if the dialog always moved out of the way of the keyboard, regardless of whether edge-to-edge was enabled.

How to reproduce?

1. Create a new React Native project: npx @react-native-community/cli@latest init DialogBugReproducer
2. Enter the new project directory: cd DialogBugReproducer
3. Install react-native-paper: npm install react-native-paper
4. Delete all content in App.tsx and replace it with the following code. (I copied this code from the react-native-paper docs earlier this year, but I have made a few changes. The original code appears to have recently been moved to https://oss.callstack.com/react-native-paper/docs/components/Dialog/Dialog#usage.)

// Code is from https://oss.callstack.com/react-native-paper/docs/components/Dialog/#usage
// with minor changes.

import * as React from 'react';
import { View } from 'react-native';
import { Button, Dialog, Portal, PaperProvider, Text, TextInput } from 'react-native-paper';

const App = () => {
  const [visible, setVisible] = React.useState(false);

  const showDialog = () => setVisible(true);

  const hideDialog = () => setVisible(false);

  return (
    <PaperProvider>
      <View>
        <Button style={{marginTop: 100}} onPress={showDialog}>Show Dialog</Button>
        <Portal>
          <Dialog visible={visible} onDismiss={hideDialog}>
            <Dialog.Title>Alert</Dialog.Title>
            <Dialog.Content>
              <Text variant="bodyMedium">This is simple dialog</Text>
              <TextInput />
            </Dialog.Content>
            <Dialog.Actions>
              <Button onPress={hideDialog}>Done</Button>
            </Dialog.Actions>
          </Dialog>
        </Portal>
      </View>
    </PaperProvider>
  );
};

export default App;

5. Run the app in an Android 16 emulator (or set edgeToEdgeEnabled=true in android/gradle.properties and run the app in an Android 14 emulator)
6. Click the "Show Dialog" button in the app
7. Click the TextInput to show the keyboard, and notice that the dialog does not move

What have you tried so far?

• I tried running this example in an Android 7 (API 24) emulator with edgeToEdgeEnabled=true. The problem still occurred: the dialog did not move when the keyboard was opened, and the keyboard covered up the "Done" button in the dialog. As such, it seems this problem occurs even on very old versions of Android when edgeToEdgeEnabled is true.
• I tried importing TextInput from 'react-native' instead of 'react-native-paper' (i.e., I modified the above example to use the standard TextInput provided by React Native). This did not fix the problem.
• In the above example, I tried replacing the <View> inside <PaperProvider> with <KeyboardAvoidingView>. I tried all three values of behavior: "height", "position", and "padding". None of these options fixed the problem.
• I later tried putting the <Button> outside the <KeyboardAvoidingView> and trying all three values for behavior again. This did not work either.
• I then tried moving the <KeyboardAvoidingView> inside the <Portal> but outside the <Dialog> and trying all three values for behavior again. This completely messed up the dialog's appearance (the entire dialog displayed as a thin horizontal line with no visible content).
• I then tried moving the <KeyboardAvoidingView> inside the <Dialog> and trying all three values for behavior again. The dialog contents were visible again, but the problem was still not fixed.

Notes

If this is a React Native issue rather than a react-native-paper issue, please let me know and I will create a React Native bug report instead. Also, feel free to close this issue if there are no plans to implement this out of the box in react-native-paper.

Some webpages that may possibly be relevant:

• Fix Keyboard events and KeyboardAvoidingView on Android (edge-to-edge) react/react-native#55855
• Discussion on StackOverflow about adjustResize no longer being sufficient

Your Environment

software	version
ios	N/A. For iOS, see #4218 instead.
android	14 (API 34) and 16 (API 36.1), both emulated
react-native	0.86.0
react-native-paper	5.15.3
node	26.3.1
npm or yarn	npm 11.18.0
expo sdk	Not using Expo