CODEWITHSUNDEEP
react-nativeexpojsx
Enzo
Enzo

Reputation: 51

How to make ripple effect render on top of children views inside a Pressable component?

I have a FlatList with Pressable cards, inside each card i have children views with a background color that is different from the Pressable parent component, the pressable card is using the android_ripple effect, but the ripple won't render on top of the children views:

Without pressing:

Without pressing

Pressing:

Pressing

A simple example of the strutcture of my code:

<FlatList>
  <Pressable 
    style={styles.container}
    android_ripple={{ color: "white", borderless: true }}
  >
    <View style={styles.child}/>
    <View style={styles.child}/>
  </Pressable>
</FlatList>

Styles:{
 container:{
  padding: 10,
  minWidth: "95%",
  alignItems: "center",
  backgroundColor: "#222",
  elevation: 6
 },
 child:{
  borderRadius: 10,
  padding: 5,
  margin: 3,
  backgroundColor: "#222831",
  elavation: 8
 }
}

I tried removing the elevation, but didn't work. Setting the view's background color to "transparent" works but i want the highlights on them. How can i make the ripple affect the child views without the transparent background?

Upvotes: 4

Views: 555

Answers (1)

Nimble Dev
Nimble Dev

Reputation: 1

Pressable has this prop called:

android_ripple?: null | PressableAndroidRippleConfig | undefined;

If we look at the interface it allows for the foreground value:

export interface PressableAndroidRippleConfig {
  color?: null | ColorValue | undefined;
  borderless?: null | boolean | undefined;
  radius?: null | number | undefined;
  foreground?: null | boolean | undefined;
}

Setting it to true has solved the issue for me

Upvotes: 0

Related Questions