KeyboardAvoidingView doesn't work on Android

[gkassym]

KeyboardAvoidingView doesn't work on Android

I installed the react-native-keyboard-controller library and ran pod install. I wrapped the root component with KeyboardProvider, and everything works as expected on iOS. However, on Android, it doesn't work at all. I also tried using KeyboardAwareScrollView, but encountered the same issue—it doesn't work. Then, I attempted to use KeyboardEvents, but the listener callback doesn't trigger when the keyboard opens or closes. As mentioned, iOS works perfectly. I performed a clean build, cleared the Android/app build, cleaned the Gradle files, and removed node_modules, but none of these steps resolved the problem.

I believe the native code wasn't installed correctly. Any ideas?

Code snippet

export function MessagingScreen(): JSX.Element {
  useEffect(() => {
    const show = KeyboardEvents.addListener('keyboardWillShow', (e) => {
      console.log('keyboardWillShow---------------', e); // <- doesn't trigger
    });

    return () => {
      show.remove();
    };
  }, []);

  return (
    <KeyboardAvoidingView
      contentContainerStyle={styles.container}
      style={styles.content}
      behavior="padding"
      keyboardVerticalOffset={400}>
      <View style={styles.inner}>
        <Text style={styles.heading}>Header</Text>
        <View>
          <TextInput placeholder="Username" style={styles.textInput} />
          <TextInput placeholder="Password" style={styles.textInput} />
        </View>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.text}>Submit</Text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  );
}

Screenshots

Screen.Recording.2024-10-22.at.10.51.59.mov

Smartphone (please complete the following information):

RN version: 0.75.3
RN architecture: Old
JS engine: Hermes
Library version: 1.14.2
React-native-reanimated: 3.16.1

Additional context
Add any other context about the problem here.

[kirillzyusko]

@gkassym do you use react-native-screens/native-stack by any chance? If yes, then which version of react-native-screens are you using (which version is specified in .lock file)? Do you use navigationBar* properties from native-stack by any chance?

[gkassym]

Yes, i use:

• react-native-screens: "^3.34.0"
• @react-navigation/native: "^6.1.4"
• @react-navigation/native-stack: "^6.9.10"
• @react-navigation/stack: "^6.3.16"
• pnpm: "9.10.0"
• node: "v18.20.2"

Also i noticed this warning:
Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0.
Could this have any impact?

[kirillzyusko]

Also i noticed this warning:
Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0.
Could this have any impact?

I don't think so 🙂

Can you try to apply a patch from software-mansion/react-native-screens#2301 and re-build the project? It may solve the problem 🙂

[gkassym]

I applied the patch you recommended. It works. 👍

[gkassym]

But in the Android app there is a weird line at the top. If I do KeyboardProvider enabled={false} it disappears. What is it?

[kirillzyusko]

But in the Android app there is a weird line at the top. If I do KeyboardProvider enabled={false} it disappears. What is it?

@gkassym did you try to add statusBarTranslucent property to KeyboardProvider? Does it solve the problem?

[gkassym]

Nice 🔥 statusBarTranslucent works.

Another thing I noticed is that the keyboard opens first in Android and then it moves the text input. Have you seen anything like this?

Screen.Recording.2024-10-23.at.16.01.15.mov

[kirillzyusko]

Yes @gkassym

It happens if you animate height/padding or any other non-UI props on Android. If you want to have a perfect animation synchronization then you can use https://github.com/kirillzyusko/react-native-keyboard-controller/blob/main/example/src/screens/Examples/ReanimatedChat/index.tsx as a reference - in this example I'm animating translateY and it works frame-in-frame 👀

I believe I answered on your questions and the conversation goes into a different direction - can I close this issue?
If you encounter any other problem don't hesitate to open a new issue - I will be happy to help and guide you 😊

[gkassym]

Sure, thanks. Happy Coding!!!

[kirillzyusko]

@gkassym I added new behavior="translate-with-padding" for KeyboardAvoidingView (see #830) - it should resolve your issue mentioned in #650 (comment) 👀

New mode is available in 1.16.5 🚀

[gkassym]

Hi @kirillzyusko, wow, nice. I will check. Thanks 🔥