CODEWITHSUNDEEP
react-nativereact-native-paper
LDOB
LDOB

Reputation: 98

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
}

Upvotes: 6

Views: 5855

Answers (4)

Andrew
Andrew

Reputation: 5240

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

Noted in the v5 docs.

Upvotes: 1

Jukizuka
Jukizuka

Reputation: 296

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>

Upvotes: 0

Bourdier Jonathan
Bourdier Jonathan

Reputation: 600

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

do the trick

Upvotes: 2

Ketan Ramteke
Ketan Ramteke

Reputation: 10675

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

Upvotes: 5

Related Questions