Add flexMigration to SortableList and SortableGridList components (#3067)

Author: ethanshar

demo/src/screens/componentScreens/SortableGridListScreen.tsx

@@ -100,6 +100,7 @@ class SortableGridListScreen extends Component {
         </View>
         <View flex>
           <SortableGridList
+            flexMigration
             data={items}
             renderItem={this.renderItem}
             // numColumns={2}

demo/src/screens/componentScreens/SortableListScreen.tsx

@@ -112,6 +112,7 @@ const SortableListScreen = () => {
       </View>
       <View flex useSafeArea>
         <SortableList
+          flexMigration
           data={items}
           renderItem={renderItem}
           keyExtractor={keyExtractor}

src/components/sortableGridList/index.tsx

@@ -1,9 +1,10 @@
-import React, {useCallback} from 'react';
+import React, {useCallback, useEffect} from 'react';
 import {StyleSheet, ScrollView, ListRenderItemInfo} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {useSharedValue} from 'react-native-reanimated';
 import _ from 'lodash';
 import {useDidUpdate} from 'hooks';
+import {LogService} from 'services';
 
 import SortableItem from './SortableItem';
 import usePresenter from './usePresenter';
@@ -16,12 +17,20 @@ function generateItemsOrder(data: SortableGridListProps['data']) {
 }
 
 function SortableGridList<T = any>(props: SortableGridListProps<T>) {
-  const {renderItem, onOrderChange, ...others} = props;
+  const {renderItem, onOrderChange, flexMigration, ...others} = props;
 
   const {itemContainerStyle, numberOfColumns, listContentStyle} = useGridLayout(props);
   const {itemSpacing = DEFAULT_ITEM_SPACINGS, data} = others;
   const itemsOrder = useSharedValue<ItemsOrder>(generateItemsOrder(data));
 
+  // TODO: Remove once flexMigration migration is completed
+  useEffect(() => {
+    if (flexMigration === undefined) {
+      LogService.error(`SortableGridList "flexMigration" prop is a temporary migration flag to transition to a flex behavior for SortableList. 
+      Please make sure to pass it and check your UI before it becomes true by default`);
+    }
+  }, []);
+
   useDidUpdate(() => {
     itemsOrder.value = generateItemsOrder(data);
   }, [data]);
@@ -61,7 +70,7 @@ function SortableGridList<T = any>(props: SortableGridListProps<T>) {
   [data]);
 
   return (
-    <GestureHandlerRootView>
+    <GestureHandlerRootView style={flexMigration ? styles.container : undefined}>
       <ScrollView contentContainerStyle={[styles.listContent, listContentStyle]}>
         {_.map(data, (item, index) => _renderItem({item, index} as ListRenderItemInfo<ItemProps<T>>))}
       </ScrollView>
@@ -73,6 +82,9 @@ export {SortableGridListProps};
 export default SortableGridList;
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
   listContent: {
     flexWrap: 'wrap',
     flexDirection: 'row'

src/components/sortableGridList/sortableGridList.api.json

@@ -22,6 +22,11 @@
       "name": "extraData",
       "type": "any",
       "description": "Pass any extra data that should trigger a re-render"
+    },
+    {
+      "name": "flexMigration",
+      "type": "boolean",
+      "description": "A temporary migration flag for enabling flex on the list's container (like it should be by default)"
     }
   ],
   "snippet": [

src/components/sortableGridList/types.ts

@@ -12,6 +12,10 @@ export interface SortableGridListProps<T = any> extends GridListBaseProps, Scrol
   renderItem: FlatListProps<ItemProps<T>>['renderItem'];
   onOrderChange?: (newData: ItemProps<T>[], newOrder: ItemsOrder) => void;
   extraData?: any;
+  /**
+   * Temporary migration flag for enabling flex on the container of the list (like it should be by default)
+   */
+  flexMigration?: boolean;
 }
 
 export interface SortableItemProps {

src/components/sortableList/SortableList.api.json

@@ -35,6 +35,11 @@
       "name": "itemProps",
       "type": "{margins?: {marginTop?: number; marginBottom?: number; marginLeft?: number; marginRight?: number}}",
       "description": "Extra props for the item."
+    },
+    {
+      "name": "flexMigration",
+      "type": "boolean",
+      "description": "A temporary migration flag for enabling flex on the list's container (like it should be by default)"
     }
   ],
   "snippet": [

src/components/sortableList/index.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {map, mapKeys, filter, reduce} from 'lodash';
-import React, {useMemo, useCallback} from 'react';
-import {FlatList, LayoutChangeEvent} from 'react-native';
+import React, {useMemo, useCallback, useEffect} from 'react';
+import {StyleSheet, FlatList, LayoutChangeEvent} from 'react-native';
 import {useSharedValue} from 'react-native-reanimated';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
+import {LogService} from 'services';
 import SortableListContext from './SortableListContext';
 import SortableListItem, {DEFAULT_LIST_ITEM_SIZE} from './SortableListItem';
 import {useDidUpdate, useThemeProps} from 'hooks';
@@ -26,12 +27,21 @@ function generateLockedIds<ItemT extends SortableListItemProps>(data: SortableLi
 
 const SortableList = <ItemT extends SortableListItemProps>(props: SortableListProps<ItemT>) => {
   const themeProps = useThemeProps(props, 'SortableList');
-  const {data, onOrderChange, enableHaptic, scale, itemProps, horizontal, listRef, ...others} = themeProps;
+  const {data, onOrderChange, enableHaptic, scale, itemProps, horizontal, listRef, flexMigration, ...others} =
+    themeProps;
 
   const itemsOrder = useSharedValue<string[]>(generateItemsOrder(data));
   const lockedIds = useSharedValue<Dictionary<boolean>>(generateLockedIds(data));
   const itemSize = useSharedValue<number>(DEFAULT_LIST_ITEM_SIZE);
 
+  // TODO: Remove once flexMigration migration is completed 
+  useEffect(() => {
+    if (flexMigration === undefined) {
+      LogService.error(`SortableList "flexMigration" prop is a temporary migration flag to transition to a flex behavior for SortableList. 
+      Please make sure to pass it and check your UI before it becomes true by default`);
+    }
+  }, []);
+
   useDidUpdate(() => {
     itemsOrder.value = generateItemsOrder(data);
   }, [data]);
@@ -76,7 +86,7 @@ const SortableList = <ItemT extends SortableListItemProps>(props: SortableListPr
     };
   }, [data]);
   return (
-    <GestureHandlerRootView>
+    <GestureHandlerRootView style={flexMigration ? styles.container : undefined}>
       <SortableListContext.Provider value={context}>
         <FlatList
           {...others}
@@ -91,4 +101,10 @@ const SortableList = <ItemT extends SortableListItemProps>(props: SortableListPr
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
 export default SortableList;

src/components/sortableList/types.ts

@@ -35,4 +35,8 @@ export interface SortableListProps<ItemT extends SortableListItemProps>
    * List forwarded ref.
    */
   listRef?: ForwardedRef<FlatList<ItemT>>
+  /**
+   * Temporary migration flag for enabling flex on the container of the list (like it should be by default)
+   */
+  flexMigration?: boolean;
 }