What should I pass as a value to a prop expecting Animated.Value while using react-native-reanimated?

Question

I created a hook to capture the react-native-pager-view carousel scroll position:

import { useEvent, useHandler } from 'react-native-reanimated';

import { AnimatedPagerScrollHookParams } from './animated-pager-scroll.type';

const useAnimatedPagerScroll = (
  handlers: AnimatedPagerScrollHookParams['handlers'],
  dependencies?: AnimatedPagerScrollHookParams['dependencies'],
) => {
  const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);

  return useEvent(
    event => {
      'worklet';
      const { onPageScroll } = handlers;

      if (
        onPageScroll &&
        (
          event as {
            eventName: string;
          }
        ).eventName.endsWith('onPageScroll')
      ) {
        onPageScroll(event, context);
      }
    },
    ['onPageScroll'],
    doDependenciesDiffer,
  );
};

export default useAnimatedPagerScroll;

And then, I used it in my PagerView component like so:

      <AnimatedPagerView
        onPageScroll={handler}
        style={{ flex: 1 }}
        initialPage={0}
      >
        {slides.map((slide, index) => (
          <View
            key={index}
            style={{
              justifyContent: 'center',
              alignItems: 'center',
            }}
          >
            <ImageBackground
              testID="TestID__image-Onboarding"
              source={slide.imageUrl}
              style={{
                width: '100%',
                height: '100%',
                justifyContent: 'flex-end',
              }}
            >
              <LinearGradient
                colors={['rgba(255,255,255,1)', 'rgba(255,255,255,0)']}
                style={{
                  position: 'absolute',
                  left: 0,
                  right: 0,
                  top: 0,
                  height: '50%',
                }}
              />
              <Typography
                testID="TestID__subtitle-Onboarding"
                variant="h1"
                color="alternateBasic"
                style={{
                  marginBottom: 146,
                  marginLeft: 43,
                  width: index === slides.length - 1 ? '45%' : '35%',
                }}
              >
                {slide.subtitle}
              </Typography>
            </ImageBackground>
          </View>
        ))}
      </AnimatedPagerView>

I am using a library called react-native-animated-pagination-dots. It animates based on the scroll position. It accepts a prop called scrollX which has to be of type Animated.Value. I am using react-native-reanimated

      <ExpandingDot
        data={slides}
        expandingDotWidth={30}
        scrollX={translationY.value}
        inActiveDotOpacity={0.6}
        dotStyle={{
          width: 10,
          height: 10,
          backgroundColor: '#347af0',
          borderRadius: 5,
          marginHorizontal: 5,
        }}
        containerStyle={{
          top: 30,
        }}
      />

It throws an error if I pass a shared value which I can understand as it expects Animated.Value. What transformation can I perform to continue using react-native-reanimated and satisfy the condition of the library by passing the right prop?

Library List:

• https://github.com/weahforsage/react-native-animated-pagination-dots
• https://github.com/callstack/react-native-pager-view
• https://docs.swmansion.com/react-native-reanimated/

Answer 1

Do as following and let me know it works or not:

scrollX={new Animated.value(translationY.value)}

Answer 2

I believe you need to pass the translationY directly (without .value):

      <ExpandingDot
        data={slides}
        expandingDotWidth={30}
        scrollX={translationY}
        inActiveDotOpacity={0.6}
        dotStyle={{
          width: 10,
          height: 10,
          backgroundColor: '#347af0',
          borderRadius: 5,
          marginHorizontal: 5,
        }}
        containerStyle={{
          top: 30,
        }}
      />

Hope it helps.