Animate floating screen border radius (#16384)

src/js/worklets/shell/floating_screen.js

@@ -88,3 +88,21 @@ export function screenZIndex(screenState) {
     }
   });
 }
+
+export function screenBorderRadius(screenState) {
+  return useDerivedValue(function () {
+    'worklet';
+    switch (screenState.value) {
+      case constants.OPEN_SCREEN_WITH_SHELL_ANIMATION:
+        return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(0, { duration: 0 }));
+      case constants.OPEN_SCREEN_WITH_SLIDE_ANIMATION:
+      case constants.OPEN_SCREEN_WITHOUT_ANIMATION:
+        return 0;
+      case constants.CLOSE_SCREEN_WITH_SLIDE_ANIMATION:
+        return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(20, { duration: 0 }));
+      case constants.CLOSE_SCREEN_WITHOUT_ANIMATION:
+      case constants.CLOSE_SCREEN_WITH_SHELL_ANIMATION:
+        return 20;
+    }
+  });
+}

src/status_im2/contexts/shell/jump_to/components/floating_screens/style.cljs

@@ -3,12 +3,13 @@
             [react-native.reanimated :as reanimated]))
 
 (defn screen
-  [{:keys [screen-left screen-top screen-width screen-height screen-z-index]}]
+  [{:keys [screen-left screen-top screen-width screen-height screen-border-radius screen-z-index]}]
   (reanimated/apply-animations-to-style
    {:left          screen-left
     :top           screen-top
     :width         screen-width
     :height        screen-height
+    :border-radius screen-border-radius
     :z-index       screen-z-index}
    {:background-color (colors/theme-colors colors/white colors/neutral-95)
     :overflow         :hidden

src/status_im2/contexts/shell/jump_to/shared_values.cljs

@@ -85,12 +85,15 @@
                         shell.constants/open-screen-without-animation
                         shell.constants/close-screen-without-animation))]
     {:screen-state         screen-state
-     :screen-left    (worklets.shell/floating-screen-left screen-state width switcher-card-left-position)
+     :screen-left          (worklets.shell/floating-screen-left screen-state
+                                                                width
+                                                                switcher-card-left-position)
      :screen-top           (worklets.shell/floating-screen-top screen-state switcher-card-top-position)
      :screen-z-index       (worklets.shell/floating-screen-z-index screen-state)
      :screen-width         (worklets.shell/floating-screen-width screen-state
                                                                  width
                                                                  shell.constants/switcher-card-size)
+     :screen-border-radius (worklets.shell/floating-screen-border-radius screen-state)
      :screen-height        (worklets.shell/floating-screen-height screen-state
                                                                   height
                                                                   shell.constants/switcher-card-size)}))

src/utils/worklets/shell.cljs

@@ -80,6 +80,10 @@
   [screen-state screen-height switcher-card-size]
   (.screenHeight ^js floating-screen-worklets screen-state screen-height switcher-card-size))
 
+(defn floating-screen-border-radius
+  [screen-state]
+  (.screenBorderRadius ^js floating-screen-worklets screen-state))
+
 (defn floating-screen-z-index
   [screen-state]
   (.screenZIndex ^js floating-screen-worklets screen-state))