Auto Scroll

Description

This example demonstrates how to use the auto scroll feature of the SortableGrid component.

Example

Source Code

import { useCallback } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Animated, { useAnimatedRef } from 'react-native-reanimated';
import Sortable from 'react-native-sortables';

const DATA = Array.from({ length: 30 }, (_, index) => `Item ${index + 1}`);

export default function AutoScrollExample() {
  const scrollableRef = useAnimatedRef<Animated.ScrollView>();

  const renderItem = useCallback(
    ({ item }: { item: string }) => (
      <View style={styles.card}>
        <Text style={styles.text}>{item}</Text>
      </View>
    ),
    []
  );

  return (
    <Animated.ScrollView
      contentContainerStyle={styles.contentContainer}
      ref={scrollableRef}
      style={{
        height: 400 // Limit height to enable scrolling in demo
      }}>
      <Sortable.Grid
        columnGap={10}
        columns={3}
        data={DATA}
        renderItem={renderItem}
        rowGap={10}
        scrollableRef={scrollableRef} // required for auto scroll
      />
    </Animated.ScrollView>
  );
}

const styles = StyleSheet.create({
  card: {
    alignItems: 'center',
    backgroundColor: 'var(--ifm-color-primary)',
    borderRadius: 10,
    height: 100,
    justifyContent: 'center'
  },
  contentContainer: {
    padding: 10
  },
  text: {
    color: 'white',
    fontWeight: 'bold'
  }
});

Interactive Demo

Loading interactive demo...

Result

info

The animation is a little choppy in development mode on the New Architecture (this is caused by react-native-reanimated). It is butter smooth on the Old Architecture. It also looks better in release builds.

Default

Custom autoScrollActivationOffset

autoScrollActivationOffset={200}

Custom autoScrollSpeed

autoScrollSpeed={0.2}