Example of Animated re-ordering of a list in React Native using React Spring

workspace-screen.js

/* NPM - Node Package Manage */
import React from 'react';
import { View, ScrollView } from 'react-native';
import { useTransition, animated } from "@react-spring/native";
/** Constants */
const AnimatedView = animated(View);
const ListItemHeight = 190;

export function WorkspaceScreen() {
  const edges = [...];
  const transitions = useTransition(
    edges?.map((data, i) => ({ ...data, y: -(i * ListItemHeight) })),
    {
      key: (item) => item.id,
      from: { height: 0, opacity: 0 },
      leave: { height: 0, opacity: 0 },
      enter: ({ y, height }) => ({ y, height, opacity: 1 }),
      update: ({ y, height }) => ({ y, height }),
    }
  );

  return (
    <ScrollView contentContainerStyle={{ minHeight: edges.length * ListItemHeight }}>
      {transitions((style, item, _, index) => (
        <AnimatedView style={{
          zIndex: edges.length - index,
          bottom: style.y,
          height: style.height,
          opacity: style.opacity
        }} key={item.id}>
          <MyListItem ... />
        </AnimatedView>
      ))}
    </ScrollView>
  );
}