Nativebase: Users cannot change `isIphoneX` variable in custom themes.

[taranda]

I have gone through these following points

• [x] Check latest documentation: https://docs.nativebase.io/
• [x] Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
• [x] Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
• [x] Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
• [x] For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
• [x] 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 ofisIPhoneX`.

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.

[b33son]

I'm not sure where you mean. I don't have any reference to isIphoneX in Header.js, Content.js or Footer.js. I also check here to make sure I'm not missing anything in my local copy:

https://github.com/GeekyAnts/NativeBase/blob/master/src/theme/components/Header.js

Could you point me in the right direction? My header isn't the correct size for iPhoneX at all.

[taranda]

This particular variable is set in the /src/theme/variables/commonColors.js, /src/theme/variables/material.js, and /src/theme/variables/platform.js files.

The issue, is that I am unable to override the isIphonX variable in my local theme. PR #2383 fixes this.

[marxy]

There files have drectly reference to isIphoneX(via "variable.isIphoneX",but not "variables.isIphoneX"), so it can not be customed by users. Can you fix this problem?
https://github.com/GeekyAnts/NativeBase/blob/v2.8.1/src/basic/Header.js
https://github.com/GeekyAnts/NativeBase/blob/v2.8.1/src/basic/Footer.js
https://github.com/GeekyAnts/NativeBase/blob/v2.8.1/src/basic/Content.js

[taranda]

@marxy. Exactly. PR 2383 fixes the problem you just identified.

[SupriyaKalghatgi]

2291

[taranda]

@SupriyaKalghatgi The issue and solutions proposed in #2291 are similar, but do not directly address the problem described in this issue. Release 2.9.2 still does not allow the developer to override the isIphoneX variable in a custom theme.

While I think it is good that Native Base is working to support newer versions of the iPhone, I still think it is useful to allow the developer to customize the behavior of the isIphoneX variable.

I recommend re-opening this issue and merging PR 2383.

[suvenduchhatoi]

2514 has been merged

[prrenish]

The merge is affecting the where it is showing the following error

The code format which it is affecting is pasted below.
<StyleProvider> <Content> .................... </Content> </StyleProvider>