CODEWITHSUNDEEP
javascriptreactjsreact-native
Pankaj Thakur
Pankaj Thakur

Reputation: 9891

Make responsive button in react native

I want to make button in react native with dynamic width. I just want to supply text in button component it create button according to text width.

Upvotes: 1

Views: 3614

Answers (2)

Pankaj Thakur
Pankaj Thakur

Reputation: 9891

<View style={{justifyContent: 'center', alignItems: 'center'}}>
    <TouchableHighlight style={{backgroundColor:'red', paddingTop:10, paddingLeft:20, paddingRight:20, paddingBottom:10}}>
        <Text style={{color:'white', fontWeight:'bold'}}>BUTTON 2</Text>
    </TouchableHighlight>
</View>

Upvotes: 2

Nader Dabit
Nader Dabit

Reputation: 53681

To accomplish this, use padding. I've set up an example here.

<TouchableHighlight style={{backgroundColor:'red', paddingTop:10, paddingLeft:20, paddingRight:20, paddingBottom:10}}>
    <Text style={{color:'white', fontWeight:'bold'}}>BUTTON 2</Text>
</TouchableHighlight>

https://rnplay.org/apps/Hwinnw

Upvotes: 1

Related Questions