Update react-native-keyboard-aware-scroll-view for Android 15 Compatibility

[zeeshan724]

In Android 15, react-native-keyboard-aware-scroll-view does not work well — the bottom content is not visible when the keyboard opens.

[tkud04]

Also, edge-to-edge support for Android... thank you guys!

[Chandansharma1512]

@zeeshan724 Did you get any solution for this??

[JessieLau-CT]

Were you able to resolve the issue? I'm encountering the same problem. @zeeshan724 @tkud04 @Chandansharma1512

[Chandansharma1512]

I have updated MainActivity.Kt after this it's working for me.

package com.abc

import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
import com.facebook.react.defaults.DefaultReactActivityDelegate
import android.os.Build
import android.os.Bundle
import android.view.View
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat

class MainActivity : ReactActivity() {

/**

• Returns the name of the main component registered from JavaScript. This is used to schedule
• rendering of the component.
  */
  override fun getMainComponentName(): String = "abc"

/**

• Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
• which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
  */
  override fun createReactActivityDelegate(): ReactActivityDelegate =
  DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(null)

if (Build.VERSION.SDK_INT >= 35) {
    val rootView = findViewById<View>(android.R.id.content)
    ViewCompat.setOnApplyWindowInsetsListener(rootView) { _, insets ->
      val innerPadding = insets.getInsets(WindowInsetsCompat.Type.ime())
      rootView.setPadding(
        innerPadding.left,
        innerPadding.top,
        innerPadding.right,
        innerPadding.bottom
      )
      insets
  }
}

}
}

[bhavesh-trentium]

@zeeshan724 Did you get any solution for this??

[bhavesh-trentium]

import React from 'react';
import {
  Platform,
  StyleSheet,
} from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

const KeyboardAvoidingWrapper = ({ children }: { children: React.ReactNode }) => {
  return (
    <KeyboardAwareScrollView
      style={styles.container}
      contentContainerStyle={styles.contentContainer}
      showsVerticalScrollIndicator={false}
      showsHorizontalScrollIndicator={false}
      keyboardShouldPersistTaps="handled"
      enableOnAndroid={true}
      extraScrollHeight={Platform.OS === 'android' ? 150 : 80}
      enableAutomaticScroll={true}
      enableResetScrollToCoords={Platform.OS === 'ios'}
      keyboardOpeningTime={Platform.OS === 'ios' ? 250 : 0}
    >
      {children}
    </KeyboardAwareScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  contentContainer: {
    flexGrow: 1,
    padding: 16,
  },
});

export default KeyboardAvoidingWrapper;

I fix this with thier common KeyboardAvoidingWrapper with follwing parameters:

enableOnAndroid={true}
extraScrollHeight={Platform.OS === 'android' ? 150 : 80}
enableAutomaticScroll={true}
enableResetScrollToCoords={Platform.OS === 'ios'}
keyboardOpeningTime={Platform.OS === 'ios' ? 250 : 0} 

It's working on mine app 🥳

[kirillzyusko]

You can use KeyboardAwareScrollView from react-native-keyboard-controller package.

It's not only compatible with Android 15, edge-to-edge and other modern/future-proof techniques, but it also utilizes all the power of new APIs and delivers better animations performance, handles more edge cases (such as auto-growing text-inputs, text-selection) and much more.

You can see full list of feature comparison here

[2ducanhpham]

On MainActivity.java

@Override
  protected void onCreate(Bundle savedInstanceState) {
super.onCreate(null);
...

// Insert here
    if (Build.VERSION.SDK_INT >= 35) {
      View rootView = findViewById(android.R.id.content);
      ViewCompat.setOnApplyWindowInsetsListener(rootView, (v, insets) -> {
        androidx.core.graphics.Insets innerPadding = insets.getInsets(WindowInsetsCompat.Type.ime());
        rootView.setPadding(
          innerPadding.left,
          innerPadding.top,
          innerPadding.right,
          innerPadding.bottom
        );
        return insets;
      });
    }

It's working

[taylorkline]

A note that disabling Edge to Edge, i.e. by adding <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item> to your AppTheme in styles.xml, as recommended in AppAndFlow/react-native-safe-area-context#634 to solve a different issue about content appearing below device notches, also appears to allow this library to continue working.