refactor(IT Wallet): [SIW-1942] Use Skia for IT Wallet credential c…

…ard effects based on credential status (#6668)

## Short description
This PR adds Skia filter to IT Wallet credential cards removing the need
to have image assets for each credential status.

## List of changes proposed in this pull request
- Removed unnecessary assets
- Replaced `AnimatedImage` component with Skia's `Image` and
`BlendColor` components to add "faded" and "greyscale" effects to
credential card background images
- Refactored `ItwCredentialCard` component

## How to test
You can test the cards component on your wallet or, alternatively, in
**Profile → Design System → Cards → Documents**
Check that everything works as expected on both Android and iOS devices.

ts/features/itwallet/common/components/ItwCredentialCard/CardBackground.tsx

@@ -0,0 +1,90 @@
+import { IOColors } from "@pagopa/io-app-design-system";
+import {
+  BlendColor,
+  Canvas,
+  Image,
+  useImage
+} from "@shopify/react-native-skia";
+import { useEffect, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming
+} from "react-native-reanimated";
+import { CredentialType } from "../../utils/itwMocksUtils";
+import { CardColorScheme } from "./types";
+
+type ItwCredentialCardBackgroundProps = {
+  credentialType: string;
+  colorScheme: CardColorScheme;
+};
+
+export const CardBackground = ({
+  credentialType,
+  colorScheme
+}: ItwCredentialCardBackgroundProps) => {
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const image = useImage(credentialCardBackgrounds[credentialType]);
+  const loadingOverlayOpacity = useSharedValue(1);
+
+  const loadingOverlayOpacityTransition = useAnimatedStyle(() => ({
+    opacity: withTiming(loadingOverlayOpacity.value, {
+      duration: 200,
+      easing: Easing.ease
+    })
+  }));
+
+  useEffect(() => {
+    // Set loading ended only if we have an image and a size defined
+    if (image && size.width > 0 && size.height > 0) {
+      // eslint-disable-next-line functional/immutable-data
+      loadingOverlayOpacity.value = 0;
+    }
+  }, [image, loadingOverlayOpacity, size]);
+
+  return (
+    <View
+      style={[
+        StyleSheet.absoluteFillObject,
+        { backgroundColor: IOColors.white }
+      ]}
+      onLayout={event => {
+        setSize({
+          width: event.nativeEvent.layout.width,
+          height: event.nativeEvent.layout.height
+        });
+      }}
+    >
+      <Canvas style={{ flex: 1 }}>
+        <Image
+          image={image}
+          fit="fill"
+          width={size.width}
+          height={size.height}
+          opacity={colorScheme === "default" ? 1 : 0.4}
+        >
+          {colorScheme === "greyscale" && (
+            <BlendColor color="white" mode="color" />
+          )}
+        </Image>
+      </Canvas>
+      <Animated.View
+        style={[
+          loadingOverlayOpacityTransition,
+          StyleSheet.absoluteFillObject,
+          { backgroundColor: IOColors["grey-100"] }
+        ]}
+      />
+    </View>
+  );
+};
+
+const credentialCardBackgrounds: {
+  [type: string]: string;
+} = {
+  [CredentialType.EUROPEAN_DISABILITY_CARD]: require("../../../../../../img/features/itWallet/cards/dc.png"),
+  [CredentialType.EUROPEAN_HEALTH_INSURANCE_CARD]: require("../../../../../../img/features/itWallet/cards/ts.png"),
+  [CredentialType.DRIVING_LICENSE]: require("../../../../../../img/features/itWallet/cards/mdl.png")
+};

ts/features/itwallet/common/components/ItwDigitalVersionBadge.tsx → ts/features/itwallet/common/components/ItwCredentialCard/DigitalVersionBadge.tsx

@@ -5,16 +5,15 @@ import {
   IOColors,
   makeFontStyleObject
 } from "@pagopa/io-app-design-system";
-import { memo } from "react";
 import Color from "color";
+import { memo } from "react";
 import { Platform, StyleSheet, Text, View } from "react-native";
-import I18n from "../../../../i18n";
-
-export type TagColorScheme = "default" | "faded" | "greyscale";
+import I18n from "../../../../../i18n";
+import { CardColorScheme } from "./types";
 
 type DigitalVersionBadgeProps = {
   credentialType: string;
-  colorScheme: TagColorScheme;
+  colorScheme: CardColorScheme;
 };
 
 type CredentialTypesProps = {
@@ -24,7 +23,7 @@ type CredentialTypesProps = {
 
 const getColorPropsByScheme = (
   credentialType: string,
-  colorScheme: TagColorScheme
+  colorScheme: CardColorScheme
 ) => {
   const mapCredentialTypes: Record<string, CredentialTypesProps> = {
     MDL: {
@@ -57,7 +56,7 @@ const getColorPropsByScheme = (
   return baseColorProps;
 };
 
-const ItwDigitalVersionBadge = ({
+const DigitalVersionBadge = ({
   credentialType,
   colorScheme = "default"
 }: DigitalVersionBadgeProps) => {
@@ -129,6 +128,6 @@ const styles = StyleSheet.create({
   }
 });
 
-const MemoizedItwDigitalVersionBadge = memo(ItwDigitalVersionBadge);
+const MemoizedDigitalVersionBadge = memo(DigitalVersionBadge);
 
-export { MemoizedItwDigitalVersionBadge as ItwDigitalVersionBadge };
+export { MemoizedDigitalVersionBadge as DigitalVersionBadge };