Can React-Native apps work on iPhoneX? Here is our solution for you

Many of us would ask me, what’s new about the monthly version of react-native.I was also banging my head into the wall to reply them.Now I am happy to report bunch of lists.One among them is support of iPhone X.I am really fascinated to see how react-native app works on iPhone X.

Immediately I searched google to see how it works, got some component named SafeAreaView

Unfortunately I couldn’t find SafeAreaView in React-native documentation,I read some post about usage of it.Immediately I get into my code editor and check how it works.I tried importing the component like Text

Then I have added the component SafeAreaView as the root for all the components as below.

I have styled the component with flex:1 and backgroundColor.But the problem I faced is with SafeAreaView in iphone X is it has some color(given in styles) in both header as well as in the footer like below.

Header footer-issue

I don’t want footer as above.Also the safeArea and header overlap with each other.We were thinking off to get this to be resolved.
Then I tried to use normal View as root component by using the complementation of device-info library.The idea is just to style the safeArea(header) alone.So make use of padding property.

Header overlap -issue

I had a discussion with my friend Prabakaran Marimuthu.He encouraged me with an idea of styling the header of each page since we are maintaining a header as a component.We need to change the style at once which will be reflected in all screens.

This is our desired result.


This is how I made our app to support for iPhone X.Thanks everyone

Related Posts

Leave a comment