chore(Cross): [IOAPPX-343,IOAPPX-311] Add react-native-skia library + Dynamic header background (under the new Experimental Lab category)"

ios/Podfile.lock

@@ -448,11 +448,6 @@ PODS:
     - React-Core
   - react-native-screen-brightness (2.0.0-alpha):
     - React
-  - react-native-skia (1.3.9):
-    - RCT-Folly (= 2021.07.22.00)
-    - React
-    - React-callinvoker
-    - React-Core
   - react-native-slider (3.0.3):
     - React
   - react-native-splash-screen (3.2.0):
@@ -730,7 +725,6 @@ DEPENDENCIES:
   - react-native-render-html (from `../node_modules/react-native-render-html`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-screen-brightness (from `../node_modules/react-native-screen-brightness`)
-  - "react-native-skia (from `../node_modules/@shopify/react-native-skia`)"
   - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
   - react-native-splash-screen (from `../node_modules/react-native-splash-screen`)
   - react-native-view-shot (from `../node_modules/react-native-view-shot`)
@@ -904,8 +898,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-safe-area-context"
   react-native-screen-brightness:
     :path: "../node_modules/react-native-screen-brightness"
-  react-native-skia:
-    :path: "../node_modules/@shopify/react-native-skia"
   react-native-slider:
     :path: "../node_modules/@react-native-community/slider"
   react-native-splash-screen:
@@ -1056,7 +1048,6 @@ SPEC CHECKSUMS:
   react-native-render-html: 96c979fe7452a0a41559685d2f83b12b93edac8c
   react-native-safe-area-context: 399a5859f6acbdf67f671c69b53113f535f3b5b0
   react-native-screen-brightness: 9eefe6db96a5d757e63cdfce8e48d7c9039f2af2
-  react-native-skia: c06ca6074cc70bfe1ec8c45dcc82e76079805fd7
   react-native-slider: e99fc201cefe81270fc9d81714a7a0f5e566b168
   react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865
   react-native-view-shot: 4475fde003fe8a210053d1f98fb9e06c1d834e1c

jest-e2e.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   preset: "react-native",
   transformIgnorePatterns: [
-    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@shopify/react-native-skia|@react-native-camera-roll/camera-roll|@codler|remark|unified|bail|is-plain-obj|trough|vfile|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|parse-entities|character-entities|mdast-util-to-markdown|zwitch|longest-streak|@pagopa/io-react-native-zendesk|rn-qr-generator|mixpanel-react-native|@pagopa/io-app-design-system|@sentry/react-native)"
+    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@react-native-camera-roll/camera-roll|@codler|remark|unified|bail|is-plain-obj|trough|vfile|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|parse-entities|character-entities|mdast-util-to-markdown|zwitch|longest-streak|@pagopa/io-react-native-zendesk|rn-qr-generator|mixpanel-react-native|@pagopa/io-app-design-system|@sentry/react-native)"
   ],
   moduleNameMapper: {
     "\\.svg": "<rootDir>/ts/__mocks__/svgMock.js"

jest.config.js

@@ -1,15 +1,14 @@
 module.exports = {
   preset: "react-native",
   transformIgnorePatterns: [
-    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@shopify/react-native-skia|@react-native-camera-roll/camera-roll|@codler|remark|unified|bail|is-plain-obj|trough|vfile|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|parse-entities|character-entities|mdast-util-to-markdown|zwitch|longest-streak|@pagopa/io-react-native-zendesk|rn-qr-generator|mixpanel-react-native|@pagopa/io-app-design-system|uuid|@sentry/react-native)"
+    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@react-native-camera-roll/camera-roll|@codler|remark|unified|bail|is-plain-obj|trough|vfile|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|parse-entities|character-entities|mdast-util-to-markdown|zwitch|longest-streak|@pagopa/io-react-native-zendesk|rn-qr-generator|mixpanel-react-native|@pagopa/io-app-design-system|uuid|@sentry/react-native)"
   ],
   moduleNameMapper: {
     "\\.svg": "<rootDir>/ts/__mocks__/svgMock.js"
   },
   setupFiles: [
     "./jestSetup.js",
-    "./node_modules/react-native-gesture-handler/jestSetup.js",
-    "./node_modules/@shopify/react-native-skia/jestSetup.js"
+    "./node_modules/react-native-gesture-handler/jestSetup.js"
   ],
   globalSetup: "./jestGlobalSetup.js",
   setupFilesAfterEnv: ["@testing-library/jest-native/extend-expect"],

jest.config.no.timezone.js

@@ -4,15 +4,14 @@ module.exports = {
     "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
   },
   transformIgnorePatterns: [
-    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@shopify/react-native-skia|@react-native-camera-roll/camera-roll|@codler|remark|unified|bail|is-plain-obj|trough|vfile|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|parse-entities|character-entities|mdast-util-to-markdown|zwitch|longest-streak|@pagopa/io-react-native-zendesk|rn-qr-generator|mixpanel-react-native|@pagopa/io-app-design-system|@sentry/react-native)"
+    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@react-native-camera-roll/camera-roll|@codler|remark|unified|bail|is-plain-obj|trough|vfile|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|parse-entities|character-entities|mdast-util-to-markdown|zwitch|longest-streak|@pagopa/io-react-native-zendesk|rn-qr-generator|mixpanel-react-native|@pagopa/io-app-design-system|@sentry/react-native)"
   ],
   moduleNameMapper: {
     "\\.svg": "<rootDir>/ts/__mocks__/svgMock.js"
   },
   setupFiles: [
     "./jestSetup.js",
-    "./node_modules/react-native-gesture-handler/jestSetup.js",
-    "./node_modules/@shopify/react-native-skia/jestSetup.js"
+    "./node_modules/react-native-gesture-handler/jestSetup.js"
   ],
   setupFilesAfterEnv: ["@testing-library/jest-native/extend-expect"],
   collectCoverage: true

package.json

@@ -125,7 +125,6 @@
     "@react-navigation/native": "6.1.9",
     "@react-navigation/stack": "6.3.20",
     "@redux-saga/testing-utils": "^1.1.3",
-    "@shopify/react-native-skia": "^1.3.9",
     "@sentry/react-native": "^5.22.2",
     "@textlint/markdown-to-ast": "^14.0.4",
     "@shopify/flash-list": "~1.7.0",

ts/features/design-system/DesignSystem.tsx

@@ -38,9 +38,6 @@ const DATA_ROUTES_DEBUG: RoutesProps = Object.values(
 const DATA_ROUTES_SCREENS: RoutesProps = Object.values(
   DESIGN_SYSTEM_ROUTES.SCREENS
 );
-const DATA_ROUTES_EXPERIMENTAL_LAB: RoutesProps = Object.values(
-  DESIGN_SYSTEM_ROUTES.EXPERIMENTAL_LAB
-);
 const DATA_ROUTES_LEGACY: RoutesProps = Object.values(
   DESIGN_SYSTEM_ROUTES.LEGACY
 );
@@ -68,10 +65,6 @@ const DESIGN_SYSTEM_SECTION_DATA: Array<SectionDataProps> = [
     title: "Screens",
     data: DATA_ROUTES_SCREENS
   },
-  {
-    title: "Experimental Lab",
-    data: DATA_ROUTES_EXPERIMENTAL_LAB
-  },
   {
     title: "Debug",
     data: DATA_ROUTES_DEBUG

ts/features/design-system/navigation/navigator.tsx

@@ -29,7 +29,6 @@ import { DSBottomSheet } from "../core/DSBottomSheet";
 import { DSButtons } from "../core/DSButtons";
 import { DSCards } from "../core/DSCards";
 import { DSColors } from "../core/DSColors";
-import { DSDynamicBackground } from "../core/DSDynamicBackground";
 import { DSEdgeToEdgeArea } from "../core/DSEdgeToEdgeArea";
 import { DSFooterActions } from "../core/DSFooterActions";
 import { DSFooterActionsNotFixed } from "../core/DSFooterActionsNotFixed";
@@ -383,18 +382,6 @@ export const DesignSystemNavigator = () => {
           }}
         />
 
-        {/* EXPERIMENTAL LAB */}
-
-        <Stack.Screen
-          name={DESIGN_SYSTEM_ROUTES.EXPERIMENTAL_LAB.DYNAMIC_BACKGROUND.route}
-          component={DSDynamicBackground}
-          options={{
-            headerShown: false,
-            headerTitle:
-              DESIGN_SYSTEM_ROUTES.EXPERIMENTAL_LAB.DYNAMIC_BACKGROUND.title
-          }}
-        />
-
         {/* HEADERS */}
         <Stack.Screen
           name={DESIGN_SYSTEM_ROUTES.HEADERS.FIRST_LEVEL.route}

ts/features/design-system/navigation/params.ts

@@ -46,7 +46,6 @@ export type DesignSystemParamsList = {
   [DESIGN_SYSTEM_ROUTES.DEBUG.FOOTER_ACTIONS_STICKY.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.DEBUG.FOOTER_ACTIONS_NOT_FIXED.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.DEBUG.SCREEN_END_MARGIN.route]: undefined;
-  [DESIGN_SYSTEM_ROUTES.EXPERIMENTAL_LAB.DYNAMIC_BACKGROUND.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.LEGACY.TYPOGRAPHY.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.LEGACY.PICTOGRAMS.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.LEGACY.BUTTONS.route]: undefined;

ts/features/design-system/navigation/routes.ts

@@ -114,12 +114,6 @@ const DESIGN_SYSTEM_ROUTES = {
       title: "Footer Actions (not fixed)"
     }
   },
-  EXPERIMENTAL_LAB: {
-    DYNAMIC_BACKGROUND: {
-      route: "DS_DYNAMIC_BACKGROUND",
-      title: "Dynamic header background"
-    }
-  },
   LEGACY: {
     TYPOGRAPHY: {
       route: "DESIGN_SYSTEM_LEGACY_TYPOGRAPHY",