[Bug]: Unable to customise layout animation?

[jamesofficer]

Description

Hey there,

Just wanted to say, fantastic library! I have just one small issue that is being a real bear for my use case.

Maybe I am doing something wrong, but I have spent several hours debugging this and narrowed it down to Sortables.

I would like to customise the layout animation of my sortable. This is not the entering or exit animations, but rather the general layout animation itself.

The videos below show an exaggerated example. But you can see, as my cards slowly close, the layout animation of the Sortables is much faster than the layout animations of my cards, causing unusual overlapping that looks pretty unsightly.

With: itemsLayoutTransitionMode="all"

Simulator.Screen.Recording.-.iPhone.16e.-.2026-02-11.at.22.15.04.mov

With: itemsLayoutTransitionMode="reorder"

Simulator.Screen.Recording.-.iPhone.16e.-.2026-02-11.at.22.14.42.mov

It seems like this is currently the only prop that can be used to turn the layout animation on or off? Ideally I would like to be able to pass my own layout animation that would affect this.

Obviously I can speed up my card animations, but there always seems to be a little bit of overlap, no matter what speed I use.

Appreciate any help, and again thanks for the awesome library!

Steps to reproduce

Code snippet, Snack or GitHub repository link

React Native Sortables version

1.9.4

Reanimated version

4.2.1

React Native Gesture Handler version

2.28.0

React Native version

0.81.5

Platforms

iOS

Architecture

None

Workflow

None

Device

No response

Acknowledgements

Yes

[MatiPl01]

Hey!

In general, you cannot customize the animation of grid items. The problem is that they use worklet-based reanimated animations created with useAnimatedStyle, not layout animations (I used them before but there were multiple problems on the Old Architecture so I had to get rid of them). Because of that, I decided not to allow any customization beyond limiting the animation to items reordering only (via itemsLayoutTransitionMode='reorder').

The simples solution that I can suggest for you is to use the LinearTransition with some delay that looks best for your case and keep itemsLayoutTransitionMode='all' (or not set at all as this is a default value of this prop). For me, setting the 50ms delay works fine:

Simulator.Screen.Recording.-.iPhone.16e.-.2026-02-11.at.23.22.09.mp4

Source code

import { memo, useCallback, useState } from 'react';
import {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';
import Animated, { LinearTransition } from 'react-native-reanimated';
import type { SortableGridRenderItem } from 'react-native-sortables';
import Sortable from 'react-native-sortables';

const PRIMARY_COLOR = '#36877F';
const WHITE_COLOR = '#FFFFFF';
const RADIUS_MD = 12;
const RADIUS_SM = 8;
const SPACING_MD = 16;
const SPACING_SM = 12;
const SPACING_XS = 8;
const ITEM_HEIGHT = 96;

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

type MyButtonProps = {
  title: string;
  onPress: () => void;
};

function MyButton({ onPress, title }: MyButtonProps) {
  return (
    <TouchableOpacity style={styles.button} onPress={onPress}>
      <Text style={styles.buttonText}>{title}</Text>
    </TouchableOpacity>
  );
}

const AnimatedButton = Animated.createAnimatedComponent(MyButton);

const LAYOUT_TRANSITION = LinearTransition.delay(50);

const Item = memo(function Item({ item }: { item: string }) {
  const [expanded, setExpanded] = useState(false);

  return (
    <Animated.View
      layout={LAYOUT_TRANSITION}
      style={[
        styles.card,
        { height: expanded ? ITEM_HEIGHT * 2 : ITEM_HEIGHT }
      ]}>
      <View style={styles.content}>
        <Animated.Text layout={LAYOUT_TRANSITION} style={styles.itemText}>
          {item}
        </Animated.Text>
        <AnimatedButton
          layout={LAYOUT_TRANSITION}
          title={expanded ? 'Shrink' : 'Expand'}
          onPress={() => setExpanded(!expanded)}
        />
      </View>
    </Animated.View>
  );
});

export default function PlaygroundExample() {
  const renderItem = useCallback<SortableGridRenderItem<string>>(
    ({ item }) => <Item item={item} />,
    []
  );

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Sortable.Grid
        columnGap={10}
        columns={1}
        data={DATA}
        renderItem={renderItem}
        rowGap={10}
      />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: WHITE_COLOR,
    borderRadius: RADIUS_SM,
    paddingHorizontal: SPACING_SM,
    paddingVertical: SPACING_XS
  },
  buttonText: {
    color: PRIMARY_COLOR,
    fontSize: 12,
    fontWeight: '600'
  },
  card: {
    backgroundColor: PRIMARY_COLOR,
    borderRadius: RADIUS_MD,
    justifyContent: 'center',
    overflow: 'hidden',
    padding: SPACING_SM,
    width: '100%'
  },
  container: {
    padding: SPACING_MD,
    paddingTop: 60
  },
  content: {
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  itemText: {
    color: WHITE_COLOR,
    fontSize: 16,
    fontWeight: '600',
    lineHeight: 24
  }
});

[jamesofficer]

Thanks for the quick reply and appreciate you including the example too. I did as you suggested and just added a delay and tweaked it a little, it's not 100% perfect, but close enough!

This would be something cool to have customisable one day in the future though! (If possible)

[MatiPl01]

This would be something cool to have customisable one day in the future though! (If possible)

Yeah, I have to drop the Old Architecture support and stick to the New one where layout transitions and animations are more stable. I should be able to rewrite the implementation then in a way that will make this possible.