Android keyboard avoiding not working when using <Stack.Screen> with headerShown = true

Question

I'm using the latest RN version + expo development build.

I have noticed an issue on Android that only happens when I'm using the Stack.Screen headers.

Here's an example snippet -

<>
  <Stack.Screen
    options={{
      headerShown: true,
      title: "Create Announcement",
    }}
  />
  {Platform.OS === "android" && (
    <KeyboardAvoidingView behavior={"padding"} style={{ flex: 1 }}>
      <ScrollView className="flex-1" contentContainerStyle={{ flex: 1 }}>
        <View className="border border-border m-2 flex-1 rounded-lg">
          <Textarea
            autoFocus
            multiline
            scrollEnabled
            style={{
              flex: 1,
              padding: 16,
              textAlignVertical: "top",
            }}
            className="border-0 rounded-none shadow-none"
            placeholder="Type here..."
          />
        </View>
        <View style={{ height: 100, backgroundColor: "red" }} />
      </ScrollView>
    </KeyboardAvoidingView>
  )}
</>

This results in the following -

How can I get the Red bar to fully show up above the keyboard always?

I tried so many things, like wrapping it inside SafeAreaView but to no avail.

What am I doing wrong?

@ikp check this package kirillzyusko.github.io/react-native-keyboard-controller/docs/… it might help. — Jatin Bhuva
– Jatin Bhuva, Commented Nov 17 at 5:18
Thanks. I tried that and it didn't solve the problem. I think the core issue is with using out of the box headers that come with expo-router. I ended up swapping those out for custom headers, and now it works perfectly. Plus, I'm able to do some of the interactions I desired for the headers (bonus!) I'd love to dive deeper into this issue, but I don't have the time. Cheers! — lkp
– lkp, Commented Nov 18 at 4:23

Ammar El-Sayed · Accepted Answer · 2025-11-19 14:18:09Z

-1

use keyboardVerticalOffset={100} as a prop in KeyboardAvoidingView

answered Nov 19 at 14:18

Ammar El-Sayed

11 bronze badge

New contributor

Sign up to request clarification or add additional context in comments.

2 Comments

Community 2 days ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

lkp 2 days ago

That's not going to solve the issue, every device is different... you should never hard code that value.

Collectives™ on Stack Overflow

Android keyboard avoiding not working when using <Stack.Screen> with headerShown = true

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related