Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Header Invariant Violation by default on iOS

See original GitHub issue

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

App crashing on startup. Found the Issue was the Header. I was testing an existing app after upgrading expo and Native Base. This is limited to my iPhone X. My android emulator works fine.

<Header>
  <Left/>
  <Body>
    <Title>[omited]</Title>
  </Body>
  <Right />
</Header>

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

node/12.0.0
“expo”: “^34.0.1”
“react”: “16.8.3”,
“react-native”: “0.59.8”,
“native-base”: “2.13.4”

Expected behaviour

No crash

Actual behaviour

Crashses with the following error:

Invariant Violation: [25,"RCTView",171,{"backgroundColor":4283326034,"flexDirection":"row","paddingLeft":10,"paddingRight":10,"justifyContent":"center","paddingTop":42,"borderBottomWidth":0.3333333333333333,"borderBottomColor":4282339765,"height":"<<NaN>>","elevation":3,"shadowColor":4278190080,"shadowOffset":{"width":0,"height":2},"shadowOpacity":0.2,"shadowRadius":1.2,"top":0,"left":0,"right":0}] is not usable as a native method argument

Note "height":"<<NaN>>".

Steps to reproduce

Should crash on a clean install for iOS.

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

Only iOS

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

Setting height, <Header style={{height: 10}}> or example, resolves the issue.

Issue Analytics

State:
Created 4 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

timchingcommented, Aug 1, 2019

I faced the same problem too, and based on https://github.com/GeekyAnts/NativeBase/issues/2603, setting the height of the <Header> works for me

<Header style={styles.header}/>
...
...
const styles = StyleSheet.create({
    header: {
      height: Platform.OS === 'ios' ? 90 : 50,
      paddingTop: Platform.OS === 'ios' ? 40 : 0,
      paddingBottom: Platform.OS === 'ios' ? 0 : 0,
    },
});

And remember to set the headerStyle for <Picker> if you use the <Picker>

<Picker headerStyle={styles.header}>...</Picker>

Hope it helps ~

0reactions

PlabanJrcommented, Aug 5, 2019

@Sivli-Embir I tried reproducing the issue but it seems to work fine for me. Please check this. Please let me know if I am missing something obvious.

Top Results From Across the Web

requireNativeComponent: "RNSScreen" was not found in the ...

Invariant Violation : requireNativeComponent: "RNSScreen" was not found in the UIManager. Follow these steps: 1. Make sure in your `package.json` ...

Troubleshooting common React Native bugs - LogRocket Blog

This troubleshooting guide shares how to easily find and address common React Native bugs. See common error examples.

Invariant Violation: loadable: cannot find home in stats

Hello, while i was using loadable in index.js of home component, I got this error. Invariant Violation: loadable: cannot find home in stats....

react-native-webview - npm

React Native WebView component for iOS, Android, macOS, and Windows. ... If you're getting Invariant Violation: Native component for ...

error invariant violation: "main" has not been registered. this ...

default ') // KeyboardContext.tsx:138 ERROR Invariant Violation: "main" has not been registered. This can happen if: * Metro (the local dev server) is...