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>
);
}
}
Please help