justifyContent: 'center' not working React Native

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