Users cannot change `isIphoneX` variable in custom themes.

I have gone through these following points

• Check latest documentation: https://docs.nativebase.io/
• Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
• Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
• Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
• For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
• For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/

Issue Description

I am no able to modify the isIphoneX variable in my custom theme. Since Native Base currently does not support iPhone XS, iPhone XR and iPhone XS Max, may app does not render properly on those phones.

I think this was an oversight and can be corrected by adding an s to three files. People with custom themes should be able to modify this variable.

node, npm, react-native, react and native-base version, expo version if used

node v8.11.1 npm v6.4.1 react-native 0.56 native-base 2.8.0 expo not used

Expected behaviour

Add the following to your local project’s native-base-theme/variables/platform.js:

import DeviceInfo from 'react-native-device-info';
const isIphoneX = DeviceInfo.hasNotch();  // This can be any custom behavior and does not need to rely on DeviceInfo

We would then expect the Header, Footer and Content components to respond appropriately to the value of the isIphoneX variable set above.

Actual behaviour

The Header', 'Footer' and 'Content' components do not response to the overridden value of isIPhoneX`.

Steps to reproduce

Install react-native-device-info

npm install --save react-native-device-info

Add the following to your local project’s native-base-theme/variables/platform.js:

import DeviceInfo from 'react-native-device-info';
const isIphoneX = DeviceInfo.hasNotch();

Run your app in an iPhone XR simulator. You will notice that the Header, Footer and Content components do not provide adequate margins for the newer iPhones.

Is the bug present in both iOS and Android or in any one of them?

It is present in both.

Any other additional info which would help us debug the issue quicker.

The issue is easy to fix. Simple change variable.isIphoneX to variables.isIphoneX in the Header.js, Content.js and Footer.js files.

I will open a PR.

[prrenish]

The merge is affecting the <StyleProvider /> where it is showing the following error The code format which it is affecting is pasted below. <StyleProvider> <Content> .................... </Content> </StyleProvider>

[suvenduchhatoi]

#2514 has been merged