Top padding safeAreaView inside Stack presentation modal

th3rdwave / react-native-safe-area-context

A flexible way to handle safe area insets in JS. Also works on Android and Web!

MIT License

2.14k stars 197 forks source link

Open andredewaard opened 3 months ago

andredewaard commented 3 months ago

When using the inside an Stack presentationModal like

layout

<Stack.Screen
        name="[id]"
        options={{ headerShown: false, presentation: 'modal' }}
      ></Stack.Screen>

and inside [id].tsx

    <SafeAreaView style={{ flex: 1 }}>
      <ScrollView contentContainerClassName="flex-1">

the top padding on an iPhone 15 pro max is huge. the useSafeAreaInsets returns 59px.

While on android it doesnt add anything, Note that on Android it doesn't open in a modal but it doesnt apply enough padding.

jacobp100 commented 3 months ago

You need a SafeAreaProvider within each screen stack