[#13517] UI Component - Message Input

ios/Podfile.lock

@@ -330,8 +330,8 @@ PODS:
     - SDWebImageWebPCoder (~> 0.8.4)
   - RNFS (2.16.6):
     - React
-  - RNGestureHandler (1.8.0):
-    - React
+  - RNGestureHandler (2.5.0):
+    - React-Core
   - RNHoleView (2.1.1):
     - React-Core
   - RNImageCropPicker (0.36.2):
@@ -691,7 +691,7 @@ SPEC CHECKSUMS:
   RNCPushNotificationIOS: c145c6253ea016e5efeff604f2720736b4a596f7
   RNFastImage: 1f2cab428712a4baaf78d6169eaec7f622556dd7
   RNFS: 2bd9eb49dc82fa9676382f0585b992c424cd59df
-  RNGestureHandler: 7a5833d0f788dbd107fbb913e09aa0c1ff333c39
+  RNGestureHandler: bad495418bcbd3ab47017a38d93d290ebd406f50
   RNHoleView: 07572d21c97fad71fdc47f7248a8513e15a38949
   RNImageCropPicker: 35a3ceb837446fa11547704709bb22b5fac6d584
   RNKeychain: 216f37338fcb9e5c3a2530f1e3295f737a690cb1

package.json

@@ -49,7 +49,7 @@
     "react-native-fast-image": "^8.5.11",
     "react-native-fetch-polyfill": "^1.1.2",
     "react-native-fs": "^2.14.1",
-    "react-native-gesture-handler": "^1.8.0",
+    "react-native-gesture-handler": "^2.5.0",
     "react-native-haptic-feedback": "^1.9.0",
     "react-native-hole-view": "git+https://github.com/status-im/react-native-hole-view.git#refs/tags/v2.1.1-status",
     "react-native-image-crop-picker": "git+https://github.com/status-im/react-native-image-crop-picker.git#refs/tags/v0.36.2-status.0",

src/mocks/js_dependencies.cljs

@@ -219,6 +219,8 @@
                                        :FlatList                 #js {}
                                        :ScrollView               #js {}
                                        :TouchableOpacity         #js {}
+                                       :GestureDetector          #js {}
+                                       :Gesture                  #js {:Pan nil}
                                        :createNativeWrapper      identity})
 
 (def react-native-redash #js {:clamp nil})

src/quo/gesture_handler.cljs

@@ -1,13 +1,11 @@
 (ns quo.gesture-handler
   (:require [oops.core :refer [oget]]
-            ["react-native-reanimated" :default animated]
             [reagent.core :as reagent]
             [quo.design-system.colors :as colors]
             ["react-native-gesture-handler"
              :refer (TapGestureHandler PanGestureHandler LongPressGestureHandler
-                                       PureNativeButton TouchableWithoutFeedback TouchableOpacity
-                                       TouchableHighlight
-                                       createNativeWrapper State NativeViewGestureHandler
+                                       TouchableWithoutFeedback TouchableOpacity
+                                       TouchableHighlight State NativeViewGestureHandler
                                        FlatList ScrollView)]))
 
 (def flat-list-raw FlatList)
@@ -25,8 +23,6 @@
 (def long-press-gesture-handler
   (reagent/adapt-react-class LongPressGestureHandler))
 
-(def pure-native-button PureNativeButton)
-
 (def touchable-without-feedback-class TouchableWithoutFeedback)
 
 (def touchable-without-feedback
@@ -42,12 +38,6 @@
 (def touchable-opacity
   (reagent/adapt-react-class TouchableOpacity))
 
-(def raw-button
-  (reagent/adapt-react-class
-   (createNativeWrapper (.createAnimatedComponent animated PureNativeButton)
-                        #js {:shouldActivateOnStart   true
-                             :shouldCancelWhenOutside true})))
-
 (def native-view-gesture-handler (reagent/adapt-react-class NativeViewGestureHandler))
 
 (def states {:began        (oget State "BEGAN")

src/quo2/gesture.cljs

@@ -0,0 +1,13 @@
+(ns quo2.gesture
+  (:require ["react-native-gesture-handler" :refer (GestureDetector Gesture)]
+            [reagent.core :as reagent]))
+
+(def gesture-detector (reagent/adapt-react-class GestureDetector))
+
+(defn gesture-pan [] (.Pan ^js Gesture))
+
+(defn on-update [^js pan handler] (.onUpdate pan handler))
+
+(defn on-start [^js pan handler] (.onStart pan handler))
+
+(defn on-end [^js pan handler] (.onEnd pan handler))

src/quo2/reanimated.cljs

@@ -3,7 +3,7 @@
             [reagent.core :as reagent]
             [clojure.string :as string]
             ["react-native-reanimated" :default reanimated
-             :refer (useSharedValue useAnimatedStyle withTiming withDelay Easing Keyframe)]))
+             :refer (useSharedValue useAnimatedStyle withTiming withDelay withSpring Easing Keyframe)]))
 
 ;; Animated Components
 (def create-animated-component (comp reagent/adapt-react-class (.-createAnimatedComponent reanimated)))
@@ -19,6 +19,7 @@
 ;; Animations
 (def with-timing withTiming)
 (def with-delay withDelay)
+(def with-spring withSpring)
 (def key-frame Keyframe)
 
 ;; Easings

src/status_im/switcher/constants.cljs

@@ -27,10 +27,10 @@
 (def switcher-bottom-positions
   {:android
    {:home-stack 15
-    :chat       57}
+    :chat       140}
    :ios
    {:home-stack 40
-    :chat       67}})
+    :chat       140}})
 
 (defn switcher-bottom-position [view-id]
   (get-in

src/status_im/switcher/switcher.cljs

@@ -8,7 +8,8 @@
             [status-im.switcher.animation :as animation]
             [status-im.ui.components.icons.icons :as icons]
             [status-im.react-native.resources :as resources]
-            [status-im.switcher.switcher-container :as switcher-container]))
+            [status-im.switcher.switcher-container :as switcher-container]
+            [quo.react-native :as rn]))
 
 (defn switcher-button [view-id toggle-switcher-screen-fn shared-values]
   [:f>
@@ -71,7 +72,9 @@
                                       :switcher-container-scale  (reanimated/use-shared-value 0.9)
                                       :close-button-opacity      (animation/switcher-close-button-opacity switcher-button-opacity)
                                       :switcher-container-bottom (animation/switcher-container-bottom-position switcher-screen-bottom)}
-           toggle-switcher-screen-fn #(animation/switcher-touchable-on-press-out switcher-opened? view-id shared-values)]
-       [:<>
-        [switcher-screen toggle-switcher-screen-fn shared-values]
-        [switcher-button view-id toggle-switcher-screen-fn shared-values]]))])
+           toggle-switcher-screen-fn #(animation/switcher-touchable-on-press-out switcher-opened? view-id shared-values)
+           {:keys [keyboard-shown]} (rn/use-keyboard)]
+       (when-not keyboard-shown
+         [:<>
+          [switcher-screen toggle-switcher-screen-fn shared-values]
+          [switcher-button view-id toggle-switcher-screen-fn shared-values]])))])

src/status_im/ui/components/react.cljs

@@ -248,6 +248,14 @@
                   (update props :keyboardVerticalOffset + 44 (:status-bar-height @navigation-const))))]
         children))
 
+(defn keyboard-avoiding-view-new [props & children]
+  (into [keyboard-avoiding-view-class
+         (merge (when platform/ios? {:behavior :padding})
+                (if (:ignore-offset props)
+                  props
+                  (update props :keyboardVerticalOffset + 44)))]
+        children))
+
 (defn scroll-view [props & children]
   (vec (conj children props scroll-view-class)))