• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

112
Views
Setting width of container returns unexpected result

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%`?
almost 3 years ago · Santiago Trujillo
1 answers
Answer question

0

  1. 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

  1. Since you haven't set the contentContainerStyle width of the flatList, Width changes with thisAffectsCardWidth width.
almost 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error