Skip to content

Commit 5c84117

Browse files
authored
fix: Respect Sortable.Flex alignItems before items are measured (#560)
## Summary `Sortable.Flex` put `alignSelf: 'flex-start'` on every item to stop them stretching — stretched items get measured at the wrong size, which breaks the absolute layout (originally added in the "flex layout flickering" fix, #258). But `alignSelf` on an item **overrides the container's `alignItems`**, so any `alignItems` the user set (e.g. `center`) was silently ignored during the initial (pre-measurement) render and only took effect once the component switched to its absolute layout — a visible "snap" jump, most noticeable with differently-sized items. Stretch-prevention belongs on the **container**, not on each item. This drops the per-item `alignSelf` and instead falls back to `alignItems: 'flex-start'` on the container **only** when no specific `alignItems` is set (or it's `stretch`). Any explicit `alignItems` now applies from the first render, with no jump. ## Repro `<Sortable.Flex alignItems="center">` with children of different heights — before: items start top-aligned and snap to centered after the measurement gate. After: centered immediately. ## Notes The default (no `alignItems`) behaviour is unchanged — items still don't stretch and stay top-aligned. The absolute-layout (post-measurement) path already handled `alignItems` correctly and is untouched. Worth a quick visual check in the example app's Sortable Flex screens.
1 parent 0be8149 commit 5c84117

1 file changed

Lines changed: 2 additions & 10 deletions

File tree

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

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { memo, useMemo } from 'react';
22
import type { ViewStyle } from 'react-native';
3-
import { StyleSheet } from 'react-native';
43
import { runOnUI, useAnimatedStyle } from 'react-native-reanimated';
54

65
import { DEFAULT_SORTABLE_FLEX_PROPS } from '../constants';
@@ -224,7 +223,8 @@ function SortableFlexComponent({
224223
}
225224
: {
226225
alignContent,
227-
alignItems,
226+
// Avoid the default `stretch` so items keep their measured size
227+
alignItems: alignItems ?? 'flex-start',
228228
flexDirection,
229229
flexWrap,
230230
justifyContent
@@ -235,17 +235,9 @@ function SortableFlexComponent({
235235
<SortableContainer
236236
{...rest}
237237
containerStyle={[baseContainerStyle, animatedContainerStyle]}
238-
itemStyle={styles.styleOverride}
239238
onLayout={runOnUI(handleContainerMeasurement)}
240239
/>
241240
);
242241
}
243242

244-
const styles = StyleSheet.create({
245-
styleOverride: {
246-
// This is needed to prevent items from stretching (which is default behavior)
247-
alignSelf: 'flex-start'
248-
}
249-
});
250-
251243
export default SortableFlex;

0 commit comments

Comments
 (0)