Support overriding backgroundColor for SortableListItem (#3255)

demo/src/screens/componentScreens/SortableListScreen.tsx

@@ -114,6 +114,7 @@ const SortableListScreen = () => {
         <SortableList
           flexMigration
           data={items}
+          // itemProps={{backgroundColor: 'transparent'}}
           renderItem={renderItem}
           keyExtractor={keyExtractor}
           onOrderChange={onOrderChange}

src/components/sortableList/SortableListContext.ts

@@ -1,23 +1,23 @@
 import {createContext} from 'react';
-import {ViewProps} from 'react-native';
+import type {ViewProps, FlatListProps} from 'react-native';
 import {SharedValue} from 'react-native-reanimated';
 import type {Dictionary} from '../../typings/common';
-import {Data, SortableListItemProps} from './types';
+import {Data, OrderChangeInfo, SortableListItemProps, SortableListProps} from './types';
 
 export interface SortableListContextType<ItemT extends SortableListItemProps> {
   data: Data<ItemT>;
   itemsOrder: SharedValue<string[]>;
   lockedIds: SharedValue<Dictionary<boolean>>;
-  onChange: () => void;
+  onChange: (info: OrderChangeInfo) => void;
   itemSize: SharedValue<number>;
-  horizontal?: boolean;
+  horizontal?: FlatListProps<ItemT>['horizontal'];
   onItemLayout: ViewProps['onLayout'];
   enableHaptic?: boolean;
   scale?: number;
-  itemProps?: {margins?: {marginTop?: number; marginBottom?: number; marginLeft?: number; marginRight?: number}};
+  itemProps?: SortableListProps<ItemT>['itemProps'];
 }
 
 // @ts-ignore
-const SortableListContext = createContext<SortableListContextType>({});
+const SortableListContext = createContext<SortableListContextType<SortableListItemProps>>({});
 
 export default SortableListContext;

src/components/sortableList/SortableListItem.tsx

@@ -52,7 +52,7 @@ const SortableListItem = (props: Props) => {
   } = useContext(SortableListContext);
   const {getTranslationByIndexChange, getItemIndexById, getIndexByPosition, getIdByItemIndex} = usePresenter();
   const id: string = data[index].id;
-  const locked: boolean = data[index].locked;
+  const locked: boolean = data[index].locked ?? false;
   const initialIndex = useSharedValue<number>(map(data, 'id').indexOf(id));
   const lastSwap = useSharedValue({from: -1, to: -1});
   const currIndex = useSharedValue(initialIndex.value);
@@ -172,7 +172,7 @@ const SortableListItem = (props: Props) => {
       : defaultItemShadow.value;
 
     return {
-      backgroundColor: LIST_ITEM_BACKGROUND, // required for elevation to work in Android
+      backgroundColor: itemProps?.backgroundColor ?? LIST_ITEM_BACKGROUND, // required for elevation to work in Android
       zIndex,
       transform: [horizontal ? {translateX: translation.value} : {translateY: translation.value}, {scale}],
       opacity,

src/components/sortableList/index.tsx

@@ -84,7 +84,8 @@ const SortableList = <ItemT extends SortableListItemProps>(props: SortableListPr
       enableHaptic,
       scale
     };
-  }, [data]);
+  }, [data, onChange]);
+
   return (
     <GestureHandlerRootView style={flexMigration ? styles.container : undefined}>
       <SortableListContext.Provider value={context}>

src/components/sortableList/types.ts

@@ -8,7 +8,7 @@ export interface SortableListItemProps {
 }
 
 // Internal
-export type Data<ItemT extends SortableListItemProps> = FlatListProps<ItemT>['data'];
+export type Data<ItemT extends SortableListItemProps> = ArrayLike<ItemT>;
 export type OrderChangeInfo = {from: number, to: number};
 
 export interface SortableListProps<ItemT extends SortableListItemProps>
@@ -31,7 +31,10 @@ export interface SortableListProps<ItemT extends SortableListItemProps>
   /**
    * Extra props for the item
    */
-  itemProps?: {margins?: {marginTop?: number; marginBottom?: number; marginLeft?: number; marginRight?: number}};
+  itemProps?: {
+    backgroundColor?: string; 
+    margins?: {marginTop?: number; marginBottom?: number; marginLeft?: number; marginRight?: number}
+  };
   /**
    * List forwarded ref.
    */