justifyContent: 'center' not working React Native - react-native

Question

i want to center the image but it seems the justifyContent: 'center' property is not working as i want
I'm learning about flexbox in react-native
Also, I want to ask how can my code run on many different devices without changing the layout. I code on iphone 14 but when I switch to ipad or iphone se, the layout is changed and almost not as expected.
picture
my code
import React from 'react';
import {Dimensions, Image, Text, View} from 'react-native';
import {colors, sizes, spacing} from '../../constants/config';
import Icon from '../../utils/Icon';
const cardWidth = sizes.width / 3;
const cardHeight = 120;
const CartItem = ({list}) => {
return (
<View style={{flex: 1}}>
{list.map((item, index) => {
return (
<View style={{height: '20%'}} key={index}>
<View
style={{
marginLeft: spacing.l,
marginRight: spacing.l,
backgroundColor: 'white',
height: '90%',
borderRadius: sizes.radius,
}}>
<View style={{flexDirection: 'row'}}>
<View style={{justifyContent: 'center'}}>
<Image
style={{
width: cardWidth,
height: cardHeight,
borderRadius: 12,
marginLeft: spacing.m,
}}
resizeMode="stretch"
source={item.image}
/>
</View>
<View style={{marginTop: spacing.m, marginLeft: spacing.l}}>
<Text style={{marginBottom: 8}}>{item.title}</Text>
<Text>{item.price}</Text>
</View>
</View>
</View>
</View>
);
})}
</View>
);
};
export default CartItem;
this is my desired image

Answer 1

Use alignItems instead of justifyContent.
alignItems controls how children are aligned within the cross axis of their container, so in the case of a row within the vertical axis. justifyContent applies to the main axis, so the horizontal for a row.

Answer 2

you can give justifyContent to the upper view
<View style={{flexDirection: 'row', justifyContent:"center"}}>
<View style={{justifyContent: 'center'}}>
<Text style={{marginBottom: 8}}>Image</Text>
</View>
</View>