Spacing out buttons in a scene in react native

Question

I am working on the main page of my app and I guess I am having trouble understanding designing the scene in react native. I want to add padding between elements or anchor points for certain devices such as an iPad vs a web app. I am using native-base as my UI library for react native because I've heard good things about the library. Here is my render method:

  render() {
if (!this.state.isReady) {
  return <AppLoading />;
}

return (
  <Container>
    <Content>
      <Header>
        <Text>
          Seed2App
        </Text>
      </Header>
      <Button block>
        <Text>
          Search for seeds
        </Text>
      </Button>
      <Button block>
        <Text>
          Plan your garden
        </Text>
      </Button>
      <Button block>
        <Text>
          About the app
        </Text>
      </Button>
    </Content>
  </Container>
);
}

So I've seen a couple examples where they take a button and in the opening bracket use <block style = styles.center> or some other variation, but when I do this I receive an error, I believe because I am not using react-native's button but instead using native-base's button.

I also was trying to learning CSS styling which might be the solution to this, but have had a hard time connecting the two concepts together, such as creating
`const styles = StyleSheet.create({
center: {

alignItems: 'center'

}
})`

So to go back to my question, what would be the way to add padding to elements or anchor points when using a library like native-base? Is it the same as react-native, are there any good tutorials or code snippets that demonstrate what I can learn to progress?

Thank you!

Answer 1

For the example code you mentioned, I see that you are not using the curly brackets for the style. Instead of

<block style = styles.center/>

It should be:

<block style = {styles.center}/>

Other than that, I usually use css to style components in react-native. Other libraries might handle this for you, but for most cases, css is the way to go.

You can do something like this:

const SomeView = () => {
  return (
    <View>
      <Button style={styles.button}/>
      <Button style={styles.button}/>
    </View>
  );
};

const styles = StyleSheet.create({
  button: {
    marginBottom: '2rem'
  }
});