Uncaught Error: Maximum update depth exceeded on tab change

[jordoh]

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

Changing tabs results in the following exception:

Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

This happens before the function provided to onChangeTab is called.

native-base 2.13.4
react 16.8.3
react-native 0.59.10

Expected behaviour

No crash.

Actual behaviour

Crash.

Steps to reproduce

        <Tabs
          initialPage={ 0 }
          page={ currentTabIndex }
          onChangeTab={ this._onTabChange }
          ref={ this._setTabs }
          contentProps={ { keyboardDismissMode: "none" } }
        >
          <Tab heading="TAB 1">
            { currentTabIndex === 0 ? this._renderQuickResults() : null }
          </Tab>
          <Tab heading="TAB 2">
            { currentTabIndex === 1 ? this._renderFullResults() : null }
          </Tab>
        </Tabs>

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

Happens on both iOS and Android.

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

This appears to be similar to #2812 and #2810

[jordoh]

Also: I can confirm that changing ScrollableTabView's componentDidUpdate to UNSAFE_componentWillReceiveProps fixes the issue.

[majugurci]

I have the same issue.

Environment:
expo 34.0.0
native-base 2.13.4

I have made a minimal reproduction case:
https://snack.expo.io/ByT_9S1Xr

I have found the same issue from before:
#2359

The issue from before had a solution with binding this.setState but I'm using functional component and useState.

EDIT: I can confirm it is working as expected when using class component:
https://snack.expo.io/SkyvkLyXr

EDIT 2: I have made a mistake in previous code example edit. I have not used the variable from component's state so page is undefined, it is just calling onChangeTab but it is not referencing state variable. If state variable is properly referenced the same is happening (maximum update depth):
https://snack.expo.io/Sy3gBI1XS

EDIT 3: I have found a hacky way to avoid this until this is fixed:
https://snack.expo.io/HkEk5GemB

[equesteo]

I continue to have this problem even with this fix. It might be slightly different, but it seems like the onChangeEvent is firing more than one time with different page number values when the tab is switched, leading to an infinite loop.

[Slessi]

same here, UNSAFE_componentWillReceiveProps doesn't change anything for me

[PlabanJr]

I continue to have this problem even with this fix. It might be slightly different, but it seems like the onChangeEvent is firing more than one time with different page number values when the tab is switched, leading to an infinite loop.

Can you please provide us with a snack to reproduce.

[ricardochen]

In my case I just removed the property
page={this.state.activeTab} from component Tabs

[hellsan631]

Here is an example of this behavior:

https://snack.expo.io/@hellsan631/native-base-tabs-example

I should be able to control the state of tabs, so that they can respond to changes in the outside world.

I would expect onChangeTab to fire only once when a tab is changed internally, not when the page is changed externally.

[PlabanJr]

Please try out our latest release v2.12.5. This issue has been taken care of.

Thank you for reporting!

[gaohan1994]

Please try out our latest release v2.12.5. This issue has been taken care of.

Thank you for reporting!

Hi, there
I'm using native-base@2.13.0 in my project, but still got this issue.