I have a container <View style={styles.container}> in which is a <FlatList />. An element rendered by the <FlatList /> is a card, styled like this

  card: {
    borderColor: 'green',
    borderWidth: 2,
    borderTopRightRadius: 7,
    borderBottomRightRadius: 7,
    borderBottomLeftRadius: 7,
    backgroundColor: 'white',
    padding: 5,
    width: '100%',
    height: 290,
  },

There is snack here https://snack.expo.dev/90GJaJuPw

Now, there are two problems.

1. Why is <View style={styles.thisAffectsCardWidth} /> not horizontally in the center of the card?
2. Why is the the width of the card <View style={styles.card} /> getting larger, when one adjusts the width of thisAffectsCardWidth from e.g. 50% to 100%`?