react native flexbox stretch issue

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

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.