CODEWITHSUNDEEP
javascriptreactjsreact-native
kirimi
kirimi

Reputation: 1400

react native how to custom style with props

I am trying to make a custom button component and change the style of the button using props. Below is my code:

class CustomButton extends React.Component {

render() {

    return (
      <TouchableOpacity
      style={{height:this.props.height, borderWidth:1}}>

      <Text style={{fontSize:13}}>{this.props.text}</Text>

      </TouchableOpacity>
    )
}
}

And I call my component like this:

<CustomButton

      // custom text using props works fine
      text="whatever I want to say"

      // But changing custom style won't work.
     height='200' or 200
/>

I am able to change the text using props however, when I apply the same to change the height it won't work. How could I change the style using props?

Upvotes: 0

Views: 1368

Answers (2)

salvi shahzad
salvi shahzad

Reputation: 1261

Try using:

<CustomButton
  text="whatever you want to say" 
  height={200}
/>

hope it works

Upvotes: 1

Tenzin Kunkyab
Tenzin Kunkyab

Reputation: 123

Not enough points to comment, can you try sending 

<CustomButton
  text="....."
  height='200px'
/>

The reason being the style is expecting 200px as height px being one of the key metric. There are other metrics such as px, em, vw, etc check w3 units for css

Upvotes: 0

Related Questions