Question 34841 in React native Question posted in
The official React Native documentation can be found here.

How can I space evenly in both directions? – React native

I am developing a React Native app using Expo and I am using Styled Components.

At boot, it downloads a list of languages via an API and the flags of those languages are displayed on a selection screen.

I’m using flex-wrap so, right now, I have 6 languages, three rows, 2 flags in each row.

I am trying to figure out how to use flexbox so that the flags are spaced evenly in both directions.

I’m using flex-wrap and get even-spacing on the row.

How do I do the same column-wise, bearing in mind that the quantity of flags is dynamic?

I’d like the screen of languages to have even-spacing around the flags, both vertically and horizontally.

Tags:

2

Answers


  1. 0

    Could adding align-items: center work? Perhaps also setting height: 100vh if you’re making a selection screen.

    section {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
  align-items: center;
}
div {
  box-sizing: border-box;
  padding: 8px;
  width: 50%;
  border: 1px solid black;
  text-align: center;
}
    <section>
  <div>flag</div>
  <div>flag</div>
  <div>flag</div>
  <div>flag</div>
  <div>flag</div>
  <div>flag</div>
</section>
    Login or Signup to reply.
  2. 0

    Ill suggest you doing that via Dimensions,

    const screenWidth  = Dimensions.get("window").width

    Suppose you want to render 3 flags in a row and column can be N

    so each Flag suppose takes up const eachWidth = (screenWidth-(gutterSpace+marginHorizontal))/3

    Now so basically your marginHorizontal can be used as marginVertical so that all things are properly spaced.

    const marginHorizontal = 20;
    const gutterSpace = 10;

    //Flag view

    <View style={{width:eachWidth, margin:marginHorizontal}}/>

    Hope it works, feel free for doubts

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search