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
}
Working Example: Expo Snack
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