0

I'm looking for a way to dynamically add bordered property to the button element, how can I do that?

So I need to switch from <Button> to <Button bordered>. Any way to do this without assigning an entire <Button><Text>I'm a button</Text></Button> to a variable, then duplicating the same but with bordered?

haosmark
  • 1,097
  • 2
  • 13
  • 27

1 Answers1

1

You can use true or false based on your selection. Store its value in state and when you do some operation set it to true. This is how your Button will look.

<Button bordered={this.state.isBordered}><Text>I'm a button</Text></Button>

whenever you want to change its value just use setState and it's done

this.setState({
    isBordered:true
})

Update:

Combine it with transparent parameter and it will work

<Button transparent bordered={this.state.isBordered}><Text>I'm a button</Text></Button>
Ravi
  • 34,851
  • 21
  • 122
  • 183
  • it doesn't look like native-base has this as a boolean property. Using either true or false keeps the button at it's default appearance. – haosmark Sep 09 '18 at 16:17
  • But it is working perfectly with my live project. That is why i have posted it as an answer, i know it not boolean parameter but still using true/false it is working fine for me – Ravi Sep 10 '18 at 04:33
  • https://snack.expo.io/@haosmark/simple-app here is a snack, it isn't working here either. Can you change it to a working example? – haosmark Sep 10 '18 at 14:16
  • Combine it with `transparent` parameter also, check my updated answer – Ravi Sep 11 '18 at 04:47