TabView and shouldLoadComponent bounces between tabs

[edgarroman]

🐛 Bug Report

When using TabView and shouldLoadComponent is active, then having multiple child components will create a scenario where tabs do not switch properly when clicked on. The tabs bounce between various tabs.

Note, this bounce does not occur when showLoadComponent is not enabled. Also, swiping tab pane works fine.

To Reproduce

Steps to reproduce the behavior:

See example.

1. Click on last tab
2. Click on first tab

Expected behavior

Tab pane should switch without bouncing.

Link to runnable example or repository (highly encouraged)

https://snack.expo.io/@romandc/994748

UI Kitten and Eva version

Package	Version
@eva-design/eva	^2.0.0
@ui-kitten/components	^5.0.0

Environment information

  System:
    OS: macOS 10.15.6
    CPU: (4) x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
  Binaries:
    Node: 14.3.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
  IDEs:
    Android Studio: 3.2 AI-181.5540.7.32.5056338
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.11.0 => 16.11.0
    react-native: https://github.com/expo/react-native/archive/sdk-38.0.0.tar.gz => 0.62.2

[Bandwagoner]

Same issue here. I just ended up mapping the tab indices to components and lazy loading them the old fashioned way.

EDIT: Discovered when you provide a height for the tab container, this will fix the issue.

[edgarroman]

Confirmed that if you add a fixed height to the tab container, the issue goes away. However a height like '100%' will not fix the issue. So at least there is a partial workaround.

[bataevvlad]

Fix for issue was provided and waiting merging.

[naojamg]

Putting animationDuration={1} resolves the issue for me.