Rork のお気に入り一覧を長押しドラッグで並べ替える — 再レンダリングを抑えた reorderable list と並び順の永続化

// App.tsx（または Rork が生成したルートコンポーネント）
import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
export default function App() {
  return (
    // flex: 1 を付けないとリストが高さゼロで描画されない
    <GestureHandlerRootView style={{ flex: 1 }}>
      <FavoritesScreen />
    </GestureHandlerRootView>
  );
}

// FavoritesScreen.tsx
import { useState, useCallback } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import DraggableFlatList, {
  RenderItemParams,
  ScaleDecorator,
} from 'react-native-draggable-flatlist';
 
type Favorite = { id: string; title: string };
 
const INITIAL: Favorite[] = [
  { id: 'w-001', title: '夜明けの海' },
  { id: 'w-002', title: '霧の杉並木' },
  { id: 'w-003', title: '紅葉の渓谷' },
];
 
export function FavoritesScreen() {
  const [data, setData] = useState<Favorite[]>(INITIAL);
 
  // renderItem は useCallback で固定し、毎レンダリングの再生成を避ける
  const renderItem = useCallback(
    ({ item, drag, isActive }: RenderItemParams<Favorite>) => (
      // ScaleDecorator がドラッグ中のカードをわずかに拡大して掴んでいる感を出す
      <ScaleDecorator>
        <TouchableOpacity
          onLongPress={drag}          // 長押しでドラッグ開始
          disabled={isActive}         // ドラッグ中はタップを無効化
          style={{
            padding: 20,
            backgroundColor: isActive ? '#eef3ff' : '#fff',
          }}
        >
          <Text style={{ fontSize: 16 }}>{item.title}</Text>
        </TouchableOpacity>
      </ScaleDecorator>
    ),
    [],
  );
 
  return (
    <DraggableFlatList
      data={data}
      keyExtractor={(item) => item.id}
      renderItem={renderItem}
      onDragEnd={({ data }) => setData(data)} // 確定後の順番を1回だけ反映
    />
  );
}

// アンチパターン: renderItem 内で毎回インラインの style オブジェクトと
// 無名関数を生成している。item 数が増えるほど効いてくる
renderItem={({ item, drag }) => (
  <TouchableOpacity
    onLongPress={() => drag()}                 // 毎回新しい関数
    style={{ padding: 20, backgroundColor: '#fff' }} // 毎回新しいオブジェクト
  >
    <Text>{item.title}</Text>
  </TouchableOpacity>
)}

// 行を独立コンポーネントにして memo 化する
import React from 'react';
import { StyleSheet, Text, TouchableOpacity } from 'react-native';
 
const styles = StyleSheet.create({
  row: { padding: 20, backgroundColor: '#fff' },
  rowActive: { padding: 20, backgroundColor: '#eef3ff' },
});
 
type RowProps = { title: string; isActive: boolean; onLongPress: () => void };
 
export const FavoriteRow = React.memo(function FavoriteRow({
  title,
  isActive,
  onLongPress,
}: RowProps) {
  return (
    <TouchableOpacity
      onLongPress={onLongPress}
      disabled={isActive}
      style={isActive ? styles.rowActive : styles.row}
    >
      <Text style={{ fontSize: 16 }}>{title}</Text>
    </TouchableOpacity>
  );
});

// storage.ts — MMKV に並び順（id の配列）を保存する
import { MMKV } from 'react-native-mmkv';
 
const storage = new MMKV();
const ORDER_KEY = 'favorites.order.v1'; // 後方互換のためにバージョンを付ける
 
export function saveOrder(ids: string[]): void {
  storage.set(ORDER_KEY, JSON.stringify(ids));
}
 
export function loadOrder(): string[] {
  const raw = storage.getString(ORDER_KEY);
  return raw ? (JSON.parse(raw) as string[]) : [];
}

// 保存された順序を現在のデータに適用する
// - 保存順に存在する項目はその順で並べる
// - 保存順にない新規項目は末尾に追加する
// - 保存順にあるが今は存在しない id は自然に無視される
export function applyOrder<T extends { id: string }>(
  items: T[],
  savedOrder: string[],
): T[] {
  const byId = new Map(items.map((it) => [it.id, it]));
  const ordered: T[] = [];
 
  for (const id of savedOrder) {
    const hit = byId.get(id);
    if (hit) {
      ordered.push(hit);
      byId.delete(id);
    }
  }
  // 残り（=新規項目）を元の順序で末尾に足す
  for (const it of items) {
    if (byId.has(it.id)) ordered.push(it);
  }
  return ordered;
}

import { useEffect, useState, useCallback } from 'react';
import { saveOrder, loadOrder, applyOrder } from './storage';
 
// fetchFavorites() は API/DB からお気に入り本体を取る既存の関数とする
const [data, setData] = useState<Favorite[]>([]);
 
useEffect(() => {
  const items = fetchFavorites();
  setData(applyOrder(items, loadOrder())); // 保存順を適用して初期表示
}, []);
 
const handleDragEnd = useCallback(({ data }: { data: Favorite[] }) => {
  setData(data);
  saveOrder(data.map((it) => it.id)); // 並び順だけを保存
}, []);