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

Question

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:

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?