Reduced Motion on iOS

[spscatena]

Has anyone had issues on iOS with Reduce Motion enabled in Accessibility settings?

Resorting works fine, but with Reduce Motion on, items can land slightly outside the expected "drop indicator" area if the user isn’t precise.

Has anyone experienced this and found a workaround? Or is there a way to force the item to snap to grid on drop when motion is reduced?

[MatiPl01]

Hey @spscatena! Could you please share the recording showing the issue? Ideally, please also share the source code so that I can try to reproduce the issue on my side.

I've just tested it and everything seems to be working fine, at least in the example app:

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2025-11-13.at.01.37.55.mp4

[spscatena]

Hi thank you for getting back to me @MatiPl01!

I created a very basic list so you can see what I'm trying to do. Let me know what you think!

import { MaterialIcons } from "@expo/vector-icons";
import React, { useState, useCallback } from "react";
import { View, Text, StyleSheet } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Sortable from "react-native-sortables";

type Item = {
  id: string;
  name: string;
};

const DUMMY_DATA: Item[] = [
  { id: "1", name: "Item One" },
  { id: "2", name: "Item Two" },
  { id: "3", name: "Item Three" },
  { id: "4", name: "Item Four" },
  { id: "5", name: "Item Five" },
];

export default function BasicSortableList() {
  const insets = useSafeAreaInsets();
  const safeAreaHeight = insets.top;
  const [data, setData] = useState(DUMMY_DATA);

  const onDragEnd = useCallback(({ data }: { key: string; data: any }) => {
    setData(data);
  }, []);

  const renderItem = useCallback(({ item }: { item: Item }) => {
    return (
      <View style={styles.item}>
        <Text style={{ color: "white" }}>{item.name}</Text>
        <Sortable.Handle>
          <View style={styles.handle}>
            <MaterialIcons name='drag-indicator' size={25} />
          </View>
        </Sortable.Handle>
      </View>
    );
  }, []);

  const keyExtractor = useCallback((item: Item) => item.id, []);

  return (
    <View style={{ flex: 1 }}>
      <View style={{ height: safeAreaHeight }} />
      <Text style={styles.header}>Sortables with Reduced Motion</Text>
      <ScrollView>
        <Sortable.Grid
          columns={1}
          data={data}
          inactiveItemOpacity={1}
          renderItem={renderItem}
          keyExtractor={keyExtractor}
          onDragEnd={onDragEnd}
          customHandle
          dropAnimationDuration={200}
          rowGap={1}
          showDropIndicator
        />
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  item: {
    borderColor: "white",
    borderWidth: 1,
    backgroundColor: "#567F91",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingLeft: 20,
    marginLeft: 10,
    marginRight: 10,
  },

  header: {
    fontSize: 20,
    fontWeight: "bold",
    textAlign: "center",
    marginBottom: 20,
  },

  text: {
    fontSize: 16,
    fontWeight: "500",
    color: "#333",
  },

  handle: { padding: 20 },
});

sortables-example-reduced-motion.MP4

[MatiPl01]

Hey @spscatena!

It still works on my end on both, the bare and the expo workflow. The issue might be caused by the old reanimated or other library version on your side. Can you possibly open a repository with the reproduction example so that I can see your configuration and test with the same versions of packages?

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2025-11-15.at.12.57.49.mp4