Search code examples
react-nativereact-native-paper

How to change ripple color of button in react-native-paper

I am using Button component from react-native-paper for my application. I set by background to some value. How can I change the ripple color that appears when touched.

My button component

<Button
    mode="contained"
    style={styles.button}
    labelStyle={styles.buttonLabel}
    uppercase={false}
    onPress={() => {}}
>
    Click Here
  </Button>

Styles used

button: {
  marginTop: 30,
  backgroundColor: Colors.BRIGHT_YELLOW,
  padding: 5,
  borderRadius: 10
},
buttonLabel: {
  fontFamily: FONT_FAMILY.POPPINS_MEDIUM,
  fontSize: FONT_SIZE[18],
  color: Colors.PURE_WHITE
}
Solution

  • Working Example: Expo Snack

    enter image description here

    You can use TouchableRipple instead:

    import * as React from 'react';
import { View } from 'react-native';
import { Text, TouchableRipple } from 'react-native-paper';

const MyComponent = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <TouchableRipple
      onPress={() => console.log('Pressed')}
      rippleColor="rgba(255,0,0, 1)"
      style={{ backgroundColor: 'grey', padding: 10, borderRadius: 5 }}>
      <Text>Press anywhere</Text>
    </TouchableRipple>
  </View>
);

export default MyComponent;

    Docs: touchable-ripple