Setting width of container returns unexpected result-CodePudding

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.

Why is <View style={styles.thisAffectsCardWidth} /> not horizontally in the center of the card?
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%`?

CodePudding user response：

Try removing alignItems: 'center' from the contentContainerStyle and add width: '100%' Eg: contentContainerStyle={{ width: '100%' }} and add alignItems: 'center' to the card styles.

https://snack.expo.dev/@charinda04/forlorn-cereal

Since you haven't set the contentContainerStyle width of the flatList, Width changes with thisAffectsCardWidth width.