🏋️‍♂️ Just need to pass gyro values now

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, "15.0"
 prepare_react_native_project!
 
 linkage = ENV['USE_FRAMEWORKS']

ios/Podfile.lock

@@ -466,6 +466,10 @@ PODS:
     - React-CoreModules
     - React-RCTImage
     - React-RCTText
+  - rive-react-native (6.2.3):
+    - React-Core
+    - RiveRuntime (= 5.5.1)
+  - RiveRuntime (5.5.1)
   - RNCAsyncStorage (1.19.3):
     - React-Core
   - RNCClipboard (1.2.2):
@@ -586,6 +590,7 @@ DEPENDENCIES:
   - "ReactNativeAudioToolkit (from `../node_modules/@react-native-community/audio-toolkit`)"
   - ReactNativeCameraKit (from `../node_modules/react-native-camera-kit`)
   - ReactNativeNavigation (from `../node_modules/react-native-navigation`)
+  - rive-react-native (from `../node_modules/rive-react-native`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
   - "RNCClipboard (from `../node_modules/@react-native-community/clipboard`)"
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
@@ -612,6 +617,7 @@ SPEC REPOS:
     - fmt
     - HMSegmentedControl
     - libwebp
+    - RiveRuntime
     - SDWebImage
     - SDWebImageWebPCoder
     - SocketRocket
@@ -745,6 +751,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-camera-kit"
   ReactNativeNavigation:
     :path: "../node_modules/react-native-navigation"
+  rive-react-native:
+    :path: "../node_modules/rive-react-native"
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-async-storage/async-storage"
   RNCClipboard:
@@ -793,14 +801,14 @@ CHECKOUT OPTIONS:
     :submodules: true
 
 SPEC CHECKSUMS:
-  boost: 64032b9e9b938fda23325e68a3771f0fabf414dc
+  boost: 57d2868c099736d80fcd648bf211b4431e51a558
   BVLinearGradient: 612a04ff38e8480291f3379ee5b5a2c571f03fe0
   CryptoSwift: c4f2debceb38bf44c80659afe009f71e23e4a082
   DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   FBLazyVector: 71803c074f6325f10b5ec891c443b6bbabef0ca7
   FBReactNativeSpec: 448e08a759d29a96e15725ae532445bf4343567c
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: cf171f517b828fdde711287b723e348da1ea0fc3
+  glog: 553c84c5d721b0d5eee45abc0e1045eff08d0363
   HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
   Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
   libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
@@ -860,6 +868,8 @@ SPEC CHECKSUMS:
   ReactNativeAudioToolkit: de9610f323e855ac6574be8c99621f3d57c5df06
   ReactNativeCameraKit: d95d3e19c514526a234d9f93c6db7e7f10eef9ea
   ReactNativeNavigation: 2651d0bc1479e9df0789b077ae93320dc2c9b73b
+  rive-react-native: 79777686cb29eaba6a28a0534fe82c8b8da41b4a
+  RiveRuntime: b57830ff73f406f3b4022f457b16690535ca4d05
   RNCAsyncStorage: c913ede1fa163a71cea118ed4670bbaaa4b511bb
   RNCClipboard: 8148e21ac347c51fd6cd4b683389094c216bb543
   RNCMaskedView: 71fc32d971f03b7f03d6ab6b86b730c4ee64f5b6
@@ -884,6 +894,6 @@ SPEC CHECKSUMS:
   TOCropViewController: edfd4f25713d56905ad1e0b9f5be3fbe0f59c863
   Yoga: 86fed2e4d425ee4c6eab3813ba1791101ee153c6
 
-PODFILE CHECKSUM: 3f98ce893757dfa17e609ef7cd24fa41635b73a6
+PODFILE CHECKSUM: af454d7ac369001d3f8e68bdfec0064292eb07b2
 
 COCOAPODS: 1.12.0

ios/StatusIm.xcodeproj/project.pbxproj

@@ -3,11 +3,13 @@
 	archiveVersion = 1;
 	classes = {
 	};
-	objectVersion = 52;
+	objectVersion = 54;
 	objects = {
 
 /* Begin PBXBuildFile section */
 		00E356F31AD99517003FC87E /* StatusImTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* StatusImTests.m */; };
+		06FC6FC82B8F5B7B00C524C7 /* Biometrics Parallax.riv in Resources */ = {isa = PBXBuildFile; fileRef = 06FC6FC72B8F5B7B00C524C7 /* Biometrics Parallax.riv */; };
+		06FC6FC92B8F5B7B00C524C7 /* Biometrics Parallax.riv in Resources */ = {isa = PBXBuildFile; fileRef = 06FC6FC72B8F5B7B00C524C7 /* Biometrics Parallax.riv */; };
 		13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		25DC9C9DC25846BD8D084888 /* libc++.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 8B9A886A2CB448B1ABA0EB62 /* libc++.tbd */; };
@@ -108,6 +110,7 @@
 		00E356EE1AD99517003FC87E /* StatusImTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = StatusImTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		00E356F21AD99517003FC87E /* StatusImTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = StatusImTests.m; sourceTree = "<group>"; };
+		06FC6FC72B8F5B7B00C524C7 /* Biometrics Parallax.riv */ = {isa = PBXFileReference; lastKnownFileType = file; path = "Biometrics Parallax.riv"; sourceTree = "<group>"; };
 		1130DCD9CBDCA3CA461F55B4 /* Pods-Status-StatusIm.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm.debug.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm.debug.xcconfig"; sourceTree = "<group>"; };
 		13B07F961A680F5B00A75B9A /* StatusIm.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = StatusIm.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = StatusIm/AppDelegate.h; sourceTree = "<group>"; };
@@ -212,6 +215,14 @@
 			name = "Supporting Files";
 			sourceTree = "<group>";
 		};
+		069C9B772B86367100BC9530 /* RiveFiles */ = {
+			isa = PBXGroup;
+			children = (
+				06FC6FC72B8F5B7B00C524C7 /* Biometrics Parallax.riv */,
+			);
+			path = RiveFiles;
+			sourceTree = "<group>";
+		};
 		13B07FAE1A68108700A75B9A /* StatusIm */ = {
 			isa = PBXGroup;
 			children = (
@@ -234,6 +245,7 @@
 		1E7837547A9A40E18AD63CF3 /* Resources */ = {
 			isa = PBXGroup;
 			children = (
+				069C9B772B86367100BC9530 /* RiveFiles */,
 				74B758FB20D7C00B003343C3 /* launch-image-universal.storyboard */,
 				CD4A2C27D6D5473184DC1F7E /* Inter-Bold.otf */,
 				B321D25F4493470980039457 /* Inter-BoldItalic.otf */,
@@ -346,6 +358,7 @@
 				00E356EB1AD99517003FC87E /* Frameworks */,
 				00E356EC1AD99517003FC87E /* Resources */,
 				D737FA0B0E9D346092C626FB /* [CP] Copy Pods Resources */,
+				F5E1204C221FAAFC26976A68 /* [CP] Embed Pods Frameworks */,
 			);
 			buildRules = (
 			);
@@ -369,6 +382,7 @@
 				20B6B6891D92C42700CC5C6A /* Embed Frameworks */,
 				E3914A731DF919ED00EBB515 /* Run Script */,
 				28606042DA81A750949525E4 /* [CP] Copy Pods Resources */,
+				0FB4B83C3D5C88264D02B2B2 /* [CP] Embed Pods Frameworks */,
 			);
 			buildRules = (
 			);
@@ -391,6 +405,7 @@
 				3AAD2AD624A3A60E0075D594 /* Embed Frameworks */,
 				3AAD2AD724A3A60E0075D594 /* Run Script */,
 				BB1D92AA7446228787D6925C /* [CP] Copy Pods Resources */,
+				4F560680A93B4B701FEDFB7C /* [CP] Embed Pods Frameworks */,
 			);
 			buildRules = (
 			);
@@ -496,6 +511,7 @@
 				D99C50E5E18942A39C8DDF61 /* Inter-BoldItalic.otf in Resources */,
 				3ABC7AF8245FF85900612C45 /* InterStatus-Regular.otf in Resources */,
 				393D26E3080B443A998F4A2F /* Inter-Italic.otf in Resources */,
+				06FC6FC82B8F5B7B00C524C7 /* Biometrics Parallax.riv in Resources */,
 				D1786306E0184916B11F4C37 /* Inter-Medium.otf in Resources */,
 				57C854A7993C47A3B1AECD32 /* Inter-MediumItalic.otf in Resources */,
 				70ADBB5ECF934DCF8A0E4919 /* Inter-Regular.otf in Resources */,
@@ -518,6 +534,7 @@
 				3AAD2ACE24A3A60E0075D594 /* InterStatus-Regular.otf in Resources */,
 				3AAD2ACF24A3A60E0075D594 /* Inter-Italic.otf in Resources */,
 				3AAD2AD024A3A60E0075D594 /* Inter-Medium.otf in Resources */,
+				06FC6FC92B8F5B7B00C524C7 /* Biometrics Parallax.riv in Resources */,
 				3AAD2AD124A3A60E0075D594 /* Inter-MediumItalic.otf in Resources */,
 				3AAD2AD224A3A60E0075D594 /* Inter-Regular.otf in Resources */,
 				C1715FFC29C0BCE80088FA8B /* launch-icon.png in Resources */,
@@ -544,6 +561,24 @@
 			shellPath = "/usr/bin/env sh";
 			shellScript = "set -o errexit\nexport NODE_BINARY=\"${NODE_BINARY:-node}\"\nexport NODE_ARGS=\"${NODE_ARGS:- --max-old-space-size=16384 }\"\n\nbash -x ../node_modules/react-native/scripts/react-native-xcode.sh > ./logs/react-native-xcode.log 2>&1";
 		};
+		0FB4B83C3D5C88264D02B2B2 /* [CP] Embed Pods Frameworks */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm-frameworks.sh",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/RiveRuntime/RiveRuntime.framework/RiveRuntime",
+			);
+			name = "[CP] Embed Pods Frameworks";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RiveRuntime.framework",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm-frameworks.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
 		28606042DA81A750949525E4 /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -594,6 +629,24 @@
 			shellPath = "/usr/bin/env sh";
 			shellScript = "\"${PROJECT_DIR}/scripts/set_xcode_version.sh\" > ./logs/set_xcode_version.log 2>&1";
 		};
+		4F560680A93B4B701FEDFB7C /* [CP] Embed Pods Frameworks */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR-frameworks.sh",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/RiveRuntime/RiveRuntime.framework/RiveRuntime",
+			);
+			name = "[CP] Embed Pods Frameworks";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RiveRuntime.framework",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR-frameworks.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
 		523CD6BCB20FD78FBF3564AD /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -718,6 +771,24 @@
 			shellPath = "/usr/bin/env sh";
 			shellScript = "\"${PROJECT_DIR}/scripts/set_xcode_version.sh\" > ./logs/set_xcode_version.log 2>&1";
 		};
+		F5E1204C221FAAFC26976A68 /* [CP] Embed Pods Frameworks */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests-frameworks.sh",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/RiveRuntime/RiveRuntime.framework/RiveRuntime",
+			);
+			name = "[CP] Embed Pods Frameworks";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RiveRuntime.framework",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests-frameworks.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
 /* End PBXShellScriptBuildPhase section */
 
 /* Begin PBXSourcesBuildPhase section */

package.json

@@ -69,6 +69,7 @@
     "react-native-transparent-video": "git+https://github.com/status-im/react-native-transparent-video.git#refs/tags/0.1.1",
     "react-native-webview": "13.6.3",
     "react-syntax-highlighter": "^15.5.0",
+    "rive-react-native": "^6.2.3",
     "rn-emoji-keyboard": "0.7.0",
     "tdigest": "^0.1.1"
   },

src/react_native/hooks.cljs

@@ -1,6 +1,7 @@
 (ns react-native.hooks
   (:require
     ["@react-native-community/hooks" :as hooks]
+    ["react-native-reanimated" :as rn-reanimated :refer (SensorType)]
     [oops.core :as oops]
     [react-native.core :as rn]))
 
@@ -31,3 +32,10 @@
                (cleanup-cb)
                (js/clearInterval id))))))
      [delay-ms])))
+
+(defn use-gyroscope
+  []
+  (.useAnimatedSensor rn-reanimated
+                      (-> SensorType
+                          js->clj
+                          (get "GYROSCOPE"))))

src/status_im/common/rive/view.cljs

@@ -0,0 +1,7 @@
+(ns status-im.common.rive.view
+  (:require
+   ["rive-react-native$default" :as Rive]))
+
+(defn view [props]
+  [:> Rive props])
+"../resources/rive/Biometrics Test.riv"

src/status_im/contexts/onboarding/enable_biometrics/view.cljs

@@ -1,17 +1,18 @@
 (ns status-im.contexts.onboarding.enable-biometrics.view
   (:require
-    [quo.core :as quo]
-    [react-native.core :as rn]
-    [react-native.safe-area :as safe-area]
-    [status-im.common.biometric.events :as biometric]
-    [status-im.common.parallax.view :as parallax]
-    [status-im.common.parallax.whitelist :as whitelist]
-    [status-im.common.resources :as resources]
-    [status-im.contexts.onboarding.enable-biometrics.style :as style]
-    [status-im.navigation.state :as state]
-    [utils.i18n :as i18n]
-    [utils.re-frame :as rf]))
-
+   [quo.core :as quo]
+   [react-native.core :as rn]
+   [react-native.hooks :as hooks]
+   [react-native.safe-area :as safe-area]
+   [status-im.common.biometric.events :as biometric]
+   [status-im.common.parallax.view :as parallax]
+   [status-im.common.resources :as resources]
+   [status-im.common.rive.view :as rive]
+   [status-im.contexts.onboarding.enable-biometrics.style :as style]
+   [status-im.navigation.state :as state]
+   [utils.i18n :as i18n]
+   [utils.re-frame :as rf]
+   [utils.worklets.parallax :as worklets.parallax]))
 
 (defn page-title
   []
@@ -66,14 +67,41 @@
       :style       (style/page-illustration width)
       :source      (resources/get-image :biometrics)}]))
 
+(defn f-sensor-animate-ref [ref]
+  (let [x-gyro-val (hooks/use-gyroscope)]
+    (rn/use-effect
+     (fn []
+       ;; TODO: Pass the x-gyro-val here
+       ;; (-> @ref (.setInputState "stateMachine" "x" x-gyro-val))
+       )
+     [x-gyro-val])
+    ))
+
+(defn sensor-animate-ref [rive-ref]
+  [:f> f-sensor-animate-ref rive-ref])
+
+(defn enable-biometrics-rive
+  []
+  (let [width     (:width (rn/get-window))
+        rive-ref  (atom nil)]
+    [:<>
+     [sensor-animate-ref rive-ref]
+     (rive/view
+      {:ref              #(reset! rive-ref %)
+       :resourceName     "Biometrics Parallax"
+       :artboardName     "Status Biometrics - Test 01"
+       :stateMachineName "stateMachine"
+       :style            (style/page-illustration width)})]))
+
 (defn f-enable-biometrics
   []
   (let [insets (safe-area/get-insets)]
     [rn/view {:style (style/page-container insets)}
      [page-title]
-     (if whitelist/whitelisted?
-       [enable-biometrics-parallax]
-       [enable-biometrics-simple])
+     [enable-biometrics-rive]
+     ;; (if whitelist/whitelisted?
+     ;;   [enable-biometrics-parallax]
+     ;;   [enable-biometrics-simple])
      [enable-biometrics-buttons insets]]))
 
 (defn view

src/status_im/navigation/events.cljs

@@ -188,3 +188,9 @@
   (let [view-id (if (= view-id :shell-stack) (shell.utils/calculate-view-id) view-id)]
     {:db             (assoc db :view-id view-id)
      :set-view-id-fx view-id}))
+
+(comment
+  (rf/dispatch [:navigate-to :generating-keys])
+  (rf/dispatch [:navigate-to :wallet-transaction-progress])
+  (rf/dispatch [:navigate-to :enable-biometrics])
+  ,)

yarn.lock

@@ -8793,6 +8793,11 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+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-emoji-keyboard@0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/rn-emoji-keyboard/-/rn-emoji-keyboard-0.7.0.tgz#e2f23e846427d1f5e6413fab7beaf412c24f8c33"