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?

[cr0ybot]

It doesn't look like this is still a feature in v2 (it no longer uses reanimated at all). Trying to sort out if it's possible to get position out of renderTabBar to pass to other components but no luck so far.

EDIT: I did it! For anyone looking for this functionality in v2, here's the approach I took:

const AnimatedComponent = ({ position }) => {
  const interpolatedPosition = position.interpolate({
    // NOTE: inputRange should match the number and indices of the routes from navigationState
    inputRange: [...],
    outputRange: [...],
  });

  return (
    <Animated.View style={{ someStyleProp: interpolatedPosition }}>
      {...}
    </Animated.View>
  );
}

const ScreenComponent = () => {
  const position = useRef(new Animated.Value(0));

  const renderTabBar = (props) => {
    position.current = props.position;
    return (
      <TabBar {...props} />
    );
  };

  return (
    <TabView renderTabBar={renderTabBar} navigationState={{...}} />
    <AnimatedComponent position={position.current} />
  );
}