NativeBase: native-base breaks with RN 0.58.0

I’m seeing an Invariant violation... is not usable as a native method argument exception stemming from native-base’s Header component. I believe the breakage is due to: Public methods of components converted to ES6 classes are no longer bound to their component instance. For ScrollView, the affected methods are setNativeProps, getScrollResponder, getScrollableNode, getInnerViewNode, scrollTo, scrollToEnd, scrollWithoutAnimationTo, and flashScrollIndicators. For CameraRollView, the affected methods are: rendererChanged. For SwipeableRow, the affected methods are: close. Therefore, it is no longer safe to pass these method by reference as callbacks to functions. Auto-binding methods to component instances was a behaviour of createReactClass that we decided to not preserve when switching over to ES6 classes. I see native-base’s component code use a multitude of these breaking functions.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 9
Comments: 18 (6 by maintainers)

Most upvoted comments

Fixed with 2.11.0

SupriyaKalghatgi on Jan 31, 2019

@suvenduchhatoi try Actionsheet

ggdegreat on Feb 1, 2019

#2536 was related to, react-timer-mixin which was a problem I was facing. Now that was fixed in 2.11.0 by adding it as a dependency in Native-Base but on a fresh install this new error is shown.

Specially I am seeing an error on IOS which is -

height":"<<NaN>> … is not usable as a native method argument.

It goes on to explain this is coming from the native-base Header component. When I check the ejected Header component I can see this exact line it is referencing in the error log for IOS,

height:
      variables.platform === "ios" && variables.platformStyle === "material"
        ? variables.toolbarHeight + StatusBar.height
        : variables.toolbarHeight,

This is my component which is using the Header component that is throwing the error -

import React from 'react';
import { Body, Button, Header, Icon, Left, Right, Title } from 'native-base';

const AuthHeader = props => {
  return (
    <Header>
      <Left>
        <Button transparent onPress={() => props.navigation.toggleDrawer()}>
          <Icon name="menu" />
        </Button>
      </Left>
      <Body>
        <Title>Header</Title>
      </Body>
      <Right>
        <Button transparent onPress={() => props.navigation.toggleDrawer()}>
          <Icon name="menu" />
        </Button>
      </Right>
    </Header>
  );
};

export default AuthHeader;

I am not using a StatusBar and confident that is what is causing the issue.

When I change the Header component from,

StatusBar.height to 1, this clears the NaN error and the application loads as normal.

This leaves me with the question,

A. Am I supposed to us use a StatusBar with the Native-Base Header component? B. Or, should there be a check to make sure StatusBar does not exists before relying on it’s height in the Native-Base Header component?

wuno on Feb 2, 2019

2.11.0 doesn’t fixed.

ggdegreat on Feb 1, 2019

@wuno same issue, https://github.com/GeekyAnts/NativeBase/issues/2647

kala888 on Mar 27, 2019

This is a different problem than what 2.11.0 fixes. Unless I am missing something here, 2.11.0 adds,

"react-timer-mixin": "^0.13.4" To the package.json.

The problem mentioned in this thread and in the point I was making has to do with the Header component that occurs when using the material theme on IOS it looks like. Possibly more depending on the original posted setup.

If you look at my comment above it shows the exact errorI was getting. I was able to fix it for now by adding a default height to status bar when it does not exist. That way it does not throw an error. This is the only issue I am facing now and was able to fix it till a PR is made.

I would be happy to make a PR but I am not sure what the best long term fix is due to my lack of knowledge of Native Base. This is my first time using it.

wuno on Feb 8, 2019

I’m still seeing this with 2.11.0 🤔

janpieterz on Feb 7, 2019

fixed up with 2.11.0

aligenc on Feb 6, 2019

@hoboman313 i didn’t do anything. it is just a basic call to ActionSheet.

ggdegreat on Feb 2, 2019

@hoboman313 See if the discussion in #2536 helps you fix your issue… screen shot 1440-05-24 at 12 37 15 pm

suvenduchhatoi on Jan 30, 2019