React-native-tab-view: [web] tab bar indicator position is not correct when tab bar scroll is enabled

[maxired]

Current behaviour

Hi,
currently when using react-native-web, the indicator position in the tab bar is not correct when scroll is enabled in the tab bar.

Expected behaviour

The indicator should be placed below the active label

Code sample

https://snack.expo.io/SyKo0GpQ8

Screenshots (if applicable)

What have you tried

I tried to understand the issue. It seems to be because when calculating the transformX position, we don't take into account the scroll position.

Your Environment

| software | version
| ---------------------------- | -------
| ios or android |
| react-native |
| react-native-tab-view | 2.13.0
| react-native-gesture-handler |
| react-native-reanimated |
| node |
| npm or yarn |

[maxired]

I managed to get it working by using

 onScroll={({ nativeEvent }) => {
              this.scrollAmount.setValue(nativeEvent.contentOffset.x);
            }}

instead of https://github.com/react-native-community/react-native-tab-view/blob/master/src/TabBar.tsx#L391-L397

I have no idea so far if this is a bug in tab-view or in reanimated.
BTW, another thing that seems to be not working in web is the scroll velocity detection, which also rely in reanimated

[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.