Nativebase: Invariant Violation on debug mode

Created on 21 Feb 2019 · 17Comments · Source: GeekyAnts/NativeBase

Issue Description

After updating my react-native from ^0.57.8 to ^0.58.5 my app is crashing only on debug mode and throwing following error :

So by digging into my codes I found out that this error is caused by paddingTop styling which is applied to Header component and once I comment that line, the app doesn't crash but looks ugly 😅.

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

node: v8.11.4
react-native: ^0.58.5
react: ^16.8.2
native-base: ^2.11.0

Expected behaviour

Actual behaviour

If I remove paddingTop from my header styling:

If I add paddingTop to my header styling:

Steps to reproduce

Try adding paddingTop:0 to your Header component and run your code in debug/staging mode.

Code snippet

render() {
return (
<Header style={styles.header} searchBar rounded>
  <Item>
    <Icon name="ios-search" />
    <Input
      returnKeyType="search"
      placeholder="Search"
    />
  </Item>
</Header>
)

const styles = StyleSheet.create({
  header: {
    backgroundColor: Colors.primary,
    height: 40,
    paddingTop: Platform.OS === 'ios' ? 0 : 30, //!!!! removing this line would fix the "Invariant Violation" error but the stying would be broken
    paddingBottom: Platform.OS === 'ios' ? 0 : 30,
  },
});

awaiting response

Source

el-lsan

Most helpful comment

@SupriyaKalghatgi I don't think this is the same problem as #2587

I'm getting the same error, and just like @el-lsan I only see it when running on iPhone X and the paddingTop of Header is set to 0.

Digging a little into the Header code, I found some this bit that only applies to the paddingTop on iPhone X:
https://github.com/GeekyAnts/NativeBase/blob/master/src/basic/Header.js#L55

topPadder = (style.paddingTop ? style.paddingTop : style.padding) + InsetValues.topInset;

so, if we supply 0 as the user's paddingTop, that ternary is only checking for truthiness, so 0 makes it use the padding (which in my and @el-lsan 's cases is undefined). Then it tries to do undefined + InsetValues.topInset which is resulting in NaN.

This can be easily fixed by checking whether paddingTop is finite rather than truthy:

topPadder = (_.isFinite(style.paddingTop) ? style.paddingTop : style.padding) + InsetValues.topInset;

(or Number.isFinite if you don't want to use lodash there)

tplorts on 1 Mar 2019

👍7 🚀2

All 17 comments

2587

SupriyaKalghatgi on 22 Feb 2019

👎8

@SupriyaKalghatgi I don't think this is the same problem as #2587

I'm getting the same error, and just like @el-lsan I only see it when running on iPhone X and the paddingTop of Header is set to 0.

Digging a little into the Header code, I found some this bit that only applies to the paddingTop on iPhone X:
https://github.com/GeekyAnts/NativeBase/blob/master/src/basic/Header.js#L55

topPadder = (style.paddingTop ? style.paddingTop : style.padding) + InsetValues.topInset;

This can be easily fixed by checking whether paddingTop is finite rather than truthy:

topPadder = (_.isFinite(style.paddingTop) ? style.paddingTop : style.padding) + InsetValues.topInset;

(or Number.isFinite if you don't want to use lodash there)

tplorts on 1 Mar 2019

👍7 🚀2

@tplorts Thanks for digging into this and make the issue more clear.
I also checked #2587 and other related issues and still it was more like a bug to me.
But since this issue got closed, I ended up changing my component and removing header wrapper to avoid this bug.
Hopefully with the details you provided this issue get reopened again for an upcoming fix.

Cheers 🍻

el-lsan on 2 Mar 2019

👍2

I want more details on this to fix
Did you try with latest release of NativeBase? If yes, what is the theme you injected in StyleProvider?

SupriyaKalghatgi on 4 Mar 2019

@SupriyaKalghatgi Yes.
I am using "native-base": "^2.12.0", and material as my theme.
Here's my theme provider component:

import React from 'react';
import { Provider } from 'react-redux';
import { StyleProvider } from 'native-base';
import getTheme from '../../native-base-theme/components';
import material from '../../native-base-theme/variables/material';

const ThemeProvider = ({ store, children }) => (
  <Provider store={store}>
    <StyleProvider style={getTheme(material)}>
      {children}
    </StyleProvider>
  </Provider>
);

export default ThemeProvider;

el-lsan on 4 Mar 2019

I tried similar use case with iPhone X simulator, couldn't reproduce this issue

SupriyaKalghatgi on 4 Mar 2019

@SupriyaKalghatgi Please try this tree from my fork:
https://github.com/el-lsan/NativeBase-KitchenSink/tree/produce-2603

el-lsan on 4 Mar 2019

I tried similar use case with iPhone X simulator, couldn't reproduce this issue

Be sure that in addition to using the iPhone X simulator, you are rendering a Header whose style contains paddingTop: 0. @el-lsan 's fork of the kitchen sink app has this so that should give you the error.

tplorts on 5 Mar 2019