[RNMobile] BlockDraggable component (#39617)

* Use animated scroll handler in KeyboardAwareFlatList

* Add hook for scrolling the block list while dragging

* Improve scroll animation in useScrollWhenDragging

* Add draggable chip component

* Add block draggable component

* Remove icon prop from draggable chip component

* Add draggable placeholder

* Fix draggable chip location

* Wrap BlockListItemCell with BlockDraggable

* Fix block draggable placeholder style

* Animate scale property instead of opacity of draggable chip

* Fix draggable placeholder container height calculation

* Fix BlockDraggable height animation

* Move draggable to BlockDraggableWrapper

* Disable isDragging when long-press gesture ends

* Fix onLayout calculation in block list item cell

* Add findBlockLayoutByPosition helper

* Set up dragging block by position

* Remove animate scroll velocity

* Remove useScrollWhenDragging hook

This hook will be introduced in a separate PR

* Remove react-native-reanimated mock

* Rename CHIP_OFFSET_TO_TOUCH_POSITION constant

* Remove unused shared values of chip component

* Stop dragging when no block is found

* Fix drag position calculation

* Update html text input styles

* Unify container component within html text input

* Use only a single client id in block draggable

* Add documentation to block draggable components

* Add documentation to block draggable chip component

* Add documentation to findBlockLayoutByPosition

* Update scrollOffsetTarget calculation

* Fix typos in block draggable

* Add draggable wrapper container style

* Add dark mode styles for draggable chip

* Add dark mode styles for block draggable

* Get container height from blocks layout data

* Replace inline callback functions with useCallback hook

* Update collapse/expand animation when dragging a block

* Force draggable chip to be displayed upfront

* Remove refs from dependencies arrays

References can be omitted from the dependencies arrays since React guarantees that they are inmutable.

packages/block-editor/src/components/block-draggable/draggable-chip.native.js

@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { dragHandle } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { getBlockType } from '@wordpress/blocks';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+import styles from './style.scss';
+import { store as blockEditorStore } from '../../store';
+
+const shadowStyle = {
+	shadowColor: '#000',
+	shadowOffset: {
+		width: 0,
+		height: 2,
+	},
+	shadowOpacity: 0.25,
+	shadowRadius: 3.84,
+
+	elevation: 5,
+};
+
+/**
+ * Block draggable chip component
+ *
+ * @return {JSX.Element} Chip component.
+ */
+export default function BlockDraggableChip() {
+	const containerStyle = usePreferredColorSchemeStyle(
+		styles[ 'draggable-chip__container' ],
+		styles[ 'draggable-chip__container--dark' ]
+	);
+
+	const { blockIcon } = useSelect( ( select ) => {
+		const { getBlockName, getDraggedBlockClientIds } = select(
+			blockEditorStore
+		);
+		const draggedBlockClientIds = getDraggedBlockClientIds();
+		const blockName = getBlockName( draggedBlockClientIds[ 0 ] );
+
+		return {
+			blockIcon: getBlockType( blockName )?.icon,
+		};
+	} );
+
+	return (
+		<View style={ [ containerStyle, shadowStyle ] }>
+			<BlockIcon icon={ dragHandle } />
+			<BlockIcon icon={ blockIcon } />
+		</View>
+	);
+}