How to align flexwrap to the left? - react-native

Question

The component that was left alone should be on the left. I tried to use align-items: 'flex-start', but it didn't work.
I'm trying to make a responsive layout where it fits several components in line, depending on the dimensions of the user's device.
<View style={{flex: 1}}>
<ScrollView showsHorizontalScrollIndicator={false}>
<View
style={{
justifyContent: 'space-evenly',
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
}}>
<View
style={{
backgroundColor: 'red',
width: width / 2.5,
height: 200,
justifyContent: 'center',
alignItems: 'center',
}}>
<Image
style={{
width: 100,
height: 100,
}}
source={{
uri:
'https://images-na.ssl-images-amazon.com/images/I/51JZpJPClEL._AC_SL1000_.jpg',
}}
/>
<Text>Xiaomi Redmi note 8</Text>
</View>
</View>
</ScrollView>
</View>

Answer 1

Hello :) I would suggest doing the following:
calculate the left/right margin according to the container's & item's width
const marginHorizontal = (width / 2.5) / 6; // where 6 is 2 blocks in a row multiplying 3 spaces (left-right-center)
use the space-between & marginHorizontal applied to the container:
<View style={{flex: 1}}>
<ScrollView showsHorizontalScrollIndicator={false}>
<View
style={{
justifyContent: 'space-between',
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
marginHorizontal,
}}>
<View
style={{
backgroundColor: 'red',
width: width / 2.5,
height: 200,
justifyContent: 'center',
alignItems: 'center',
}}>
<Image
style={{
width: 100,
height: 100,
}}
source={{
uri:
'https://images-na.ssl-images-amazon.com/images/I/51JZpJPClEL._AC_SL1000_.jpg',
}}
/>
<Text>Xiaomi Redmi note 8</Text>
</View>
</View>
</ScrollView>
</View>
let me know if it helped or not ;)