react-native: [Android] KeybordAvoidingView not working on react-native 0.72.1

Description

After I upgraded RN version to 0.72.1, KeyboardAvoidingView isn’t working anymore in Android.

React Native Version

0.72.1

Output of `npx react-native info`

System: OS: macOS 13.0 CPU: (8) arm64 Apple M2 Memory: 135.16 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 8.19.4 - ~/.nvm/versions/node/v16.20.0/bin/npm Watchman: 2023.05.22.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.12.1 - /Users/evolutit/.rvm/gems/ruby-2.7.6/bin/pod SDKs: iOS SDK: Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1 Android SDK: Not Found IDEs: Android Studio: 2022.1 AI-221.6008.13.2211.9514443 Xcode: 14.2/14C18 - /usr/bin/xcodebuild Languages: Java: 11.0.18 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.2.0 => 18.2.0 react-native: 0.71.11 => 0.71.11 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

Try to implement KeyboardAvoidingView and test it in Android

Snack, code example, screenshot, or link to a repository

Version 0.72.1

Version 0.71.1

import React from 'react';
import {
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  Text,
  TextInput,
} from 'react-native';

function App(): JSX.Element {

  return (
    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={{flex:1}}>
      <ScrollView
        style={{flex:1}}>
          <Text style={{fontSize:20,marginTop:40}}>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
            It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </Text>
          <TextInput value='test' style={{borderWidth:1,margin:2}} />

      </ScrollView>
    </KeyboardAvoidingView>
  );
}


export default App;

About this issue

Original URL
State: closed
Created a year ago
Reactions: 9
Comments: 28 (5 by maintainers)

Commits related to this issue

Fix Android ScrollView not responding to Keyboard events when nested inside a KeyboardAvoidingView (#38728) Summary: Starting from RN 0.72.0, when we nest a ScrollView inside a KeyboardAvoidingView, ... — committed to facebook/react-native by andreacassani a year ago
Fix Android ScrollView not responding to Keyboard events when nested inside a KeyboardAvoidingView (#38728) Summary: Starting from RN 0.72.0, when we nest a ScrollView inside a KeyboardAvoidingView, ... — committed to expo/react-native by andreacassani a year ago

Most upvoted comments

@efstathiosntonas unfortunately, this issue is not solved yet. Some as the others, on iOS work perfectly, but on android does not.

v-x2 on Aug 15, 2023

@efstathiosntonas the issue is not fixed, still not working

karamjb on Aug 18, 2023

Any update? When it will be fixed?

artsnr1 on Sep 12, 2023

fixed on 0.72.4

efstathiosntonas on Aug 14, 2023

I added a repository https://github.com/andreacassani/kav-test-android where you can compare the behavior on RN 0.72.3 vs 0.71.12 (should be the last version before 0.72).

I think something happened between 71.12 and 72.3 that broke how KeyboardAvoidingView works on Android.

Also I’d like to add that I’ve noticed more consistent behavior using

behavior={Platform.OS === 'ios' ? 'padding' : undefined}

as others have posted before, instead of

behavior={Platform.OS === 'ios' ? 'padding' : 'height'}

which is the approach shown in the docs (https://reactnative.dev/docs/keyboardavoidingview).

I hope this can help someone with more Android skills than me narrow down the problem.

andreacassani on Jul 31, 2023

same issue

WooMinGy on Jul 12, 2023

So it looks like this is an issue with the ScrollView rather than the KeyboardAvoidingView.

In RN 0.72.0 681b35daab the following line was added to ReactScrollView.java:

https://github.com/facebook/react-native/blob/aab52859a447a8257b106fe307008af218322e3d/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java#L1073

Removing this line makes ScrollView nested inside KeyboardAvoidingView to work again in my project.

andreacassani on Jul 31, 2023

Same issue here with 0.72.3

@selimbaruti Did you solve it?

I haven’t found any solution for it

selimbaruti on Jul 18, 2023

@cortinico Did you test it?

Nope I haven’t tested it. We receive hundreds of issue every day and we’re a small team, so we can’t just test or even fix everything.

Having a repro will help as someone else from the community could look into it and potentially fix it, while we find the time to investigate this issue.

cortinico on Jul 4, 2023