react native flexbox stretch issue

Question

In react native i want to achieve this effect

of course all buttons should have same width and height. For that i use flex box. How can i do it with flexbox ? I try:

const styles = StyleSheet.create({
  mainView: {
     flex: 1,
     flexDirection: 'column',
     alignItems: 'stretch'
  },
  rows: {
      flex: 1,
      flexDirection: 'row',
  },
  buttons: {
      flex: 1,
  }
});


export default class Home extends Component {
render() {
    return (
      <View style={styles.mainView}>
        <View style={styles.rows}>
          <View style={styles.buttons}><Button title="aaa"/></View>
          <View style={styles.buttons}><Button title="aaa"/></View>
        </View>
        <View style={styles.rows}>
          <View style={styles.buttons}><Button title="aaa"/></View>
          <View style={styles.buttons}><Button title="aaa"/></View>
        </View>
        <View style={styles.rows}>
          <View style={styles.buttons}><Button title="aaa"/></View>
          <View style={styles.buttons}><Button title="aaa"/></View>
        </View>
      </View>
    );
}

}

but that gave me:

Please help

`alignItems: 'stretch'`set to `row` should fix that...and in standard Flexbox this is the default — Asons, Nov 16 '17 at 08:25

score 2 · Accepted Answer · answered Nov 16 '17 at 08:54

If you set background colors to all your styles, you will see that your layout is working, except that you cannot change the height of Button in React Native. Use a TouchableOpacity or a TouchableHighlight instead of Button, and the "button" will fill the whole view instead of sticking to the top.

react native flexbox stretch issue

1 Answers1