CODEWITHSUNDEEP
reactjsreact-native
Md. Al Amin
Md. Al Amin

Reputation: 21

React-Native SafeAreaView causes weird gap on screen (Ios)

See this screen-short` "react-native": "0.67.4", "react-native-safe-area-context": "^4.2.2",

i have facing weird issue on ios. whenever i first visit this screen, i get blank screen on bottom. but navigate another screen, its disappear by it self. `

https://reactnavigation.org/docs/handling-safe-area/#use-the-edges-prop-to-customize-the-safe-area

i have already seen their react-navigation documentation.

Upvotes: 1

Views: 1625

Answers (1)

MMuzyk
MMuzyk

Reputation: 21

I was facing the same exact issue. What helped me was using the useSafeAreaInsets from react-native-safe-area-context together with ordinary <View/> instead of <SafeAreaView/>

    const insets = useSafeAreaInsets();
    
    return (
        <View
          style={{
              paddingTop: insets.top,
              paddingLeft: insets.left,
              paddingRight: insets.right,
            }}
        >
          {...}
        </View>
    )

Upvotes: 2

Related Questions