0

I want a gap of say 30px; between all children of my card (View) component.

return (
    <Card style={styles.screen}>
      <Text>...</Text>
      <Text>...</Text>
      <Button title='...' onPress={...} />
    </Card>
  )

const styles = StyleSheet.create({
  screen: {
    maxWidth: '80%',
    width: 200,
    paddingVertical: 30,
    justifyContent: 'center',
    alignItems: 'center',
  },
})

I want all of them to have a space of 30px; between them. How can I do this with React Native's stylesheet?

karel
  • 5,489
  • 46
  • 45
  • 50
Ahmed Shaikh
  • 106
  • 8

1 Answers1

0
<Card style={styles.screen}>
      <Text style={styles.screenText}>
</Card>


const styles = StyleSheet.create({
  screen: {
    maxWidth: '80%',
    width: 200,
    paddingVertical: 30,
    justifyContent: 'center',
    alignItems: 'center',
  },
  screenText: {
    paddingVertical: 30, //just do custom style for each component
  }
})
Esteban Cabrera
  • 46
  • 4
  • Yes, you're right we can do this but this way is not as good. If I have 100 elements so should I add padding in each component? – Ahmed Shaikh Oct 25 '21 at 22:56