[Android] [0.71.1] KeyboardAvoidingView does not work with behavior height and windowSoftInputMode adjustResize

[idrissakhi]

Description

The KeyboardAvoidingView does not work anymore in new versions when we set behavior to height, the screen does not resize and inputs at the bottom of the screen are not shown anymore.

I had the issue on Redmi 9 Android 10

Version

0.71.1

Output of npx react-native info

System:
OS: macOS 13.2
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 38.02 MB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.11.3 - /Users/isakhi/.rvm/gems/ruby-2.7.4/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK:
Android NDK: 22.1.7171670
IDEs:
Android Studio: 2022.1 AI-221.6008.13.2211.9477386
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 11.0.11 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.1 => 0.71.1
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

• wrap chat screen inside KeyboardAvoidingView
• set behavior to height
• set windowSoftInputMode to adjustResize
• focus the input

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

export const ChatWrapper = ({
  children,
  testID,
  displayInput,
  inputComponent,
  withBackground,
}: PropsWithChildren<Props>): ReactElement => {
  const { visible: keyboardIsVisible, dismiss } = useKeyboardContext();
  const [displayAccessoryViewIos, setDisplayAccessoryViewIos] = useState(false);

  // This is a workaround to solve issue of KeyboardAvoidingView when app changes state.
  // opened issue on github: https://github.com/facebook/react-native/issues/33473
  useEffect(() => {
    let subscription: NativeEventSubscription;
    if (isAndroid) {
      subscription = AppState.addEventListener('change', async (nextAppState) => {
        if (nextAppState === 'background' && keyboardIsVisible) {
          dismiss();
        }
      });
    }

    return () => {
      subscription?.remove();
    };
  }, [dismiss, keyboardIsVisible]);

  // this is a workaround to resolve the issue brought by react-native 0.70.2.
  useEffect(() => {
    if (isIOS) {
      if (displayInput) {
        setTimeout(() => setDisplayAccessoryViewIos(displayInput), 100);
      } else {
        setDisplayAccessoryViewIos(false);
      }
    }
  }, [displayInput]);

  const displayAccessory = isAndroid ? displayInput : displayAccessoryViewIos;

  return (
    <Wrapper
      testID={`backgroundWrapper${testID}`}
      {...(withBackground && { backgroundImage: require('assets/images/conversation-background/background.png') })}
    >
      <StatusBar barStyle="dark-content" backgroundColor="transparent" translucent />
      <KeyboardAvoidingView
        testID={`keyboardAvoidView${testID}`}
        style={sharedStyles.fullFlex}
        behavior={'height'}
        enabled={isAndroid}
      >
        {children}
        {displayAccessory && inputComponent}
      </KeyboardAvoidingView>
    </Wrapper>
  );
};

[bigcupcoffee]

Coming from reactwg/react-native-releases#53 (comment) - if you want to make sure if it's fixed by 32f5487 (which fixes #35894 that is presumably Android <= 9 issue) provide some more specifics about what android version did you test it on, have you tried other versions? And since your title claims does not work with behavior height and windowSoftInputMode adjustResize, assuming different behavior/softInputMode works? Your repro is not quite minimal to quickly try it on my own as you just tore it off your project.
You could as well try to go to my original issue and run the simple repro there to see if keyboard events are even firing to begin with.

[idrissakhi]

@bigcupcoffee the issue is reproducible on Android 10 on RedMi phones (Chinese phone maybe)

[bigcupcoffee]

So I went back to #35894 and tried it to Android 10, yep the issue is there. 32f5487 uses WindowInsetsCompat on Android 11+ only. So I believe it's safe to say this is a duplicate of #35894 and is fixed by 32f5487.

[idrissakhi]

@bigcupcoffee thank you for testing, i will close the issue when new version available. i heard that it will be released this week.

[NickGerleman]

0.71.2 should now be out.