KeyboardAvoidingView not working after migrating from Expo SDK 52 to SDK 53

[webwhizwand]

Discussion Type

Question

Discussion Content

After upgrading my project from Expo SDK 52 to SDK 53, KeyboardAvoidingView no longer behaves as expected.
Has anyone else experienced this issue after the migration?
How did you solve it? Any guidance or workarounds would be appreciated.

[Varunkumar2516]

Hi! 👋
Yes, this seems to be a common issue after upgrading to SDK 53. A few things that might help:

1. Make sure you’re using behavior="padding" or behavior="position" properly, depending on your layout.

2. Wrap your main view in a KeyboardAvoidingView and test with a ScrollView inside it — that often helps on both iOS and Android.

3. Check if your keyboard is overlapping content — SDK 53 may have changed some layout behavior.

4. Also, try updating all dependencies (like react-native-safe-area-context, etc.) to the latest versions after the upgrade.

If that doesn’t help, could you share a small code snippet? I’d be happy to take a look.

[JoelDeonDsouza]

This is due to Expo SDK 53 enabling edge-to-edge display by default, which changes how safe areas and system insets (status bar, navigation bar, keyboard) are handled.
Solution might be to wrap your view in SafeAreaProvider and use useSafeAreaInsets
https://expo.dev/blog/edge-to-edge-display-now-streamlined-for-android
`
import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
import { KeyboardAvoidingView, Platform, View } from 'react-native';

function MyScreen() {
const insets = useSafeAreaInsets();

return (
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={{ flex: 1 }}
>
<View style={{
flex: 1,
paddingBottom: insets.bottom,
paddingTop: insets.top
}}>
{/* Your content here */}


);
}
And in your app.json or app.config.js add this
"android": {
"softwareKeyboardLayoutMode": "resize"
}
`
This adjustment ensures proper handling of system insets and should fix the KeyboardAvoidingView behavior.

[FidFenix]

I upgraded from SDK 53 to SDK 54 and I had to fix like this and it is working.

<KeyboardAvoidingView
        behavior={Platform.OS === "ios" ? "padding" : 'height'}
        keyboardVerticalOffset={160 + 47}
>
              <SafeAreaView style={{  flex:1 }} edges={[]}>
                    <ScrollView>
                          <CustomComp/>
                     </ScrollView>
              </SafeAreaView>
</KeyboardAvoidingView>

[MrCordeiro]

Given how each Android device is unique, I wouldn't go around hardcoding values on keyboardVerticalOffset...

[cbdeveloper]

Yeah, expo 54 seems to have broken my Android behavior as well.

On Expo 53 I was fine even without using KeyboardAvoigingView as I believe Android was handling the resize automatically. Something related to softwareKeyboardLayoutMode: 'resize' on app.config. But on Expo 54, it has stopped working, and I had to add KeyboardAvoidingviews but they seemed also very buggy. Had do through some workarounds. And it also looks much uglier, as you can see the compensated padding on the UI while the keyboard is being hidden.

[ciccilleju]

i'm having big issues on Android.
if i use expo go everything works fine, if i do a release build. the behavior changes and doesn't work.

[JoelDeonDsouza]

I would suggest that if your app runs smoothly in local development (Expo Go) but behaves differently or breaks in production, try the following steps to debug and isolate the issue:

Use a proper EAS build to replicate the production environment:

eas build -p android

Debug with a Preview Build

Preview builds behave like production but still allow easier debugging:

eas build --profile preview --platform android
eas update --branch preview

Add Error Tracking

Integrate Sentry to capture runtime errors and crashes that only occur in release mode.
It’s very useful for identifying issues that don’t appear during development.