[Android] KeybordAvoidingView not working on react-native 0.72.1

[selimbaruti]

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;

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	It looks like your issue is missing a reproducible example. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

[selimbaruti]

Steps to reproduce the bug:

1. Create 2 initial projects. The first should have RN of version 0.71.1 and the second 0.72.1.
2. Write the same code on both projects.

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;

Finally you will see that the KeyboardAvoidingView will not work on the 0.72.1 version.

[cortinico]

Steps to reproduce the bug:

Hey @selimbaruti, please provide a link to a reproducer project (a repository). The snippet is not sufficient.

[selimbaruti]

Steps to reproduce the bug:

Hey @selimbaruti, please provide a link to a reproducer project (a repository). The snippet is not sufficient.

This is the repo that KeyboardAvoidingView works correctly https://github.com/selimbaruti/keyboardavoidingview7111 (version 0.71.11)
and this one is the repo that KeyboardAvoidingView doesn't work https://github.com/selimbaruti/keyboardavoidingview721 (Version 0.72.1).

[selimbaruti]

@cortinico Did you test it?

[cortinico]

@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.

[WooMinGy]

same issue

[ruvkr]

Faced the same issue after upgrading to expo sdk 49 with react native 0.72.1.

[LuisChavezz]

Same issue here with 0.72.3

@selimbaruti Did you solve it?

[selimbaruti]

Same issue here with 0.72.3

@selimbaruti Did you solve it?

I haven't found any solution for it

[timothyerwin]

I seem to be having the same issue. I'm using adjustResize but KeyboardAvoidingView does not do anything at all. The keyboard will show over the app instead of adjusting. It seems like it's not listening to events any more.

"expo": "^49.0.3",
"react-native": "0.72.3",

buildToolsVersion = "33.0.0"
minSdkVersion = 26
compileSdkVersion = 33
targetSdkVersion = 33

// We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
ndkVersion = "23.1.7779620"
kotlinVersion = '1.9.0'

[LudoFont]

same issue here, please do something

[mlalitthapa]

Same issue here.

I am trying to upgrade the expo from 48 to 49 as well.

[LudoFont]

Hey guys,

In my case, the following line was the reason of the bug :

NavigationBar.setPositionAsync("absolute");

Do you have this config in your project ?

[selimbaruti]

Hey guys,

In my case, the following line was the reason of the bug :

NavigationBar.setPositionAsync("absolute");

Do you have this config in your project ?

No, I don't have this in my project

[Serg-Kim]

You can try "adjustPan", but it doesn't work perfectly: bottom border of input can be cut off

Also if your input is not inside ScrollView you can try flex:1 and justifyContent: "flex-end" for screen container

[andreacassani]

I'm upgrading an old project from RN 0.66.1 to 0.72.3 and I'm noticing this problem as well on Android.
When I try to nest a ScrollView inside a KeyboardAvoidingView, I can't get it to work anymore.
In my case, changing from adjustResize to adjustPan doesn't seem to fix the issue.
On iOS everything works just fine.

[Serg-Kim]

Я обновляю старый проект с RN 0.66.1 до 0.72.3, и я также замечаю эту проблему на Android. Когда я пытаюсь вложить a ScrollViewвнутрь a KeyboardAvoidingView, я больше не могу заставить его работать. В моем случае изменение с adjustResizeна , adjustPanпохоже, не решает проблему. На iOS все работает просто отлично.

I use 'adjustPan' with behavior={Platform.OS === 'ios' ? 'padding' : undefined} for KeyboardAvoidingView and it doesn't work perfectly but it works
Even inside ScrollView

[andreacassani]

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]

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:

react-native/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java

Line 1073 in aab5285

mScroller.abortAnimation();

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

[selimbaruti]

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:

react-native/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java

Line 1073 in aab5285

mScroller.abortAnimation();

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

Please, can you create a PR for it?

[efstathiosntonas]

fixed on 0.72.4

[v-x2]

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

[karamjb]

@efstathiosntonas the issue is not fixed, still not working

[artsnr1]

Any update? When it will be fixed?

[kdsanman]

Still seeing this issue.

[yaela251]

Still not working as expected in Android

[actaruss]

If that can help, this worked for me:

In app.json

{
	"expo": {
		"android": {
			"softwareKeyboardLayoutMode": "pan"
		}		
	}
}

In your component

<KeyboardAvoidingView
	style={{
		width: '100%',
			paddingBottom: isAndroid ? 20 : 0,
		}}
		behavior={isAndroid ? 'position' : 'padding'}>
			{...content}
</KeyboardAvoidingView>

Something like this...