Tab Screen Not Rendering After Updating RN Reanimated to v2.9.1

[waleedshkt]

Replicated issue as previously raised here

Current Behavior There are two tabs and using Tabs.ScrollView to render tab-view components. In RN Reanimated v2.2.3, the contents are displayed correctly. But after updating to v2.9.1, they are no longer rendering and following error pops up:

Warning: Cannot update a component (`Unknown`) while rendering a different component (`Unknown`). To locate the bad setState() call inside `Unknown`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
in Unknown
    in RCTView (at View.js:32)
    in View (at ScrollView.js:1674)
    in RCTScrollView (at ScrollView.js:1792)
    in ScrollView (at ScrollView.js:1818)
    in ScrollView (at createAnimatedComponent.tsx:682)
    in AnimatedComponent(ScrollView) (at createAnimatedComponent.tsx:693)
    in Unknown
    in Unknown
    in Unknown (at TabHOC/index.js:24)
    in Tab (at TabsHOC/index.js:19)
    in RCTView (at View.js:32)
    in View (at createAnimatedComponent.tsx:682)
    in AnimatedComponent(View) (at createAnimatedComponent.tsx:693)
    in Unknown (created by Lazy)
    in Lazy (created by CellRenderer)
    in RCTView (at View.js:32)
    in View (at VirtualizedList.js:2073)
    in VirtualizedListCellContextProvider (at VirtualizedList.js:2088)
    in CellRenderer (at VirtualizedList.js:814)
    in AndroidHorizontalScrollContentView (at ScrollView.js:1674)
    in AndroidHorizontalScrollView (at ScrollView.js:1792)
    in ScrollView (at ScrollView.js:1818)
    in ScrollView (at VirtualizedList.js:1268)
    in VirtualizedListContextProvider (at VirtualizedList.js:1100)
    in VirtualizedList (at FlatList.js:645)
    in FlatList (at createAnimatedComponent.tsx:682)
    in AnimatedComponent(FlatList) (at createAnimatedComponent.tsx:693)
    in Unknown
    in RCTView (at View.js:32)
    in View (at createAnimatedComponent.tsx:6
    ...

Basically, TabHOC component renders tab views dynamically in Tabs.Container. See the code below:

...
const CustomTabs = memo(props => {

    const renderTabViews = React.useCallback(() => React,Children.toArray(props.children).map((child, index) => (
        <Tabs.Tab 
            key={index}
            ...
        >
                <Tabs.ScrollView>
                    {child}
                </Tabs.ScrollView>
        </Tabs.Tab>
    )), [children]);

    return (
        <Tabs.Container
            lazy
            initialTabName={props.initialTabName}
            renderHeader={props.renderHeader}
            renderTabBar={renderTabBar}
            onIndexChange={props.onIndexChange}
        >
            {renderTabViews()}
        </Tabs.Container>
    );
});

export default CustomTabs;

And here are dependencies with their versions I'm using:

    "react": "17.0.2",
    "react-native": "0.66.1",
    "react-native-collapsible-tab-view": "^4.5.2",
    "react-native-gesture-handler": "^2.5.0",
    "react-native-reanimated": "^2.9.1",
    "react-native-safe-area-context": "^4.3.1",
    "react-native-screens": "^3.15.0",

[andreialecu]

Try using version 5, it's published under the @rc version tag. The currently released version has problems with reanimated 2.9.1

[waleedshkt]

@andreialecu Thank you for your response.

I installed RC version. The built was successful but got an error of unavailable dependency module react-native-pager-view in node_modules/ during app installation.

It is indeed not installed. Should I fork, pull and add it?

[andreialecu]

It's a peer dependency, you need to install it yourself. Read the README in the root of the repository.

[waleedshkt]

Oh. I see. The doc got updated in June. I had it installed with old command.

Right, I install and check it then.