skip to Main Content

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

2

Answers


  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.

    Login or Signup to reply.
  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>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search