Box linear gradient and Pressable (ripple)

[jonathan-pyt]

Describe the bug
Ripple effect didn't work with Box and LinearGradient

To Reproduce

import React from "react";
import { Pressable, Box, Center, NativeBaseProvider, View } from "native-base";

export const Example = () => {
  return (
    <Pressable
      onPress={() => {}}
      android_ripple={{ color: "black", borderless: true }}
    >
      <Box
        bg={{
          linearGradient: {
            colors: ["lightBlue.300", "violet.800"],
            start: [0, 0],
            end: [1, 0],
          },
        }}
        p={12}
      >
        This is a Box with Linear Gradient
      </Box>
    </Pressable>
  );
};

const config = {
  dependencies: {
    "linear-gradient": require("expo-linear-gradient").LinearGradient,
  },
};

export default function App() {
  return (
    <NativeBaseProvider config={config}>
      <Center flex={1}>
        <Example />
      </Center>
    </NativeBaseProvider>
  );
}

Expected behaviour
Ripple effect like on material ui buttons : https://material-ui.com/components/buttons/

Platform

• Device: [Galaxy s10 / expo]
• OS: [Android 11]

[intergalacticspacehighway]

@Mistes974 Currently Pressable doesn't support foreground ripple. I had created a PR for the same. Until it's released, you can use TouchableNativeFeedback with useForeground prop. Below code should work

import React from "react";
import { Pressable, Box, Center, NativeBaseProvider, View } from "native-base";
import { TouchableNativeFeedback } from "react-native";

export const Example = () => {
  return (
    <TouchableNativeFeedback
      onPress={() => {}}
      useForeground
      background={TouchableNativeFeedback.Ripple('black')}
    >
      <Box
        bg={{
          linearGradient: {
            colors: ["lightBlue.300", "violet.800"],
            start: [0, 0],
            end: [1, 0],
          },
        }}
        p={12}
      >
        This is a Box with Linear Gradient
      </Box>
    </TouchableNativeFeedback>
  );
};

const config = {
  dependencies: {
    "linear-gradient": require("expo-linear-gradient").LinearGradient,
  },
};

export default function App() {
  return (
    <NativeBaseProvider config={config}>
      <Center flex={1}>
        <Example />
      </Center>
    </NativeBaseProvider>
  );
}