callstack / callstack/react-native-paper
In edge-to-edge Android, Dialogs do not move when keyboard is opened
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
### 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 (https://github.com/callstack/react-native-paper/issues/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.)
```js
// 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 (
Show Dialog
Alert
This is simple dialog
Done
);
};
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 `` inside `` with ``. I tried all three values of [`behavior`](https://reactnative.dev/docs/keyboardavoidingview#behavior): `"height"`, `"position"`, and `"padding"`. None of these options fixed the problem.
- I later tried putting the `` outside the `` and trying all three values for `behavior` again. This did not work either.
- I then tried moving the `` inside the `` but outside the `` 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 `` inside the `` 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:
- https://github.com/react/react-native/pull/55855
- [Discussion on StackOverflow about `adjustResize` no longer being sufficient](https://stackoverflow.com/a/79364446)
### Your Environment
| software | version
| --------------------- | -------
| ios | N/A. For iOS, see https://github.com/callstack/react-native-paper/issues/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
Contributor guide
Assessment
This issue has not been assessed yet.