Add iPhone X support using RN-safe-area

[habovh]

This adds iPhone X support for TabNavigator using react-native-safe-area.

This method contains no hard-coded value for the iPhone X. Instead, it uses RN-safe-area which needs to be linked using react-native link but ensures future-proofing for any potential upcoming devices or layout changes by using iOS 11's Safe Area concept.

I used this technique myself, and I thought it might be worth adding it to TabNavigator directly.

[jrwpatterson]

Awesome work one comment I would ask is there a way to apply the padding to the inner section without having to manually apply it to each part of the inner section?

[jrwpatterson]

Otherwise the amount being padded is removed from the bottom...

[brunolemos]

@habovh The problem with using react-native-safe-area is that is use native parts, and react-native-tab-navigator is a js only package. If you introduce native code, that's a big breaking change, all expo apps would need eject, for example.

There is a js only safe-area but I don't know if it has static methods: https://github.com/react-community/react-native-safe-area-view

[habovh]

@brunolemos you are right, however in my opinion, it is still better than relying on hard-coded values, like the package you suggest uses. While this works for the moment, it's not future-proof. However I get the concern, so I guess I'll let the repo owner make the call. People are also free to use my fork should they like the way I did it!

[brunolemos]

What if we used the official SafeAreaView component and required react native >= 0.50

[brunolemos]

I don't think this package is maintained anymore so nevermind

[habovh]

@brunolemos that would be even better! Since it is not documented I did not know it existed. But yes, seems the package is not maintained anymore...

[ptomasroos]

Will close since this issue is more than a year, feel free to a open a new if this is still a issue.