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?