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
}

Ketan Ramteke · Accepted Answer · 2021-01-21T15:29:39.133

5

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

edited Jan 21 '21 at 15:29

answered Jan 21 '21 at 15:17

Ketan Ramteke

10,183
2
21
41

Can I only use `TouchableRipple`, isn't there any workaround with `Button`? – LDOB Jan 22 '21 at 10:55
1

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. – Ketan Ramteke Jan 22 '21 at 11:44
This props has been added in v5. – Andrew May 31 '23 at 14:55

score 2 · Answer 2 · answered Oct 29 '21 at 09:31

2

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

do the trick

answered Oct 29 '21 at 09:31

Bourdier Jonathan

600
4
8

Yuuki Kuna · Answer 3 · 2023-04-29T20:07:35.780

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>

score 0 · Answer 4 · answered May 31 '23 at 14:55

0

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

Noted in the v5 docs.

answered May 31 '23 at 14:55

Andrew

3,825
4
30
44

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 & RefAttributes & { ...; }'. Property 'rippleColor' does not exist on type 'IntrinsicAttributes & Pick & RefAttributes & { ...; }` – bieboebap Jun 19 '23 at 22:15

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

4 Answers4