callstack / callstack/react-native-paper

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

オープン
#5,021 コメント 0 件 リアクション 2 件 担当者 0 名 GitHub で見る
bug
主要言語
TypeScript
スター
14.5k
フォーク
2.2k
平均マージ
5日 23時間
マージ済み PR(30日)
12

説明

### 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):

Image

#### Android 14 (API 34) with `edgeToEdgeEnabled=true`:

Image

#### Android 16 (API 36.1):

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

Image

### 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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

edgeToEdgeEnabled=true を有効にした Android 14 エミュレーターまたは Android 16 を使用して App.tsx の例から問題を再現し、その後、参照されている React Native のキーボードと edge-to-edge に関する議論と併せて、react-native-paper の Dialog と Portal の使用方法を読みます。ダイアログがキーボードから離れて移動し、edge-to-edge モードでもその Done ボタンを引き続き使用できれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
android, react-native, typescript
領域
frontend, mobile
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
静か
明瞭さ
おおむね明確
初心者へのやさしさ
52/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。