How do I create this layout in Flexbox?

Question

I'm trying to create this layout in Flexbox (and React Native) but I can't get it to work. Specifically, the Left and Right buttons refuse to expand to 50% of the width of the container no matter what I do. They are always the size of their content.

I'm using nested containers. The buttons are in a columnar Flex container which is nested in a row Flex container that also contains the image.

Here is my JSX:

  <View style={{
    display: 'flex',
    flex: 1,
    flexDirection: 'column'}}>
      <Image
        style={{flex: 1, zIndex: 1, width: '100%', height: '100%'}}
        resizeMode='cover'
        resizeMethod='resize'
        source={require('./thumbs/barry.jpg')}
      />
      <View style={{
        display: 'flex',
        flexDirection: 'row',
        flex: 0,
        width: '100%',
        height: 100}} >
          <Button style='flex: 1' title="LEFT"  onPress={() => {}} />
          <Button style='flex: 1' title="RIGHT" onPress={() => {}} />
      </View>
  </View>

All replies are much appreciated...

Looks like `Dimensions` might do it for you: https://stackoverflow.com/a/33312563/241153 — serraosays, Mar 27 '18 at 18:54
Thank you but is that really the way to go? Isn't there a way to set the button width to 50% of the container without bothering with the screen width? — Barry Fruitman, Mar 27 '18 at 19:08
I believe the button styles are not formatted correctly. Please try `style={{ flex: 1 }}`. — Julio Feferman, Mar 27 '18 at 19:29
@FacundoCorradini I tried using several values for flexBasis and none worked. Can you suggest a specific value to use? Also, does it matter than I'm using "flex: 0" in the button container? Any other value messes up the vertical distribution. — Barry Fruitman, Mar 27 '18 at 19:39
try removing "flex:0" from the view containing buttons and height from image component — Sachin Agarwal, Mar 28 '18 at 05:58

score 1 · Answer 1 · edited Mar 27 '18 at 20:53

Maybe this will help you:

.container{
  display: flex;
  flex-wrap: wrap;
  width: 500px;
}

.image{
  height: 500px;
  flex-basis: 100%;
  background-color: green;
}

.button{
  box-sizing: border-box;
  flex-basis: 50%;
  height: 100px;
  background-color: red;
  border: solid 1px black;
}

<div class="container">
  <div class="image"></div>
  <div class="button"></div>
  <div class="button"></div>
</div>

If you ever have issues with using flexbox, use this resource, it's really helpful for solving flexbox issues. Hopefully you can solve your problem now.

score 0 · Answer 2 · answered Mar 27 '18 at 21:32

You dont want to use height properties, but using it is a good way to achieve what you want. Here is an example:

You set the image to 90% of the screen height and the buttons container to 10%.

Each button has 50% width

HTML

<div class="container">
  <div class="image"></div>
  <div class="buttons-container">
    <button>Action 1</button><button>Action 2</button>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

body, html {
  height: 100%;
  margin: 0;
}


.container {
  position: relative;
  width: 100%;
  height: 100%;

}

.container .image {
  width: 100%;
  height: 90%;
  background-image: url('path/to/image');
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

.container .buttons-container {
  display: flex;
  height: 10%;
}

.container .buttons-container button {
  width: 50%;
}

Check the example working - https://codepen.io/kaiten/pen/YaYqZO

score 0 · Answer 3 · answered Mar 28 '18 at 05:33

In consideration of the fact that your code is required in react-native and not react, try this piece of code

<View style={flex:1}>
  <Image source={require(path)} style={flex:1}>
  <View style={flex:1}>
    <View style={flex:1}>
      <Button style={flex:1,height:100} title='Left'/>
    </View>
    <View style={flex:1}>
        <Button style={flex:1,height:100} title='Right'/>
    </View>
  </View>
</View>

Explanation : In react-native you do not need to mention display:flex in your styles since react-native always uses flexBox. When you do flex:1 your container always takes the 100% of the width and the height of it's parents hence doing flex:1,height:'100%',width:'100%' is invalid.

In your

<View style={{
        display: 'flex',
        flexDirection: 'row',
        flex: 0,
        width: '100%',
        height: 100}} >

you've done flex:0 so this is the equivalent of width:'0%',height:'0%'

Hope this gives you some clarity on the code required.

PS: There might be a possibility that the code i wrote might not work properly due to the <Image> width and height. For eg : If the height of the image decreases and you've given fixed height to your buttons then there might be some white space below your buttons since the height of the <Image> plus the height of the <Button> will not add up to the height of the screen visible.

score 0 · Answer 4 · answered Mar 28 '18 at 06:43

It seems like Button component do not take style as prop if we look at the codebase of React Native. So the problem is button is not accepting style. So I wrapped button with a view. Here is sample of working code:

<View style={{
    flex: 1,
  }}>
    <Image
      style={{ flex:1, zIndex: 1, width: '100%', height: '100%'}}
      resizeMode='cover'
      resizeMethod='resize'
      source={require('./thumbs/barry.jpg')}
    />
    <View style={{
      flexDirection: 'row',
      height: 100}} >
      <View style={{flex:1}}>
      <Button title="LEFT"  onPress={() => {}} />
      </View>
      <View style={{flex:1}}>
        <Button title="RIGHT"  onPress={() => {}} />
      </View>
    </View>
  </View>

How do I create this layout in Flexbox?

4 Answers4