fix nil value in reanimated style crashing at runtime (#14855)

src/js/worklet_factory.js

@@ -2,12 +2,42 @@ import { useDerivedValue, interpolate } from 'react-native-reanimated';
 
 // Generic Worklets
 
+// 1. kebab-case styles are not working for worklets
+//    so we have to convert kebab case styles into camel case styles
+// 2. remove keys with nil value, else useAnimatedStyle will throw an error
+//    https://github.com/status-im/status-mobile/issues/14756
 export function applyAnimationsToStyle(animations, style) {
   return function() {
     'worklet'
 
     var animatedStyle = {}
 
+    // Normal Style
+    for (var key in style) {
+      if (key == "transform") {
+	var transforms = style[key];
+	var filteredTransforms = []
+
+	for (var transform of transforms) {
+	  var transformKey = Object.keys(transform)[0];
+	  var transformValue = transform[transformKey];
+	  if(transformValue !== null) {
+	    filteredTransforms.push(
+	      {[transformKey.replace(/-./g, x=>x[1].toUpperCase())]: transformValue}
+	    );
+	  }
+	}
+
+	animatedStyle[key] = filteredTransforms;
+      } else {
+	var value = style[key];
+	if (value !== null) {
+	  animatedStyle[key.replace(/-./g, x=>x[1].toUpperCase())] = value;
+	}
+      }
+    }
+
+    // Animations
     for (var key in animations) {
       if (key == "transform") {
         var transforms = animations[key];
@@ -15,18 +45,24 @@ export function applyAnimationsToStyle(animations, style) {
 
         for (var transform of transforms) {
           var transformKey = Object.keys(transform)[0];
-          animatedTransforms.push({
-            [transformKey]: transform[transformKey].value
-          })
+	  var transformValue = transform[transformKey].value;
+	  if (transformValue !== null) {
+            animatedTransforms.push(
+	      {[transformKey.replace(/-./g, x=>x[1].toUpperCase())]: transformValue}
+	    );
+	  }
         }
 
         animatedStyle[key] = animatedTransforms;
       } else {
-        animatedStyle[key] = animations[key].value;
+	var animatedValue = animations[key].value;
+	if (animatedValue !== null) {
+          animatedStyle[key.replace(/-./g, x=>x[1].toUpperCase())] = animatedValue;
+	}
       }
     }
 
-    return Object.assign(animatedStyle, style);
+    return animatedStyle;
   };
 };
 

src/react_native/reanimated.cljs

@@ -14,7 +14,6 @@
                              SlideInUp
                              SlideOutUp
                              LinearTransition)]
-            [camel-snake-kebab.core :as csk]
             [reagent.core :as reagent]
             [utils.collection]))
 
@@ -62,7 +61,7 @@
 
 (defn set-shared-value
   [anim val]
-  (when anim
+  (when (and anim (some? val))
     (set! (.-value anim) val)))
 
 ;; Worklets
@@ -79,17 +78,10 @@
                       (clj->js extrapolation))))
 
 ;;;; Component Animations
-
-;; kebab-case styles are not working for worklets
-;; so first convert kebab case styles into camel case styles
 (defn apply-animations-to-style
   [animations style]
-  (let [animations (utils.collection/map-keys csk/->camelCaseString animations)
-        style      (apply dissoc
-                          (utils.collection/map-keys csk/->camelCaseString style)
-                          (keys animations))]
-    (use-animated-style
-     (.applyAnimationsToStyle ^js worklet-factory (clj->js animations) (clj->js style)))))
+  (use-animated-style
+   (.applyAnimationsToStyle ^js worklet-factory (clj->js animations) (clj->js style))))
 
 ;; Animators
 (defn animate-shared-value-with-timing

src/status_im/data_store/visibility_status_updates.cljs

@@ -9,6 +9,7 @@
   (set/rename-keys visibility-status-update
                    {:publicKey  :public-key
                     :statusType :status-type}))
+
 (defn <-rpc-settings
   [settings]
   (-> settings