CODEWITHSUNDEEP
javascriptandroidreactjsreact-nativepressable
Slbox
Slbox

Reputation: 13138

How to configure the ripple color for a React Native Pressable?

The docs mention that the property android_ripple takes an argument of type RippleConfig, but when you click the link for RippleConfig you get a 404.

Doc page: https://reactnative.dev/docs/pressable/#android_ripple-android

Upvotes: 0

Views: 1775

Answers (2)

IVIKOS
IVIKOS

Reputation: 21

In your Pressable button pass in a "mode" prop into the Android_ripple config object, for example:

const LogininWithIcon = ({ iconName, onPress, buttonTitle, mode }) => {
  return (
    <View style={styles.buttonContainer}>
 <Pressable
        activeOpacity={Platform.OS === "ios" ? 0.58 : null}
        android_ripple={{
          color:
            mode === "facebook" ? Colors.facebookColor : Colors.googleYellow,
          borderless: false,
        }}
...

Then in the component that will be using the button, pass in the prop like this:

 <LogininWithIcon
            iconName="logo-facebook"
            onPress={() => {}}
            buttonTitle="Facebook"
            color="blue"
            mode="facebook"
          />
etc...

Upvotes: 0

anthony willis mu&#241;oz
anthony willis mu&#241;oz

Reputation: 2478

Seems like all redirects are broken but below https://reactnative.dev/docs/pressable/#rippleconfig

Upvotes: 1

Related Questions