CODEWITHSUNDEEP
javascriptreactjsreact-nativematerial-designexpo
user13594285
user13594285

Reputation:

React native paper button background color

I have this button from https://callstack.github.io/react-native-paper/button.html

<Button onPress={goSignUp}>
    Sign Up
</Button>

It hasn't got a background color (just what I want), but when I press it, a background color with a ripple fades in. How do I remove the onPress background color?

Upvotes: 1

Views: 5735

Answers (5)

Dilshan Muditha
Dilshan Muditha

Reputation: 1

You can give styles as same as react native default. as an example-

<Button style={{backgroundColor: 'orange'}} icon="account-plus-outline" mode="contained-tonal" onPress={() => console.log('Pressed')}>
            Register me! </Button>

Upvotes: 0

Brx
Brx

Reputation: 1

Try this.

         <Button 
            mode="contained"
            buttonColor='#001871'
            onPress={() => console.log('Button Pressed')}>SAVE
          </Button>

Upvotes: 0

Vivek Verma
Vivek Verma

Reputation: 551

This library has a prop for buttons called mode, you can try pass mode props to it, or just use your custom style

<Button mode='contained'>Sign Up</Button>

or

<Button style={{width: 200, height: 50, backgroundColor: 'blue'}}>Sign Up</Button>

Upvotes: 1

Siful I
Siful I

Reputation: 1932

Please use TouchableOpacity

if you used TouchableHighlight Try to add this

 <TouchableHighlight underlayColor='none' />

Upvotes: 2

user13594285
user13594285

Reputation:

You may ask, why don't you use a touchable opacity instead of the button? The answer is that I have more buttons (with background color) and I want to have all buttons with the same default style which comes with react-native-paper.

I have found a solution (wrap the button inside the TouchableOpacity) but I think there has to be a better way...

<TouchableOpacity onPress={goSignUp}>
   <Button style={styles.button}>Sign Up</Button>
</TouchableOpacity>

Upvotes: 1

Related Questions