React-native-tab-view: Get position of the tab-view to animate a view outside of the view hierarchy of the scene

[danielang]

Question

In version 1 of react-native-tab-view it was possible to access the position-value by adding a custom pager like that:

_renderPager = props => {
    return (
        <View style={{ flex: 1}}>
            <Pager {...props} GestureHandler={GestureHandler} swipeMinDeltaX={30} />
            <OnlineArchiveControl {...props} />
        </View>
    )
};

In the snippet above the OnlineArchiveControl can interpolate the position to transform the yvalue. You can see the functionality in the attached GIF.

Is a similar implementation possible in v2 of this great library?

[satya164]

It's not currently possible to get the position outside the tab view. But I'm thinking about accepting a reanimated value which we can keep updated with the position

[danielang]

Hi @satya164, thank you for your hyper fast response!

But I'm thinking about accepting a reanimated value which we can keep updated with the position

This would be awesome. When could I expect this functionality will be added to this library?

[satya164]

Just sent a PR #782

[danielang]

Thank you very much!
It works as expected!

[maxired]

Hi,

just a comment for anyone looking to achieve an animation based on the position.

react-native-tab-view use internally https://github.com/kmagiera/react-native-reanimated to do animation.

This mean that the position you provide to you TabView should be an react-native-reanimated Animated.Value, not a regular react-native Animated.Value

Here an expo showing the basic https://snack.expo.io/HJ8Fj1p04

[GeniusCoders]

@maxired thanks

[AlexandrDobrovolskiy]

Is there any way to use position with reanimated v2?