KeyboardAvoidingView leaves a big gap at the botom

[deva-Irfan]

Description

After closing the keyboard , I notice a dark gap at the bottom of screens through out the app, this happened after I used KeyboardAvoidingView in roolayout.

I am using the following versions of expo and rn:
"expo": "53.0.19",
"react-native": "0.79.5",

`export default function RootLayout() {
return (
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={{ flex: 1 }}
>


<Stack
screenOptions={{
headerShown: false,
animation: "slide_from_right",
headerShadowVisible: false,
navigationBarHidden: true,
}}
>
<Stack.Screen
name="(drawer)"
options={{ title: "Home", headerShown: false }}
/>
<Stack.Screen
name="(auth)"
options={{ title: "Authentication", headerShown: false }}
/>
<Stack.Screen
name="profile"
options={{ title: "Back", headerShown: true }}
/>

const Profile = () => {
const handleLogout = async () => {
try {
await AsyncStorage.clear();
router.replace("/(auth)");
} catch (error) {
console.log("can not logout ", error);
}
};
return (
<ScrollView
showsVerticalScrollIndicator={false}
keyboardDismissMode="none"
style={{ flex: 1, backgroundColor: "#fff" }}
contentContainerStyle={{
padding: SCREEN_PADDING * 2,
// flexGrow: 1,
paddingTop: 0,
backgroundColor: "#fff",
}}
>

<View style={{ flex: 1, alignItems: "center" }}>
<Button
mode="text"
labelStyle={{
color: "#306CFE",
fontWeight: "600",
fontSize: 16,
textAlign: "right",
}}
onPress={() => {}}
style={{ marginVertical: 20, alignSelf: "flex-end" }}
>
Save Changes

    <View style={styles.profileContainer}>
      <Image
        resizeMode="contain"
        source={require("../assets/images/png/user.png")}
        style={{
          width: 110,
          height: 110,
        }}
      />
    </View>
    <View style={styles.formContainer}>
      <ProfileFormInputItem label="Name" value="John Doe" />
      <ProfileFormInputItem label="Phone" value="1234567890" />
      <ProfileFormInputItem label="Email" value="johndoe@gmail.com" />
    </View>
    <MyProfileActionButton
      label="Change Image"
      icon="image-outline"
      color="#0A0A0A"
      onPress={() => {}}
    />
    <MyProfileActionButton
      label="Reset Password"
      icon="refresh"
      color="#0A0A0A"
      onPress={() => {}}
    />
    <MyProfileActionButton
      label="Logout"
      icon="logout"
      color="#D2042D"
      onPress={handleLogout}
    />
  </View>
  {/* </View> */}
</ScrollView>

);
};

export default Profile;

const styles = StyleSheet.create({
profileContainer: {
borderRadius: 999,
padding: 16,
overflow: "hidden",
backgroundColor: "#0D66D00A",
justifyContent: "center",
alignItems: "center",
},
formContainer: {
gap: 20,
width: "100%",
backgroundColor: "#0D66D00A",
borderRadius: 14,
marginTop: 20,
padding: 16,
marginBottom: 16,
},
});`

Steps to reproduce

Launch the keyboard then close it

React Native Version

0.79.5

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

n/a

Stacktrace or Logs

n/a

MANDATORY Reproducer

n/a

Screenshots and Videos

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Reproducers are mandatory and we can accept only one of those as a valid reproducer:

• For majority of bugs: send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.
• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template

You can read more about about it on our website: How to report a bug.

[devanshsaini11]

@deva-Irfan Kindly add a minimum viable reproducer using Reproducer Template so it can be validated quickly

[szymonWCa]

Same issue

[MarcusPOliveira]

Same issue here, but only on iOS.
Any solution?