Skip to content

Conversation

@volo-droid
Copy link

@volo-droid volo-droid commented Oct 31, 2025

Summary

This change fixes the following issue for apps targeting SDK 35+
facebook/react-native#49759

Technical details:

Before targeting SDK 35, using android:windowSoftInputMode=”adjustResize” was all you needed to maintain focus on — for example — an EditText in a RecyclerView when opening an IME. With “adjustResize”, the framework treated the IME as the system window, and the window’s root views were padded so content avoids the system window.

After targeting SDK 35, you must also account for the IME using ViewCompat.setOnApplyWindowInsetsListener and WindowInsetsCompat.Type.ime() because the framework will not pad the window’s root views.

source: https://medium.com/androiddevelopers/insets-handling-tips-for-android-15s-edge-to-edge-enforcement-872774e8839b

Test Plan

Reproducible project can be found here:
https://github.com/dprevost-LMI/rn81/tree/issue-497590-KeyboardAvoidingView-hide-input-under-SDK35

Adjust SafeAreaView style by removing height and changing paddingBottom to 32.

Without the fix TextInput is hidden whenever a soft keyboard is shown on SDK 35+, after the fix TextInput is correctly placed on top of the keyboard.

Keyboard hidden Current behavior Fix applied

"After targeting SDK 35, you must also account for the IME using
ViewCompat.setOnApplyWindowInsetsListener and WindowInsetsCompat.Type.ime()
because the framework will not pad the window’s root views."

Source: https://medium.com/androiddevelopers/insets-handling-tips-for-android-15s-edge-to-edge-enforcement-872774e8839b
@volo-droid
Copy link
Author

Reproducible screen (taken from
https://github.com/dprevost-LMI/rn81/tree/issue-497590-KeyboardAvoidingView-hide-input-under-SDK35 with adjustments to SafeAreaView bottom padding and height)

import { NewAppScreen } from '@react-native/new-app-screen';
import { KeyboardAvoidingView, StatusBar, StyleSheet, TextInput, useColorScheme, View } from 'react-native';
import {
  SafeAreaProvider,
  SafeAreaView,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';

function App() {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <SafeAreaProvider>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <AppContent />
      <SafeAreaView style={{ backgroundColor: isDarkMode ? '#000' : '#fff', paddingBottom:32 }} edges={['bottom']}>
        <KeyboardAvoidingView behavior={'height'} >
          <TextInput style={styles.textInput}/>
        </KeyboardAvoidingView>
      </SafeAreaView>            
    </SafeAreaProvider>
  );
}

function AppContent() {
  const safeAreaInsets = useSafeAreaInsets();

  return (
    <View style={styles.container}>
      <NewAppScreen
        templateFileName="App.tsx"
        safeAreaInsets={safeAreaInsets}
      />

    </View>
  );
}



const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  textInput: {
    flex: 1,
    marginHorizontal: 8 * 1.3,
    textAlignVertical: 'center',
    borderRadius: 21,
    backgroundColor: 'white',
    paddingHorizontal:  8 * 2,
    paddingVertical: 8,
    paddingTop: 8,
    minHeight: 8 * 5,
  },
});

export default App;

@sookcha
Copy link

sookcha commented Oct 31, 2025

FYI: I've submitted a similar PR long ago, which was rejected. See discussions below:
#623

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants