fix: Respect Sortable.Flex alignItems before items are measured

Sortable.Flex put `alignSelf: 'flex-start'` on every item to stop them
stretching (stretched items would be measured at the wrong size, which
breaks the absolute layout). But `alignSelf` overrides the container's
`alignItems`, so a user-provided `alignItems` (e.g. 'center') was ignored
until the component switched to its absolute layout after measuring,
causing a visible jump with differently-sized items.

Prevent stretching on the container instead: fall back to `alignItems:
'flex-start'` only when no specific `alignItems` is set (or it's
'stretch'), and drop the per-item `alignSelf` override. The provided
`alignItems` now applies from the first render.

Author: MatiPl01

packages/react-native-sortables/src/components/SortableFlex.tsx

@@ -1,6 +1,5 @@
 import { memo, useMemo } from 'react';
 import type { ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native';
 import { runOnUI, useAnimatedStyle } from 'react-native-reanimated';
 
 import { DEFAULT_SORTABLE_FLEX_PROPS } from '../constants';
@@ -224,7 +223,11 @@ function SortableFlexComponent({
         }
       : {
           alignContent,
-          alignItems,
+          // Avoid the default `stretch` so items keep their measured size
+          alignItems:
+            alignItems === undefined || alignItems === 'stretch'
+              ? 'flex-start'
+              : alignItems,
           flexDirection,
           flexWrap,
           justifyContent
@@ -235,17 +238,9 @@ function SortableFlexComponent({
     <SortableContainer
       {...rest}
       containerStyle={[baseContainerStyle, animatedContainerStyle]}
-      itemStyle={styles.styleOverride}
       onLayout={runOnUI(handleContainerMeasurement)}
     />
   );
 }
 
-const styles = StyleSheet.create({
-  styleOverride: {
-    // This is needed to prevent items from stretching (which is default behavior)
-    alignSelf: 'flex-start'
-  }
-});
-
 export default SortableFlex;