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