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

Question

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
}

Glassworker

Answer 1

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

Cannae

Can I only use TouchableRipple, isn't there any workaround with Button? – Glassworker

I have checked the docs of Button but sadly I couldn't find any props supporting customised ripple effect, but it has a seperate component TouchableRipple custom made for this very purpose so It is a good alternative. – Cannae

This props has been added in v5. – Machzor

Answer 2

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

do the trick

Pariah

Answer 3

In React-Native-Paper v5, there's a prop on the Button component expressly for this purpose - rippleColor.

Noted in the v5 docs.

Machzor

for some reason it's not actually available: Type '{ style: { marginTop: number; marginBottom: number; alignSelf: "center"; }; rippleColor: string; contained: true; }' is not assignable to type 'IntrinsicAttributes & Pick<Props, "elevation" | keyof ViewProps | "key" | "theme"> & RefAttributes<View> & { ...; }'. Property 'rippleColor' does not exist on type 'IntrinsicAttributes & Pick<Props, "elevation" | keyof ViewProps | "key" | "theme"> & RefAttributes<View> & { ...; } – Cruel

Answer 4

It is possible to change ripple color on button using custom theme, you can read about that here: React Navigation Themes.

For contained Button changing onPrimary color in theme does the job.

Example of changing purplish default ripple in Dark Theme to red:

import {
  NavigationContainer, DarkTheme as DefaultDarkTheme,
} from '@react-navigation/native';

const DarkTheme = {
    ...DefaultDarkTheme,
    colors: {
        ...DefaultDarkTheme.colors,
        onPrimary: "rgba(255, 0, 0, 1)"
    },
};

export default () => {

  return (
    <NavigationContainer theme={DarkTheme}>
      {/* your App content */}
    </NavigationContainer>
  );
};

If you don't want to change every button's color ripple, but only specific one, you can specify theme for specific button and change onPrimary property color there:

<Button
  mode="contained"
  theme={{ colors: { onPrimary: "rgba(255, 0, 0, 1)" } }}
  onPress={() => {}}
>
  Click Here
</Button>

Ceja