From d79bee36376e46b31a0d2ec93450f37624b5b138 Mon Sep 17 00:00:00 2001
From: Jakz <jakzaizzat@gmail.com>
Date: Tue, 23 Apr 2024 08:56:50 +0800
Subject: [PATCH] memoize style

---
 .../components/GalleryEditor/SortableRow.tsx  | 22 +++++++++----------
 .../GalleryEditor/SortableRowList.tsx         | 21 +++++++++---------
 2 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/apps/mobile/src/components/GalleryEditor/SortableRow.tsx b/apps/mobile/src/components/GalleryEditor/SortableRow.tsx
index 6bc2e4d32..774bbaf92 100644
--- a/apps/mobile/src/components/GalleryEditor/SortableRow.tsx
+++ b/apps/mobile/src/components/GalleryEditor/SortableRow.tsx
@@ -1,5 +1,5 @@
 import { FlashList } from '@shopify/flash-list';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useWindowDimensions } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { trigger } from 'react-native-haptic-feedback';
@@ -256,18 +256,18 @@ export function SortableRow({
     };
   }, []);
 
+  const animatedViewStyle = useMemo(() => {
+    return [
+      rStyle,
+      {
+        height: itemHeight,
+      },
+    ];
+  }, [itemHeight, rStyle]);
+
   return (
     <GestureDetector gesture={panGesture}>
-      <Animated.View
-        style={[
-          rStyle,
-          {
-            height: itemHeight,
-          },
-        ]}
-      >
-        {children}
-      </Animated.View>
+      <Animated.View style={animatedViewStyle}>{children}</Animated.View>
     </GestureDetector>
   );
 }
diff --git a/apps/mobile/src/components/GalleryEditor/SortableRowList.tsx b/apps/mobile/src/components/GalleryEditor/SortableRowList.tsx
index 1f3cea894..5678a77e5 100644
--- a/apps/mobile/src/components/GalleryEditor/SortableRowList.tsx
+++ b/apps/mobile/src/components/GalleryEditor/SortableRowList.tsx
@@ -72,18 +72,17 @@ export function SortableRowList({
     return rowOffsets.reduce((totalHeight, row) => totalHeight + row.height, 0);
   }, [rowOffsets]);
 
+  const style = useMemo(() => {
+    return {
+      top: 0,
+      left: 0,
+      right: 0,
+      height: containerHeight,
+    };
+  }, [containerHeight]);
+
   return (
-    <View
-      className="relative"
-      style={[
-        {
-          height: containerHeight,
-          top: 0,
-          left: 0,
-          right: 0,
-        },
-      ]}
-    >
+    <View className="relative" style={style}>
       {rows.map((row, index) => {
         return (
           <SortableRow