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

CodePudding user response：

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.

CodePudding user response：

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>