React native paper button background color

Question

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?

Answer 1

Please use TouchableOpacity

if you used TouchableHighlight Try to add this

 <TouchableHighlight underlayColor='none' />

Answer 2

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>

Answer 3

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>