CODEWITHSUNDEEP
react-nativeflexboxreact-native-flexbox
Juri Bojka
Juri Bojka

Reputation: 415

react native flexbox stretch issue

In react native i want to achieve this effect enter image description here

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: enter image description here

Please help

Upvotes: 0

Views: 3515

Answers (1)

Ishita Sinha
Ishita Sinha

Reputation: 2294

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.

Upvotes: 2

Related Questions