Fit React Native Paper Cards in All Screen Width

Question

Using two React Native Cards align horizontally. Cards are fitting differently in different phone screen. First image is android emulator Pixel 3a API 34 and 2nd image is from physical device OnePlus Nord. I am new in React Native. Tried to change different widths for cards and View. Also tried flexShrink:1 property. Any style property which make the cards fit in any phone screen with equal blank space.

Here is view part:

<View style={styles.container}>
<ImageBackground source={require('../../assets/images/gsdl_logo1.png')} imageStyle={{opacity:0.3}} style={styles.image}>

<Text style={styles.title}>Test</Text>
<View style={styles.space}></View>

<View style={{flexDirection:"row"}}>



{/* <View> */}
<TouchableRipple
        style={styles.ripple}
        onPress={() => {}}
        rippleColor="rgba(0, 0, 0, .32)">
<Card style={styles.card}> 
        <Card.Content style={styles.cardContent}> 
            <Title style={styles.cardContent1}>Test</Title> 
        </Card.Content> 
        <Card.Cover source={{ uri: 'https://gsdl.org.in/images/health&fw.png' }} style={styles.cardImage}/> 
       {/* <Card.Content> 
        <Paragraph>A Computer Science portal for Geeks</Paragraph> 
        </Card.Content>  */}
        {/* <Card.Actions> 
          <Button>Visit</Button> 
        </Card.Actions>  */}
      </Card>

      </TouchableRipple>
  {/* </View> */}

  <View style={styles.space1}></View>

  {/* <View> */}
<TouchableRipple
        style={styles.ripple}
        onPress={() => {}}
        rippleColor="rgba(0, 0, 0, .32)">


      <Card style={styles.card}> 
        <Card.Content style={styles.cardContent}> 
            <Title style={styles.cardContent1}>Test</Title> 
        </Card.Content> 
        <Card.Cover source={{ uri: 'https://gsdl.org.in/images/water.jpeg' }} style={styles.cardImage}/> 
       {/* <Card.Content> 
        <Paragraph>A Computer Science portal for Geeks</Paragraph> 
        </Card.Content>  */}
        {/* <Card.Actions> 
          <Button>Visit</Button> 
        </Card.Actions>  */}
      </Card>

      </TouchableRipple>
  {/* </View> */}

      </View>

      </ImageBackground>

      

</View>

Here is the style part:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    
    // padding: 24,
    backgroundColor: '#eaeaea',
    // marginTop: 56,
    // paddingVertical: 85,
    color: '#20232a',
    textAlign: 'center',
    fontSize: 30,
    fontWeight: 'bold',
    // height:1000
  
  },
  title: {
    marginTop: 16,
    paddingVertical: 8,
    borderWidth: 4,
    borderColor: '#20232a',
    borderRadius: 6,
    backgroundColor: '#61dafb',
    color: '#20232a',
    textAlign: 'center',
    fontSize: 30,
    fontWeight: 'bold',
  },

  space: {
    width: 20, // or whatever size you need
    height: 20,
  },

  space1: {
    width: 20, // or whatever size you need
    // height: 20,
  },

  card :{ 
    display: "flex", flexWrap: "wrap",
    flexShrink:1,
    // alignContent:'center',
    // borderRadius: 100,
    // ssssmarginRight:100,
    width: 180, // or whatever size you need
    // height: 160,
    // width: "90%",
    fontSize: 30,
    fontWeight: 'bold',
    // backgroundColor: '#61dafb',
    
},
cardImage :{
  height:150,
  width:180
},
cardContent:
{
  height:50,
  padding:0

},
cardContent1:
{
  
  fontSize: 13,
  fontWeight: 'bold',
},

  ripple: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },

  image: {
    flex: 1,
    resizeMode: 'cover', // or 'contain' 
    // opacity: 0.5
    // justifyContent: 'center',
    // alignItems: 'center',
  }
});

How to change style so that the gaps between cards remain same for all type of screens?

Answer 1

I would suggest you use percentages to define the width of the cards, since hard numbers are usually the reason UI breaks, also try to develop UI on the smallest possible device that you support which easily scales into big devices.

If you want to provide device dimension-specific sizes to components you can use any one the following:

1. react-native-responsive-screen

2. React Native's useWindowDimensions hook

   const {height, width} = useWindowDimensions();

   card: {width: width/3},