react / react/react-native

KeyboardAvoidingView Leaves Extra Bottom Padding After Keyboard Closes

オープン
#52,596 コメント 30 件 リアクション 60 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

API: Keyboard Component: KeyboardAvoidingView Issue: Author Provided Repro
主要言語
C++
スター
127k
フォーク
25.3k
平均マージ
1日 23時間
マージ済み PR(30日)
4

説明

Description
Description

When using KeyboardAvoidingView with behavior="height" on Android in combination with SafeAreaView and useSafeAreaInsets(), remains even after the keyboard closes, leaving an unexpected gap at the bottom of the screen. This issue is more visible on Android devices without soft navigation buttons.

This behavior is inconsistent with iOS, where the padding collapses as expected.

Expected Behavior
When the keyboard closes, the layout should return to its original state, removing any bottom padding unless explicitly added by the developer.

Actual Behavior
After the keyboard closes on Android, an extra bottom padding remains on the screen, pushing up content unnecessarily.
Removing paddingBottom: insets.bottom fixes it, but this breaks devices with safe area (iOS or gesture nav Android) where insets are needed.

Steps to reproduce
Steps To Reproduce
  1. Create a SafeAreaView wrapping a KeyboardAvoidingView (behavior="height").
  2. Inside, render a FlatList and an input box pinned to the bottom.
  3. Open keyboard → input shifts correctly.
  4. Close keyboard → padding remains, leaving gap at bottom.

<SafeAreaView style={{flex: 1}}> <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1, paddingTop: insets.top, }}> <View style={[ {flex: 1}, theme == 'dark' ? {backgroundColor: AppTheme.dark.screenBackground} : {backgroundColor: AppTheme.light.screenBackground}, ]}> </View> </KeyboardAvoidingView> </SafeAreaView>

React Native Version

0.78.0

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info
info Fetching system and libraries information...
System:
  OS: macOS 15.5
  CPU: (8) arm64 Apple M2
  Memory: 151.19 MB / 8.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.14.0
    path: ~/.nvm/versions/node/v20.14.0/bin/node
  Yarn:
    version: 4.8.1
    path: ~/.nvm/versions/node/v20.14.0/bin/yarn
  npm:
    version: 10.7.0
    path: ~/.nvm/versions/node/v20.14.0/bin/npm
  Watchman:
    version: 2025.04.28.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/socon/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.5
      - iOS 18.5
      - macOS 15.5
      - tvOS 18.5
      - visionOS 2.5
      - watchOS 11.5
  Android SDK:
    API Levels:
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 30.0.3
      - 34.0.0
      - 35.0.0
      - 35.0.1
      - 36.0.0
    System Images:
      - android-28 | Google ARM64-V8a Play ARM 64 v8a
      - android-29 | Google Play ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
      - android-36 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.3 AI-243.26053.27.2432.13536105
  Xcode:
    version: 16.4/16F6
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 3.2.2
    path: /Users/socon/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.78.0
    wanted: 0.78.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

info React Native v0.80.1 is now available (your project is running on v0.78.0).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.80.1
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.78.0&to=0.80.1
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".
Stacktrace or Logs
No Crash Happened
MANDATORY Reproducer

NONE

Screenshots and Videos

When Keyboard is Opened it is ok
but when it is closed getting a extra padding below

Image Image Image

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

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

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

Issue に記載されている KeyboardAvoidingView と SafeAreaView の再現から始め、behavior="height" と useSafeAreaInsets() を使用して Android で確認します。キーボードを開いたときと閉じたときの Android レイアウトの変更を追跡します。キーボードを閉じた後に下部の padding が元の状態に戻り、ジェスチャーナビゲーションを使用するデバイスや iOS で safe area の処理を壊さないことを完了条件とします。

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

評価

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

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

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