SafeAreaView not working

[Dr1992]

Issue Description

I am trying to put SlidingUpPanel inside SafeAreaView but is not working. SlidingUpPanel looks like without SafeAreaView in bootom screen and it is not cool on iPhone X

Steps to Reproduce / Code Snippets / Screenshots

---

Environment

• Version: FILL THIS OUT
• React Native version:0.59.5
• React Native CLI: 2.0.1
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator iPhone X

[octopitus]

Are you using the built-in SafeAreaView?

[octopitus]

If you are using the built-in one, consider switching to community's SafeAreaView. Works as expected.

[Dr1992]

Yeah Thanks. It worked fine but anyway it should be able to work with import { SafeAreaView } from 'react-navigation'

[jamesholcomb]

Did you try setting the backdropStyle.top to a negative offset to account for your header and statusbar?

[joelrorseth]

I just found your issue while trying to debug my own problems with SafeAreaView. I couldn't seem to calculate the correct draggableRange, to allow my header to stay within the top and bottom safe areas. After a lot of trial and error, I found that the following worked. Hopefully this helps somebody else:

import { getInset } from 'react-native-safe-area-view';
const { width, height } = Dimensions.get('window');
const landScape = width > height;
const topPadding = getInset('top', landScape);
const bottomPadding = getInset('bottom', landScape);

<SlidingUpPanel
    draggableRange={{
        top: height - topPadding - bottomPadding,
        bottom: PANEL_HEADER_HEIGHT,
    }}
    height={height - topPadding}
/>

This manages to keep my header (in purple) within the safe area. Seems to work with the community and built in versions of SafeAreaView. The height is set so that the fully dragged up view aligns its bottom with the bottom of screen.