Implementing a paginated slider in react native

Viewed 43

Looking for ideas on how to implement a Netflix.com like slider in react native.

enter image description here

If I use a ScrollView, user can scroll all the way to right with one single momentum scroll. But Netflix slider scrolls only 6 (itemsPerRow) items at a time. So, ScrollView may not be ideal. I will use general View instead of ScrollView.

 <View style={styles.slider}>
    <SliderControl pressHandler={loadPrevItems}>
      <Text>{'<'}</Text>
    </SliderControl>

    <Animated.View
      style={
       {
         transform: [{
           translateX: interpolatedAnimation,
         }],
       }
      }
     >
      {renderContent()}
    </Animated.View>

    <SliderControl pressHandler={loadNextItems}>
      <Text>{'>'}</Text>
    </SliderControl>
  </View>

The slider controls are tied to onPress event handlers. The handlers adjusts the animation value as needed. When the slider is re-rendered, it is animated (slide to left/right) and shows next/prev items. I figured that they are using transform translateX animation for this. This is easily achievable with Animated API

const animation = useRef(new Animated.Value(0)).current;
  
const interpolatedAnimation = useMemo(() => {
  return animation.interpolate({
    inputRange: [0, 100],
    outputRange: [0, sliderWidth],
  });
}, [animation, sliderWidth]);

useEffect(() => {
  Animated.timing(animation, {
    toValue: moveDirection === 'right ? -100 : 100,
    duration: 750,
    useNativeDriver: true,
  }).start();
});

Along with the Next/Prev button, Netflix slider also supports the trackpad scroll events. If we scroll slightly, the slider doesn't move at all. But we do a momentum scroll, it slides exactly 6 (itemsPerRow) items.

A general View doesn't support scroll event handlers to listen to trackpad scroll action. Not sure how I can achieve this part

ScrollView - lot of unwanted scrolling

View - No support for scroll event listener

Any ideas?

0 Answers
Related