Add an animated Rive example asset to the example app

example/android/link-assets-manifest.json

@@ -104,6 +104,10 @@
     {
       "path": "assets/fonts/DMMono/DMMono-Medium.ttf",
       "sha1": "0ceec76262c08cec6c956e1ffe2bfc60321e8f58"
+    },
+    {
+      "path": "assets/animated-pictograms/umbrella.riv",
+      "sha1": "60b9b7f80dace88630bc26fecee60a33ed85aeb0"
     }
   ]
 }

example/ios/ExampleApp.xcodeproj/project.pbxproj

@@ -40,6 +40,7 @@
 		E8EF3336542140A88B10BFF7 /* TitilliumWeb-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 16CF61663EAF4B46B3B81980 /* TitilliumWeb-Regular.ttf */; };
 		EC846EA2DBCB4719B953F423 /* TitilliumSansPro-Thin-Italic.otf in Resources */ = {isa = PBXBuildFile; fileRef = 3DE40C756739486AA1D51FCE /* TitilliumSansPro-Thin-Italic.otf */; };
 		ECADF86EA3F140C6A74EFA09 /* TitilliumSansPro-Regular.otf in Resources */ = {isa = PBXBuildFile; fileRef = FBA458C5509E42A59CD6F632 /* TitilliumSansPro-Regular.otf */; };
+		1E4EFB88CD2C4972A59FCFFE /* umbrella.riv in Resources */ = {isa = PBXBuildFile; fileRef = D7FF5F5BF549432188423043 /* umbrella.riv */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -96,6 +97,7 @@
 		EC225F8C27DC4CB7A37B9FF3 /* TitilliumWeb-SemiBold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "TitilliumWeb-SemiBold.ttf"; path = "../assets/fonts/TitilliumWeb/TitilliumWeb-SemiBold.ttf"; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 		FBA458C5509E42A59CD6F632 /* TitilliumSansPro-Regular.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "TitilliumSansPro-Regular.otf"; path = "../assets/fonts/TitilliumSansPro/TitilliumSansPro-Regular.otf"; sourceTree = "<group>"; };
+		D7FF5F5BF549432188423043 /* umbrella.riv */ = {isa = PBXFileReference; name = "umbrella.riv"; path = "../assets/animated-pictograms/umbrella.riv"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -219,6 +221,7 @@
 				3DE40C756739486AA1D51FCE /* TitilliumSansPro-Thin-Italic.otf */,
 				4FC6145EC4A14796982CAE22 /* TitilliumSansPro-Thin.otf */,
 				1CFF1D50D36F43F2BC0D124F /* LICENSE.txt */,
+				D7FF5F5BF549432188423043 /* umbrella.riv */,
 			);
 			name = Resources;
 			path = "";
@@ -357,6 +360,7 @@
 				EC846EA2DBCB4719B953F423 /* TitilliumSansPro-Thin-Italic.otf in Resources */,
 				116E6480B9914941A6254F71 /* TitilliumSansPro-Thin.otf in Resources */,
 				493FA456AB57478891021E84 /* LICENSE.txt in Resources */,
+				1E4EFB88CD2C4972A59FCFFE /* umbrella.riv in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

example/ios/Podfile

@@ -5,7 +5,7 @@ require Pod::Executable.execute_command('node', ['-p',
     {paths: [process.argv[1]]},
   )', __dir__]).strip
 
-platform :ios, min_ios_version_supported
+platform :ios, 14
 prepare_react_native_project!
 
 # If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.

example/ios/Podfile.lock

@@ -489,6 +489,10 @@ PODS:
     - React-jsi (= 0.72.12)
     - React-logger (= 0.72.12)
     - React-perflogger (= 0.72.12)
+  - rive-react-native (6.2.3):
+    - React-Core
+    - RiveRuntime (= 5.5.1)
+  - RiveRuntime (5.5.1)
   - RNGestureHandler (2.12.1):
     - React-Core
   - RNReactNativeHapticFeedback (2.0.3):
@@ -597,6 +601,7 @@ DEPENDENCIES:
   - React-runtimescheduler (from `../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`)
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - rive-react-native (from `../node_modules/rive-react-native`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReactNativeHapticFeedback (from `../node_modules/react-native-haptic-feedback`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
@@ -618,6 +623,7 @@ SPEC REPOS:
     - fmt
     - libevent
     - OpenSSL-Universal
+    - RiveRuntime
     - SocketRocket
     - YogaKit
 
@@ -702,6 +708,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/react/utils"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  rive-react-native:
+    :path: "../node_modules/rive-react-native"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNReactNativeHapticFeedback:
@@ -768,6 +776,8 @@ SPEC CHECKSUMS:
   React-runtimescheduler: 8aea338c561b2175f47018124c076d89d3808d30
   React-utils: 9a24cb88f950d1020ee55bddacbc8c16a611e2dc
   ReactCommon: 76843a9bb140596351ac2786257ac9fe60cafabb
+  rive-react-native: 79777686cb29eaba6a28a0534fe82c8b8da41b4a
+  RiveRuntime: b57830ff73f406f3b4022f457b16690535ca4d05
   RNGestureHandler: c0d04458598fcb26052494ae23dda8f8f5162b13
   RNReactNativeHapticFeedback: afa5bf2794aecbb2dba2525329253da0d66656df
   RNReanimated: 53ca20eee770c41173703f5948cd8898aa08262c
@@ -777,6 +787,6 @@ SPEC CHECKSUMS:
   Yoga: 87e59f6d458e5061d2421086c5de994b3f7cd151
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 3682f715bd91b22067ed6990af779570157f6eb0
+PODFILE CHECKSUM: 010bd9ba87e5ea0fc1a226bb7757f51655b8e9c8
 
 COCOAPODS: 1.15.2

example/ios/link-assets-manifest.json

@@ -104,6 +104,10 @@
     {
       "path": "assets/fonts/DMMono/DMMono-Medium.ttf",
       "sha1": "0ceec76262c08cec6c956e1ffe2bfc60321e8f58"
+    },
+    {
+      "path": "assets/animated-pictograms/umbrella.riv",
+      "sha1": "60b9b7f80dace88630bc26fecee60a33ed85aeb0"
     }
   ]
 }

example/package.json

@@ -29,6 +29,7 @@
     "react-native-safe-area-context": "^4.7.1",
     "react-native-screens": "^3.23.0",
     "react-native-svg": "^15.1.0",
+    "rive-react-native": "^6.2.3",
     "rn-placeholder": "^3.0.3"
   },
   "devDependencies": {

example/react-native.config.js

@@ -14,6 +14,7 @@ module.exports = {
     "./assets/fonts/TitilliumWeb",
     "./assets/fonts/TitilliumSansPro",
     "./assets/fonts/ReadexPro",
-    "./assets/fonts/DMMono"
+    "./assets/fonts/DMMono",
+    "./assets/animated-pictograms"
   ]
 };

example/src/navigation/navigator.tsx

@@ -1,22 +1,23 @@
 import {
   HeaderSecondLevel,
-  ModalBSHeader,
   IOStyles,
   IOThemeDark,
   IOThemeLight,
+  ModalBSHeader,
   useIOThemeContext
 } from "@pagopa/io-app-design-system";
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import React from "react";
 import {
   DarkTheme,
   DefaultTheme,
   NavigationContainer
 } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import React from "react";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { Accordion } from "../pages/Accordion";
 import { DSAdvice } from "../pages/Advice";
 import { DSAlert } from "../pages/Alert";
+import { AnimatedPictograms } from "../pages/AnimatedPictograms";
 import { Badges } from "../pages/Badges";
 import { Buttons } from "../pages/Buttons";
 import { Colors } from "../pages/Colors";
@@ -139,6 +140,14 @@ const AppNavigator = () => {
               headerBackTitleVisible: false
             }}
           />
+          <Stack.Screen
+            name={APP_ROUTES.FOUNDATION.ANIMATED_PICTOGRAMS.route}
+            component={AnimatedPictograms}
+            options={{
+              headerTitle: APP_ROUTES.FOUNDATION.ANIMATED_PICTOGRAMS.title,
+              headerBackTitleVisible: false
+            }}
+          />
           <Stack.Screen
             name={APP_ROUTES.FOUNDATION.COLOR.route}
             component={Colors}

example/src/navigation/params.ts

@@ -8,6 +8,7 @@ export type AppParamsList = {
   [DESIGN_SYSTEM_ROUTES.FOUNDATION.LOADERS.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.FOUNDATION.ICONS.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.FOUNDATION.PICTOGRAMS.route]: undefined;
+  [DESIGN_SYSTEM_ROUTES.FOUNDATION.ANIMATED_PICTOGRAMS.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.FOUNDATION.LOGOS.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.COMPONENTS.NUMBER_PAD.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.COMPONENTS.IMAGE.route]: undefined;

example/src/navigation/routes.ts

@@ -7,6 +7,10 @@ const APP_ROUTES = {
     LOADERS: { route: "DESIGN_SYSTEM_LOADERS", title: "Loaders" },
     ICONS: { route: "DESIGN_SYSTEM_ICONS", title: "Icons" },
     PICTOGRAMS: { route: "DESIGN_SYSTEM_PICTOGRAMS", title: "Pictograms" },
+    ANIMATED_PICTOGRAMS: {
+      route: "DESIGN_SYSTEM_ANIM_PICTOGRAMS",
+      title: "Animated Pictograms ✨"
+    },
     LOGOS: { route: "DESIGN_SYSTEM_LOGOS", title: "Logos" }
   },
   COMPONENTS: {

example/src/pages/AnimatedPictograms.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { ScrollView } from "react-native-gesture-handler";
+import Rive from "rive-react-native";
+
+export const AnimatedPictograms = () => (
+  <ScrollView centerContent>
+    {/* <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{
+          marginBottom: 16,
+          paddingTop: IOVisualCostants.appMarginDefault
+        }}
+      >
+        Animated pictograms
+      </H2> */}
+    <Rive
+      resourceName="umbrella"
+      style={{
+        aspectRatio: "1",
+        width: 200,
+        alignSelf: "center"
+      }}
+    />
+  </ScrollView>
+);

example/yarn.lock

@@ -4582,6 +4582,11 @@ rimraf@~2.6.2:
   dependencies:
     glob "^7.1.3"
 
+rive-react-native@^6.2.3:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/rive-react-native/-/rive-react-native-6.2.3.tgz#358cf427940960b0d8c49975f3fe865fd98ee74c"
+  integrity sha512-oOhalZdCTCiSXDBR/YIYQtBmfunxKCZioCIjsQ/C+sd51b0G1hxk4TqDl4f0zE7iFC3y3k57G0aIL5+N+iYZhA==
+
 rn-placeholder@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/rn-placeholder/-/rn-placeholder-3.0.3.tgz#98f635b263ee003af2a984eed32d86ade308df35"