CODEWITHSUNDEEP
reactjsreact-native
Vipul Tyagi
Vipul Tyagi

Reputation: 667

Putting space between column elements in react native

enter image description hereI have two buttons below which are placed one above other:

<Button 
                    onPress = {() =>{this.toggleModal(); }}
                    color="#512D67"
                    title="Submit" 
                    />
                <Button 
                    onPress = {() =>{this.toggleModal(); }}
                    color="#c0c0c0"
                    title="Cancel" 
                    />

These are placed without any space between them. How can I put space between them( margin and padding not working)?

Thank You!

Upvotes: 0

Views: 416

Answers (2)

Handi
Handi

Reputation: 67

you can try this code below, it should solve your problem.

    <View style={{ marginVertical: 20 }}>
      <Button color="#512D67" title="Submit" />
    </View>
    <View>
      <Button color="#c0c0c0" title="Cancel" />
    </View>

Basically you just add margin vertically to the button with the help of View wrap.

Upvotes: 0

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16354

Button in react native doesnt take a style prop, you will have to wrap it with a View and add the styles to the view

             <View style={{paddingBottom:20}}>
              <Button 
                onPress = {() =>{this.toggleModal(); }}
                color="#512D67"
                title="Submit" 
                />
              </View>

Upvotes: 1

Related Questions