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:
2
Answers
Do as following and let me know it works or not:
I believe you need to pass the translationY directly (without .value):
Hope it helps.