How to create this layout in Flexbox?

Question

I am trying to create this layout in Flexbox (and React Native), but I cannot get it to work. In particular, the Left and Right buttons do not expand to 50% of the width of the container, regardless of what I do. They are always the size of their contents.

I use nested containers. The buttons are located in the Flex column container, which is nested in the Flex Flex container, which 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>

Answer 1

Perhaps 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>

Run code

flexbox, , flexbox. , .

Answer 2

, - , . :

90% , - 10%.

50%

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%;
}

- https://codepen.io/kaiten/pen/YaYqZO

Answer 3

, -native ,

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

: native-native display:flex , response-native flexBox. flex:1, 100% , , , flex:1,height:'100%',width:'100%' .

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

flex:0, width:'0%',height:'0%'

, .

PS: , , , , - <Image>. : , , , <Image> <Button> .

Answer 4

The Button component doesn't seem to accept the style as prop if we look at the React Native code base. Therefore, the problem is that the button does not accept the style. So I wrapped a button with a view. Here is an example 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>