[Bug]: iOS Sortable broken when accessibility setting reduce motion is enabled

[Aximem]

Description

iOS Accessibility setting reduce motion breaks Sortable:

Simulator.Screen.Recording.-.iPhone.16.-.2025-05-21.at.12.18.47.mp4

Steps to reproduce

Enable reduce motion in Settings > Accessibility > Animation > Reduce motion.

<Sortable.Grid
    columns={1}
    data={classifiedSportsArray}
    renderItem={renderSport}
    enableActiveItemSnap={false}
    onDragEnd={params =>
      // ...
    }
    activeItemScale={1.0}
/>

The solution I founded was to set itemsLayout to null:

import {
  useReducedMotion,
} from 'react-native-reanimated';

const reduceMotion = useReducedMotion();

// ...

<Sortable.Grid
    columns={1}
    data={classifiedSportsArray}
    renderItem={renderSport}
    enableActiveItemSnap={false}
    onDragEnd={params =>
      // ...
    }
    activeItemScale={1.0}
    {...(reduceMotion && {itemsLayout: null})}
/>

But it seems like a hack, imo the lib should handle it. Or is there another prop that I should use to handle it ?

Code snippet, Snack or GitHub repository link

/

React Native Sortables version

1.6.0

Reanimated version

3.16.7

React Native Gesture Handler version

2.20.2

React Native version

0.76.7

Platforms

iOS

Architecture

Fabric (New Architecture)

Workflow

Expo Dev Client

Device

iOS simulator

Acknowledgements

Yes

[MatiPl01]

Hey @Aximem!

Thanks for reporting the issue and finding a workaround. I will take a look at the weekend what happens with the reduced motion turned on and think how to best solve this case.

[MatiPl01]

Hey @Aximem!

I created a clean project with RN 0.76.9 (0.76.7 didn't work with my version of Xcode and I had to bump it) and your versions of remaining dependencies:

"dependencies": {
  "react": "18.3.1",
  "react-native": "0.76.9",
  "react-native-gesture-handler": "2.20.2",
  "react-native-reanimated": "3.16.7",
  "react-native-sortables": "^1.6.0"
},

I used the following code for testing:

Code snippet

import React from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
import Sortable from 'react-native-sortables';

import {Colors} from 'react-native/Libraries/NewAppScreen';

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  const items = [
    'Basketball',
    'Football',
    'Tennis',
    'Swimming',
    'Running',
    'Cycling',
    'Golf',
    'Volleyball',
    'Baseball',
    'Soccer',
  ];

  const renderSport = (item: {item: string; index: number}) => {
    return (
      <View style={styles.itemContainer}>
        <Text style={styles.itemText}>{item.item}</Text>
      </View>
    );
  };

  return (
    <GestureHandlerRootView style={{flex: 1}}>
      <SafeAreaView style={[backgroundStyle, styles.container]}>
        <StatusBar
          barStyle={isDarkMode ? 'light-content' : 'dark-content'}
          backgroundColor={backgroundStyle.backgroundColor}
        />
        <Sortable.Grid
          columns={1}
          data={items}
          renderItem={renderSport}
          enableActiveItemSnap={false}
          activeItemScale={1.0}
        />
      </SafeAreaView>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  itemContainer: {
    backgroundColor: '#fff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  itemText: {
    fontSize: 18,
    fontWeight: '600',
  },
});

export default App;

I also disabled Reduced Motion in settings and everything worked fine without disabling itemsLayout, as you can see on the following recording:

Screen.Recording.2025-05-24.at.20.52.47.mp4

Am I doing something wrong or maybe the issue is related to something else than just the reduced motion setting?

[Aximem]

Thanks for quick response.
Did you killed your application after enabling the reduce motion setting ? The setting is only applied after killing/relaunching the application.
If you still not have the issue this might be an issue with my project, nvm.

[MatiPl01]

Sorry for the late response here. I think that this issue is pretty similar to another one and the root of the issue is the same as I described in this comment: #349 (comment)

If not, please provide a reproduction example as I wasn't able to reproduce it on my end.

[Aximem]

I created a new reproduction example with up-to-date libs and I'm not able to reproduce the issue.
So I guess this is fixed.
Thanks.

[MatiPl01]

Thanks for letting me know. Good to hear that the issue is gone!