Nativebase: Tabs component throws "Cannot read property 'scrollTo' of null" after redux state change

Created on 15 Oct 2019 · 16Comments · Source: GeekyAnts/NativeBase

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

On Android and iOS,
react-native: 0.60.5 native-base: ^2.13.8

Issue Description

I am rendering a <Tabs> object within a <View> with three <Tab> child objects. When redux updates state and this component renders, the error in the title is thrown. If you cancel it in debug, it goes away and no damage seems to be done, but when the app is compiled to a staging or production build, the error causes a general error popup and crashes the app to the login screen. If I comment out the <Tabs> component, the error is not thrown.

What I have tried:

I systematically commented out all child components of the <Tabs> object, but if the base <Tabs> element is still there, the error is thrown. Putting another component, like a <Container> with a <View> inside does not throw the error. Wrapping the <Tabs> in a <Container> also did not help. I tried placing a delay on the render. I tried splitting the render with props flags to eliminate lifecycle race conditions. I have tried moving the <Tabs> out of the function and into the main render() method, but the same error occurs.

Snippets

This is the function that is called from render() that creates the tabs

renderMainContent = () => (
    <Container>
    <Tabs
      style={{ flex: 1 }}
      initialPage={0}
      prerenderingSiblingsNumber={1}
      locked={Platform.OS !== 'ios'}
      renderTabBar={() => (
        <NGDefaultTabBar
          textStyle={{ fontFamily: 'Proxima Nova' }}
          backgroundColor="black"
          activeTextColor="white"
          inactiveTextColor="#CECECE"
          underlineStyle={{ backgroundColor: '#C6612F' }}
        />
      )}
    >
      <Tab heading="SCHEDULE">
        <View style={[styles.tabView, { paddingHorizontal: 0 }]}>
          <DetailSchedule
            data={this.props.schedule || []}
            active={this.props.navigation.state.params.user.active}
            shiftTypes={this.props.shiftTypes}
            handleRefresh={this.handleRefresh}
            refreshing={this.props.staffProfileRefreshing}
          />
        </View>
      </Tab>
      <Tab heading="PROFILE">
        <View style={styles.tabView}>
          <DetailProfile data={this.props.profile} />
        </View>
      </Tab>
      <Tab heading="CREDENTIALS">
        <View style={styles.tabView}>
          <DetailCredential data={this.props.credentials || []} />
        </View>
      </Tab>
    </Tabs>
    </Container>
  );

The exact error as seen from the console:

ExceptionsManager.js:86 Cannot read property 'scrollTo' of null
  | handleException | @ | ExceptionsManager.js:86
  | handleError | @ | setUpErrorHandling.js:23
  | reportFatalError | @ | error-guard.js:42
  | __guard | @ | MessageQueue.js:345
  | callFunctionReturnFlushedQueue | @ | MessageQueue.js:105
  | (anonymous) | @ | debuggerWorker.js:80

As you can see, it's not very verbose, but it does not trace back to any of the components we have written for this app, it appears to originate from inside the render lifecycle of react-native itself.

Please help! If you have any insight into what might be causing this issue, you'd be saving me big time.

Is the bug present in both iOS and Android?

Yes.

Source

jbustard

👍11

Most helpful comment

I had the same problem with 2.13.8 and fixed it by downgrading to 2.13.6 as @domoniquecarter35 pointed out.

modiharsh04 on 18 Oct 2019

👍3

All 16 comments

@jbustard I have not done as extensive testing but running on an ios simulator and ios device I get the same issue you have. I can confirm that removing the base <Tabs> component from the page and leaving all my other code intact resulted in no error (but the page doesn't look correct obviously). It would be great if someone with more knowledge had any insight to offer. Let me know if you would like me to share a snippet.

domoniquecarter35 on 17 Oct 2019

I found the issue I think.

On line 79 of index.js located at this path in the lib: ../node_modules/native-base/src/basic/Tabs/index.js (comment is not mine, it is in the code)

// because of contentOffset is not working on Android
setTimeout(() => {
      this.scrollView.scrollTo({
        x: this.props.initialPage * this.state.containerWidth,
        animated: false,
      });
});

If I monkey-patch this out of the minified dist code, the problem vanishes. Whatever this is intended to work around is breaking other patterns. I don't understand fully the intent of this code, but it's definitely the problem in my case.

jbustard on 17 Oct 2019

👍1

Can confirm that commenting out the dist code makes the problem disappear.

domoniquecarter35 on 17 Oct 2019

👍1

After setting my native-base version to "2.13.6" the issue disappeared. The PR which the code mentioned above was merged in after this version. I haven't had a chance to try "2.13.7" yet. Here is the PR where the code mentioned above was added to the repo. https://github.com/GeekyAnts/NativeBase/pull/2902/files.

--- edit
While the particular issue with scrollTo goes away there are other issues with the missing fonts in 2.13.6 and 2.13.7. That prevents this from being an actual solution.

domoniquecarter35 on 18 Oct 2019

I had the same problem with 2.13.8 and fixed it by downgrading to 2.13.6 as @domoniquecarter35 pointed out.

modiharsh04 on 18 Oct 2019

👍3

As @domoniquecarter35 stated, downgrading will prevent the error, but then enhancements made to fonts and such is lost. I created a fork with the offending code removed to use in the meantime. This is not a great longterm solution because operating off a git-fork is not stable, but it preserves the other, desirable fixes to the library.

If I understood the codebase better I would propose a PR with a better fix, but I do not. I hope that the original contributor or someone else who understands why this function exists will update it in the next version.

jbustard on 21 Oct 2019

any update in this issue?

uday5162 on 31 Oct 2019

👍1

Hey, apologies for the delay. This commit fixed one particular case where the initial page wasn't behaving as expected in android.
I'll revisit this soon. If anyone could come up with a PR that would execute this code conditionally based on a prop, I'd be more than happy to merge it!