SafeAreaView doesn't work with this library

[alisherakb]

Hi,

I'm using SafeAreaView from react-navigation and when I'm trying to add custom transition using this library the SafeAreaView is not taking into account on iOS devices.

Please help.

[plmok61]

@alisherakb Can you please be a little more specific about what is exactly not working? Adding a screenshot would be helpful.

[alisherakb]

@plmok61
Here is my code:

import { SafeAreaView } from 'react-navigation';

<SafeAreaView style={{ flex: 1 }}>
   <View />
</SafeAreaView>

SafeAreaView sets automatic margins to container in order to properly show content on all devices.

But when I'm using this library, this component doesn't work and thus margins is not set.
Here is the pics:

[plmok61]

@alisherakb I believe this might be an issue with react-navigation itself. Is this the same issue?
react-navigation/react-navigation#3055

If so, try using forceInset. You can read about it here:
https://reactnavigation.org/docs/en/handling-iphonex.html

Please let me know if this fixes the issue and I will add an example to the README.

[alisherakb]

@plmok61
The issue is not the same. Because SafeAreaView works perfectly if I remove this line transitionConfig: (nav) => handleCustomTransition(nav)

I also tried to set:
<SafeAreaView forceInset={'always'}>
But it doesn't work...

Any ideas what can cause a problem using the custom transition?

[plmok61]

I will have to play around with this tonight and possibly over the weekend. Thanks for opening this issue.

[alisherakb]

@plmok61 I would be very grateful. Looking forward.

[plmok61]

@alisherakb can you show me your navigationOptions for this screen in the photo and StackNavigatorConfig ?

[plmok61]

@alisherakb I might have figured it out.

Instead of: forceInset={'always'}

Try: forceInset={{ top: 'always', bottom: 'always' }}

[alisherakb]

forceInset={{ top: 'always', bottom: 'always' }}

Thank you very much! You saved me.

[plmok61]

Re-opening so I remember to add an example to the README for how to deal with this since react-navigation doesn't seem to explain it well.