NativeBase: Invariant Violation on debug mode

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,
  },
});

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 17 (5 by maintainers)

Most upvoted comments

#2587

+11

SupriyaKalghatgi on Feb 22, 2019

@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 Mar 1, 2019

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

This was wrt NativeBase KitchenSink

SupriyaKalghatgi on Mar 5, 2019

"react-native": "0.60.4", "native-base": "^2.12.2",

I have this issue. Nothing I have tried works around it.

aidanw on Jul 24, 2019

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 Mar 4, 2019

@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 Mar 2, 2019