[Android] KeybordAvoidingView not working on react-native 0.72.1 #38152

selimbaruti · 2023-07-02T10:28:46Z

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;

The text was updated successfully, but these errors were encountered:

github-actions · 2023-07-03T13:26:14Z

⚠️	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 · 2023-07-03T14:43:24Z

Steps to reproduce the bug:

Create 2 initial projects. The first should have RN of version 0.71.1 and the second 0.72.1.
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 · 2023-07-03T15:00:27Z

Steps to reproduce the bug:

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

selimbaruti · 2023-07-03T15:12:08Z

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 · 2023-07-04T09:26:02Z

@cortinico Did you test it?

cortinico · 2023-07-04T10:16:54Z

@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 · 2023-07-12T07:35:22Z

same issue

ruvkr · 2023-07-12T11:41:51Z

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

LuisChavezz · 2023-07-18T13:57:37Z

Same issue here with 0.72.3

@selimbaruti Did you solve it?

selimbaruti · 2023-07-18T19:10:44Z

Same issue here with 0.72.3

@selimbaruti Did you solve it?

I haven't found any solution for it

timothyerwin · 2023-07-21T17:09:07Z

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 · 2023-07-24T15:01:02Z

same issue here, please do something

mlalitthapa · 2023-07-25T06:12:10Z

Same issue here.

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

LudoFont · 2023-07-25T09:22:29Z

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 · 2023-07-25T09:42:10Z

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 · 2023-07-28T13:58:27Z

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 · 2023-07-29T11:48:34Z

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 · 2023-07-31T07:36:08Z

Я обновляю старый проект с 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 · 2023-07-31T08:59:26Z

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 · 2023-07-31T13:23:30Z

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 · 2023-07-31T13:56:59Z

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?

…inside a KeyboardAvoidingView (#38728) Summary: Starting from RN 0.72.0, when we nest a ScrollView inside a KeyboardAvoidingView, the ScrollView doesn't respond properly to the Keyboard on Android. https://github.com/facebook/react-native/assets/32062066/a62b5a42-6817-4093-91a2-7cc9e4a315bb This issue is due to a change made in #36104, which was added to fix #32235. That commit changed this line of code to abort the Scroller animation if a new call to the `scrollTo` method was made: https://github.com/facebook/react-native/blob/aab52859a447a8257b106fe307008af218322e3d/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java#L1073 Apparently, this is the same method that scrolls the ScrollView in response to the Keyboard opening on Android. So, here comes my proposal for a fix that doesn't break #36104 and fixes #38152. When we open the Keyboard, the call stack is as follows: - InputMethodManager - AndroidIME - InsetsController - `ReactScrollView.scrollTo` gets called When we use the ScrollView method `scrollTo` directly from the UI, the call stack is different as it goes through: - ReactScrollViewCommandHelper - ReactScrollViewManager - `ReactScrollView.scrollTo` gets called We can move `mScroller.abortAnimation();` from `ReactScrollView.scrollTo` to the `ReactScrollViewManager.scrollTo` method so that it gets called only when we call `scrollTo` from the UI and not when the `scrollTo` method is called by other sources. https://github.com/facebook/react-native/assets/32062066/9c10ded3-08e5-48e0-9a85-0987d62de011 ## Changelog: [ANDROID] [FIXED] - Fixed ScrollView not responding to Keyboard events when nested inside a KeyboardAvoidingView Pull Request resolved: #38728 Test Plan: You can see the issue and the proposed fixes in this repo: [kav-test-android](https://github.com/andreacassani/kav-test-android). Please refer to the `kav_test_fix` folder and to the [readme](https://github.com/andreacassani/kav-test-android/blob/main/README.md). Reviewed By: NickGerleman Differential Revision: D47972445 Pulled By: ryancat fbshipit-source-id: e58758d4b3d5318b947b42a88a56ad6ae69a539c

efstathiosntonas · 2023-08-14T10:02:18Z

fixed on 0.72.4

v-x2 · 2023-08-15T21:09:24Z

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

karamjb · 2023-08-18T12:28:50Z

@efstathiosntonas the issue is not fixed, still not working

…inside a KeyboardAvoidingView (facebook#38728) Summary: Starting from RN 0.72.0, when we nest a ScrollView inside a KeyboardAvoidingView, the ScrollView doesn't respond properly to the Keyboard on Android. https://github.com/facebook/react-native/assets/32062066/a62b5a42-6817-4093-91a2-7cc9e4a315bb This issue is due to a change made in facebook#36104, which was added to fix facebook#32235. That commit changed this line of code to abort the Scroller animation if a new call to the `scrollTo` method was made: https://github.com/facebook/react-native/blob/aab52859a447a8257b106fe307008af218322e3d/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java#L1073 Apparently, this is the same method that scrolls the ScrollView in response to the Keyboard opening on Android. So, here comes my proposal for a fix that doesn't break facebook#36104 and fixes facebook#38152. When we open the Keyboard, the call stack is as follows: - InputMethodManager - AndroidIME - InsetsController - `ReactScrollView.scrollTo` gets called When we use the ScrollView method `scrollTo` directly from the UI, the call stack is different as it goes through: - ReactScrollViewCommandHelper - ReactScrollViewManager - `ReactScrollView.scrollTo` gets called We can move `mScroller.abortAnimation();` from `ReactScrollView.scrollTo` to the `ReactScrollViewManager.scrollTo` method so that it gets called only when we call `scrollTo` from the UI and not when the `scrollTo` method is called by other sources. https://github.com/facebook/react-native/assets/32062066/9c10ded3-08e5-48e0-9a85-0987d62de011 ## Changelog: [ANDROID] [FIXED] - Fixed ScrollView not responding to Keyboard events when nested inside a KeyboardAvoidingView Pull Request resolved: facebook#38728 Test Plan: You can see the issue and the proposed fixes in this repo: [kav-test-android](https://github.com/andreacassani/kav-test-android). Please refer to the `kav_test_fix` folder and to the [readme](https://github.com/andreacassani/kav-test-android/blob/main/README.md). Reviewed By: NickGerleman Differential Revision: D47972445 Pulled By: ryancat fbshipit-source-id: e58758d4b3d5318b947b42a88a56ad6ae69a539c

artsnr1 · 2023-09-12T08:48:22Z

Any update? When it will be fixed?

kdsanman · 2024-01-18T14:56:55Z

Still seeing this issue.

yaela251 · 2024-02-05T10:44:58Z

Still not working as expected in Android

actaruss · 2024-03-09T23:21:28Z

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

bonnmh · 2024-07-22T16:05:03Z

I faced the same situation when upgrading project from version 0.68 -> 0.72.4

DwaveVito · 2024-12-05T03:55:38Z

https://github.com/wix-incubator/react-native-keyboard-aware-scrollview

I used this solution and successfully replaced it.

selimbaruti added the Needs: Triage 🔍 label Jul 2, 2023

github-actions bot added the Platform: Android Android applications. label Jul 2, 2023

cortinico added the Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. label Jul 3, 2023

github-actions bot added Needs: Author Feedback Needs: Attention Issues where the author has responded to feedback. and removed Needs: Triage 🔍 Needs: Author Feedback labels Jul 3, 2023

cortinico added Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. and removed Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. labels Jul 4, 2023

lunaleaps added Impact: Regression Describes a behavior that used to work on a prior release, but stopped working recently. 0.72 labels Jul 18, 2023

andreacassani mentioned this issue Aug 1, 2023

Fix Android ScrollView not responding to Keyboard events when nested inside a KeyboardAvoidingView #38728

Closed

facebook-github-bot closed this as completed in c616148 Aug 2, 2023

keith-kurak mentioned this issue Aug 18, 2023

Android no longer scrolls to input on initial focus expo/expo#23564

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Android] KeybordAvoidingView not working on react-native 0.72.1 #38152

[Android] KeybordAvoidingView not working on react-native 0.72.1 #38152

selimbaruti commented Jul 2, 2023 •

edited

Loading

github-actions bot commented Jul 3, 2023

selimbaruti commented Jul 3, 2023

cortinico commented Jul 3, 2023

selimbaruti commented Jul 3, 2023

selimbaruti commented Jul 4, 2023

cortinico commented Jul 4, 2023

WooMinGy commented Jul 12, 2023

ruvkr commented Jul 12, 2023

LuisChavezz commented Jul 18, 2023 •

edited

Loading

selimbaruti commented Jul 18, 2023

timothyerwin commented Jul 21, 2023 •

edited

Loading

LudoFont commented Jul 24, 2023

mlalitthapa commented Jul 25, 2023

LudoFont commented Jul 25, 2023

selimbaruti commented Jul 25, 2023 •

edited

Loading

Serg-Kim commented Jul 28, 2023 •

edited

Loading

andreacassani commented Jul 29, 2023

Serg-Kim commented Jul 31, 2023

andreacassani commented Jul 31, 2023

andreacassani commented Jul 31, 2023 •

edited

Loading

selimbaruti commented Jul 31, 2023 •

edited

Loading

efstathiosntonas commented Aug 14, 2023

v-x2 commented Aug 15, 2023

karamjb commented Aug 18, 2023

artsnr1 commented Sep 12, 2023

kdsanman commented Jan 18, 2024

yaela251 commented Feb 5, 2024

actaruss commented Mar 9, 2024 •

edited

Loading

bonnmh commented Jul 22, 2024

DwaveVito commented Dec 5, 2024

[Android] KeybordAvoidingView not working on react-native 0.72.1 #38152

[Android] KeybordAvoidingView not working on react-native 0.72.1 #38152

Comments

selimbaruti commented Jul 2, 2023 • edited Loading

Description

React Native Version

Output of npx react-native info

Steps to reproduce

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

Version 0.72.1

Version 0.71.1

github-actions bot commented Jul 3, 2023

selimbaruti commented Jul 3, 2023

cortinico commented Jul 3, 2023

selimbaruti commented Jul 3, 2023

selimbaruti commented Jul 4, 2023

cortinico commented Jul 4, 2023

WooMinGy commented Jul 12, 2023

ruvkr commented Jul 12, 2023

LuisChavezz commented Jul 18, 2023 • edited Loading

selimbaruti commented Jul 18, 2023

timothyerwin commented Jul 21, 2023 • edited Loading

LudoFont commented Jul 24, 2023

mlalitthapa commented Jul 25, 2023

LudoFont commented Jul 25, 2023

selimbaruti commented Jul 25, 2023 • edited Loading

Serg-Kim commented Jul 28, 2023 • edited Loading

andreacassani commented Jul 29, 2023

Serg-Kim commented Jul 31, 2023

andreacassani commented Jul 31, 2023

andreacassani commented Jul 31, 2023 • edited Loading

selimbaruti commented Jul 31, 2023 • edited Loading

efstathiosntonas commented Aug 14, 2023

v-x2 commented Aug 15, 2023

karamjb commented Aug 18, 2023

artsnr1 commented Sep 12, 2023

kdsanman commented Jan 18, 2024

yaela251 commented Feb 5, 2024

actaruss commented Mar 9, 2024 • edited Loading

bonnmh commented Jul 22, 2024

DwaveVito commented Dec 5, 2024

selimbaruti commented Jul 2, 2023 •

edited

Loading

Output of `npx react-native info`

LuisChavezz commented Jul 18, 2023 •

edited

Loading

timothyerwin commented Jul 21, 2023 •

edited

Loading

selimbaruti commented Jul 25, 2023 •

edited

Loading

Serg-Kim commented Jul 28, 2023 •

edited

Loading

andreacassani commented Jul 31, 2023 •

edited

Loading

selimbaruti commented Jul 31, 2023 •

edited

Loading

actaruss commented Mar 9, 2024 •

edited

Loading