flexwrap: 'wrap' items padding issue in React Native

Question

I have an issue that I wasn't able to solve. Take a look at this screenshot:

The code that renders the Utility & Sequences buttons is the following:

<Fragment>
    <Text style={styles.sectionTitle}>Utility</Text>
    <View style={styles.buttonContainer}>
        <Button onPress={this.readErrorObject} style={styles.button} title='Get Error' />
        <Button onPress={this.readDump} style={styles.button} title='Read Dump' />
        <Button onPress={this.readLog} style={styles.button} title='Read Log' />
        <Button onPress={this.clearError} style={styles.button} title='Clear Error' />
    </View>
    <Text style={styles.sectionTitle}>Sequences</Text>
    <View style={styles.buttonContainer}>
       <Button onPress={this.firstRun} style={styles.button} title='First Run' />
       <Button onPress={this.resetDevice} style={styles.button} title='Reset Device' />
    </View>
</Fragment>

The Styles

const styles = StyleSheet.create({
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#000000'
  },
  buttonContainer: {
    flex: 1,
    flexWrap: 'wrap',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignContent: 'space-between'
  },
  button: {
    marginVertical: 8 // DOESN'T WORK
  }
})

When the fourth button falls down to the next line, I want to have a spacing between the new row and the above row. I try adding an style for each button that have a margin, but it makes no difference. I am missing something here? Thanks in advance.

Answer 1

Actually Button from react-native dont have style as prop ( https://facebook.github.io/react-native/docs/button.html ) so you can wrap each button using View and apply style

    <View style={styles.buttonContainer}>
              <View style={{margin:30}}>
              <Button onPress={this.readErrorObject} style={styles.button} title='Get Error' />
              </View>
              <View style={{margin:30}}>
              <Button onPress={this.readDump} style={styles.button} title='Read Dump' />
              </View>
              <View style={{margin:30}}>
              <Button onPress={this.readLog} buttonStyle={styles.button} title='Read Log' />
              </View>
              <View style={{margin:30}}>
              <Button onPress={this.clearError} buttonStyle={styles.button} title='Clear Error' />
              </View>
   </View>

or you can use Button form react-native-elements which has buttonStyle ( https://react-native-training.github.io/react-native-elements/docs/button.html#buttonstyle ) as prop. or you can use TouchableOpacity from react-native which has style as a prop.