React-native-tab-view: Scenes loading before clicked with lazy property

[TylerZubke]

Current behaviour

Link to demo: https://snack.expo.io/B1kGRZKDH

If I click the 'SECOND' tab it alerts '2', which is expected. Then if I click back to the 'FIRST' tab, it alerts '3'. This happens in the simulator and on iOS devices every time. Weirdly, it occasionally works correctly in the Snack, but about 80% of the time it doesn't work as expected. Android seems to be fine. I can only get this behavior by clicking a tab to the left of the selected tab.

Expected behaviour

With the lazy property I would expect that it doesn't alert '3' until I click the tab labeled 'THIRD'.

Code sample

https://snack.expo.io/B1kGRZKDH

Your Environment

| software | version
| ---------------------------- | -------
| ios (device and simulator) | any version
| react-native | 0.60.3
| react-native-tab-view | 2.10.0
| react-native-gesture-handler | 1.3.0
| react-native-reanimated | 1.2.0
| node | 10.16.0
| npm or yarn | npm

[wenkangzhou]

same issue

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[Mark1626]

I'm facing the same issue
Is #813 related?

@satya164 Have created a small repro in which I reproduced this
https://github.com/M4rk9696/tab-view-lazy-load-bug

| software | version
| ---------------------------- | -------
| ios or android | both
| react-native | 0.61.5
| react-native-tab-view | 2.11.0
| react-native-gesture-handler | 1.5.2
| react-native-reanimated | 1.4.0
| node | v10.16.0
| npm or yarn | yarn

[Mark1626]

@satya164 What is the purpose for layout.width in the check? I was trying to find the RCA, removing it seems to make it work

https://github.com/react-native-community/react-native-tab-view/blob/b4fc7c4d4a9eb31139e30034eaeb02fde7bb09e9/src/SceneView.tsx#L110

[Donhv]

any update ?

[Mark1626]

@satya164 Can this be reopen please?

[TylerZubke]

In case anyone stumbles across this, I've had a much better experience with https://github.com/ptomasroos/react-native-scrollable-tab-view.

[sanghavan]

Got same issue

[hungpv19]

any solution ?

[marcin-solvenet]

@satya164 What is the purpose for layout.width in the check? I was trying to find the RCA, removing it seems to make it work

https://github.com/react-native-community/react-native-tab-view/blob/b4fc7c4d4a9eb31139e30034eaeb02fde7bb09e9/src/SceneView.tsx#L110

@Mark1626 when I removed layout.width from the condition as you suggested,I observed that componentDidMount is called everytime when scene get's focused, so it's unwanted behaviour to re-create scene every time.