Feat/sortable list no scroll (#1958)

* Initial commit

* Simlpify AnimatedFlatListProps

* Fix some prop

* A little more refactoring

* Rename

* Move extra dragged style to the user (this solves some issues)

* Increase threshold

* Properly export SortableListItemDecorator

* Fix docs, add API file and disable dragging while scrolling by default

* Fix threshold criteria (mostly)

* Add scrollWhileDragging to the screen

* Fix screen visual bug on Android

* Fix docs

* Remove scroll related amd .d files

* Refactor

* Refactor

* New implementation

* Revert old changes

* Oops

* Move GestureHandlerRootView to the component

* Move onItemLayout impl to list

* Add haptic

* Improve example \ default UI

* Fix margin

Co-authored-by: Ethan Sharabi <ethans@wix.com>

Author: M-i-k-e-l

demo/src/assets/icons/drag.png

@@ -3,10 +3,12 @@ import {Assets, Colors, Typography, Spacings, Incubator} from 'react-native-ui-l
 export const loadDemoConfigurations = () => {
   Assets.loadAssetsGroup('icons.demo', {
     chevronDown: require('./assets/icons/chevronDown.png'),
+    chevronRight: require('./assets/icons/chevronRight.png'),
     add: require('./assets/icons/add.png'),
     camera: require('./assets/icons/cameraSelected.png'),
     close: require('./assets/icons/close.png'),
     dashboard: require('./assets/icons/dashboard.png'),
+    drag: require('./assets/icons/drag.png'),
     image: require('./assets/icons/image.png'),
     plus: require('./assets/icons/plus.png'),
     refresh: require('./assets/icons/refresh.png'),

demo/src/assets/icons/drag@1.5x.png

@@ -111,6 +111,9 @@ module.exports = {
       get SkeletonViewScreen() {
         return require('./screens/componentScreens/SkeletonViewScreen').default;
       },
+      get SortableListScreen() {
+        return require('./screens/componentScreens/SortableListScreen').default;
+      },
       get StepperScreen() {
         return require('./screens/componentScreens/StepperScreen').default;
       },

demo/src/assets/icons/drag@2x.png

@@ -83,7 +83,8 @@ export const navigationData = {
       {title: 'Basic List', tags: 'basic list', screen: 'unicorn.lists.BasicListScreen'},
       {title: 'Contacts List', tags: 'list contacts', screen: 'unicorn.lists.ContactsListScreen'},
       {title: 'Conversation List', tags: 'list conversation', screen: 'unicorn.lists.ConversationListScreen'},
-      {title: 'Drawer', tags: 'drawer', screen: 'unicorn.components.DrawerScreen'}
+      {title: 'Drawer', tags: 'drawer', screen: 'unicorn.components.DrawerScreen'},
+      {title: 'SortableList', tags: 'sortable list drag', screen: 'unicorn.components.SortableListScreen'}
     ]
   },
   LayoutsAndTemplates: {

demo/src/assets/icons/drag@3x.png

@@ -0,0 +1,64 @@
+import _ from 'lodash';
+import React, {useCallback} from 'react';
+import {StyleSheet} from 'react-native';
+import {SortableList, View, TouchableOpacity, Text, Icon, Assets, Colors} from 'react-native-ui-lib';
+import {renderHeader} from '../ExampleScreenPresenter';
+
+interface Item {
+  originalIndex: number;
+}
+
+const data = _.times(30, index => {
+  return {
+    originalIndex: index
+  };
+});
+
+const SortableListScreen = () => {
+  const keyExtractor = useCallback((item: Item) => {
+    return `${item.originalIndex}`;
+  }, []);
+
+  const onOrderChange = useCallback((newData: Item[]) => {
+    console.log('New order:', newData);
+  }, []);
+
+  const renderItem = useCallback(({item, index: _index}: {item: Item; index: number}) => {
+    return (
+      <TouchableOpacity
+        style={styles.itemContainer}
+        onPress={() => console.log('Original index is', item.originalIndex)}
+        // overriding the BG color to anything other than white will cause Android's elevation to fail
+        // backgroundColor={Colors.red30}
+        centerV
+        marginH-page
+      >
+        <View flex row spread centerV>
+          <Icon source={Assets.icons.demo.drag} tintColor={Colors.$iconDisabled}/>
+          <Text center $textDefault>
+            {item.originalIndex}
+          </Text>
+          <Icon source={Assets.icons.demo.chevronRight} tintColor={Colors.$iconDefault}/>
+        </View>
+      </TouchableOpacity>
+    );
+  }, []);
+
+  return (
+    <View flex bg-$backgroundDefault>
+      {renderHeader('Sortable List', {'margin-10': true})}
+      <View flex useSafeArea>
+        <SortableList data={data} renderItem={renderItem} keyExtractor={keyExtractor} onOrderChange={onOrderChange}/>
+      </View>
+    </View>
+  );
+};
+
+export default SortableListScreen;
+const styles = StyleSheet.create({
+  itemContainer: {
+    height: 52,
+    borderColor: Colors.$outlineDefault,
+    borderBottomWidth: 1
+  }
+});

demo/src/assets/icons/drag@4x.png

@@ -46,6 +46,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.SkeletonViewScreen', () => require('./SkeletonViewScreen').default);
   registrar('unicorn.components.SliderScreen', () => require('./SliderScreen').default);
   registrar('unicorn.components.SortableGridListScreen', () => require('./SortableGridListScreen').default);
+  registrar('unicorn.components.SortableListScreen', () => require('./SortableListScreen').default);
   registrar('unicorn.components.StackAggregatorScreen', () => require('./StackAggregatorScreen').default);
   registrar('unicorn.components.StepperScreen', () => require('./StepperScreen').default);
   registrar('unicorn.components.SwitchScreen', () => require('./SwitchScreen').default);