Tab Screen is showing up blank

[dan-fein]

Current behavior

Currently I have 4 screens and set them each to have a width of the window. Despite this, when swiping from one to the other the next screen is visible but then when you get to the point of the index changing, it disappears. If you click to another tab the same thing happens, it's just blank.

Expected behaviour

I would expect to see the relevant screen on both swipe and when each tab is selected.

Code sample

const { useTabsContext, ...Tabs } = createCollapsibleTabs()

const Page = () => {
    const [index, setIndex] = useState(0);

    const containerRef = useAnimatedRef()
    const postsTabRef = useAnimatedRef()
    const detailsTabRef = useAnimatedRef()
    const itemsTabRef = useAnimatedRef()
    const similarTabRef = useAnimatedRef()
    let refs = {
                    Posts: postsTabRef,
                    Details: detailsTabRef,
                    Items: itemsTabRef,
                    Similar: similarTabRef 
                }
    const [refMap, setRefMap] = React.useState(refs)


    return (<Tabs.Container
                containerRef={containerRef}
                headerHeight={headerHeight} // optional
                refMap={refMap}
                scrollEnabled = {true}
                onIndexChange={setIndex}
                >
                <Tabs.ScrollView style={{ width: windowWidth, height: 600, backgroundColor: 'red'}} contentContainerStyle={{ height: "100%" }}>
                    <View><Text>Hello</Text></View>
                </Tabs.ScrollView>
                <Tabs.ScrollView style={{ width: windowWidth, height: 600, backgroundColor: 'orange'}} />
                <Tabs.ScrollView style={{ width: windowWidth, backgroundColor: 'yellow'}} />
                <Tabs.ScrollView style={{ width: windowWidth, backgroundColor: 'green'}} />

                </Tabs.Container>
        )
}

Screenshots (if applicable)

buggy.mov

What have you tried

I originally had the 4 <Tabs.ScrollView /> components as the ones that are actually use in my app. I've minimized down to the bare elements to try and see where I may be causing my error but even with this basic layout it isn't working.

I've tried alternative widths and flex: 1, etc. I can't figure out where the issue is.

[dan-fein]

Interesting, by removing onIndexChange this worked. Any idea why?

[PedroBern]

@danielfein try wrapping the container into useMemo, see the onIndexChange example of the examples folder and let me know. Also your setIndex won't work because it receives an object, not the current index, see the readme.

[andreialecu]

I can confirm this as well. Going to try to find a solution as part of #93

[andreialecu]

@PedroBern the problem is related to this:
https://docs.swmansion.com/react-native-reanimated/docs/api/useSharedValue/#arguments

shouldRebuild defaults to true, and the tab container re-renders when the event gets triggered, which in turn resets all shared values to their initial state, including this one:

react-native-collapsible-tab-view/src/createCollapsibleTabs.tsx

Lines 203 to 205 in fe4ac3c

	const pagerOpacity = useSharedValue(
	initialHeaderHeight === undefined || index.value !== 0 ? 0 : 1
	)

Which makes the opacity go to 0.

This bug can manifest for other reasons as well, I've been tracking it in a different situation so this seems to explain it.

As mentioned previously, I'll fix it as part of #93

[andreialecu]

@PedroBern This part is also problematic:

react-native-collapsible-tab-view/src/createCollapsibleTabs.tsx

Lines 240 to 243 in fe4ac3c

	containerRef.current?.scrollToIndex({
	animated: false,
	index: index.value,
	})

It takes control of the scroll mid-way and auto-snaps the page, I could attach a video but it should be easy to reproduce.

Removing it entirely doesn't seem to cause any issues that I can see. What was the purpose of it?

[PedroBern]

What was the purpose of it?

@andreialecu has only one purpose: fix the screen/page position when switching the device orientation (when the windowWidth is updated).

Below is an ilustration of the issue. Forcing the container to jump to the correct index was the quickest solution. I'm sure we can solve this with a different approach.

Also, I'm sure adding index.value to the deps array was a mistake.

initial orientation: portrait
x = windowWidth

   x     x      x
------|------|------   // expected scenes positioning
------|------|------   // initial scenes positioning

User change device orientation to landscape:

windowWidth is updated

        x'         x'          x'
------------|------------|------------   // expected scenes positioning
    ------------|------------|------------   // new scenes positioning
------------|------------|------------   // scenes positioning after jumping to current index

[PedroBern]

@andreialecu Demo from above:

[waleedshkt]

@PedroBern

Facing same issue after updating react-native-reanimated from v2.2.3 to v2.9.1.
I'm rendering two tab views using Tabs.Scrollview and the child components are not rendering