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

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.

[revathskumar]

@sankhadeeproy007 When we can expect a release with this fix?

[modiharsh04]

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