3

While pressing the button, default dark blue background color appears. I tried everything to change the underlay color of buttons in react-native-paper but no luck. React Native buttons have a underColor property to do so. Can we by any means change it?

Prateek Oraon
  • 101
  • 1
  • 8
  • do you have example ? – Yoel Dec 24 '19 at 21:52
  • It is just like the TouchableOpacity in React Native. On pressing TouchableOpacity its color(opacity) changes for a while. I want to change that color in the react-native-paper button. – Prateek Oraon Dec 24 '19 at 22:24

1 Answers1

1

If you set it to onPress, it will give you click-through behavior on click

 <Button  onPress={() => console.log('Pressed')}>
    Press me
  </Button>

example in expo

Also You can use a different type of button

You can control this through the prop- mode

From the documentation

Mode of the button. You can change the mode to adjust the styling to give it desired emphasis.

text - flat button without background or outline (low emphasis)

outlined - button with an outline (medium emphasis)

contained - button with a background color and elevation shadow (high emphasis)

  <Button  mode="outlined" onPress={() => console.log('Pressed')}>
    Press me
  </Button>
Community
  • 1
  • 1
Yoel
  • 7,555
  • 6
  • 27
  • 59
  • 2
    I came up with the following solution. The react-native-paper library takes the underlay color from the TouchableOpacity element of React Native. Therefore, it can't be changed. Either you can edit the module script or change the color property of the button which is responsible for the color of the underlay like: `` – Prateek Oraon Dec 25 '19 at 09:04
  • You get the same result as mode="outlined" see https://snack.expo.io/@yoel301/button-react-paper In your way, the text also becomes transparent you need use labelStyle – Yoel Dec 25 '19 at 09:09