Wrap keyboard avoiding view with safe area offset

src/status_im/ui/components/keyboard_avoid_presentation.cljs

@@ -0,0 +1,18 @@
+(ns status-im.ui.components.keyboard-avoid-presentation
+  (:require [status-im.ui.components.react :as react]
+            [oops.core :refer [oget]]
+            [reagent.core :as reagent]))
+
+(defn keyboard-avoiding-view []
+  (let [this     (reagent/current-component)
+        props    (reagent/props this)
+        children (reagent/children this)]
+    [react/safe-area-consumer
+     (fn [insets]
+       (let [vertical-offset (+ (oget insets "top")
+                               ;; 10 is the margin-top for presentation modal
+                                10)]
+         (reagent/as-element
+          (into [react/keyboard-avoiding-view (merge props
+                                                     {:keyboard-vertical-offset vertical-offset})]
+                children))))]))

src/status_im/ui/screens/group/views.cljs

@@ -13,6 +13,7 @@
             [status-im.ui.components.common.common :as components.common]
             [status-im.ui.components.checkbox.view :as checkbox]
             [status-im.ui.components.button :as button]
+            [status-im.ui.components.keyboard-avoid-presentation :as kb-presentation]
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.list.views :as list]
@@ -165,7 +166,6 @@
 (defn searchable-contact-list []
   (let [search-value (reagent/atom nil)]
     (fn [{:keys [contacts no-contacts-label toggle-fn allow-new-users?]}]
-      (prn contacts)
       [react/view {:style {:flex 1}}
        [react/view {:style (styles/search-container)}
         [search/search-input {:on-cancel #(reset! search-value nil)
@@ -181,7 +181,7 @@
 (views/defview contact-toggle-list []
   (views/letsubs [contacts                [:contacts/active]
                   selected-contacts-count [:selected-contacts-count]]
-    [react/view {:style styles/group-container}
+    [kb-presentation/keyboard-avoiding-view {:style styles/group-container}
      [toolbar/toolbar {:border-bottom-color colors/white}
       toolbar/default-nav-back
       [react/view {:style styles/toolbar-header-container}
@@ -192,22 +192,21 @@
          (i18n/label :t/group-chat-members-count
                      {:selected (inc selected-contacts-count)
                       :max      constants/max-group-chat-participants})]]]]
-     [react/keyboard-avoiding-view {:flex 1}
-      [searchable-contact-list
-       {:contacts          contacts
-        :no-contacts-label (i18n/label :t/group-chat-no-contacts)
-        :toggle-fn         group-toggle-contact
-        :allow-new-users?  (< selected-contacts-count
-                              (dec constants/max-group-chat-participants))}]
-      [react/view {:style (styles/bottom-container)}
-       [react/view {:style components.styles/flex}]
-       [react/view
-        [button/button
-         {:type                :next
-          :accessibility-label :next-button
-          :label               (i18n/label :t/next)
-          :disabled?           (zero? selected-contacts-count)
-          :on-press            #(re-frame/dispatch [:navigate-to :new-group])}]]]]]))
+     [searchable-contact-list
+      {:contacts          contacts
+       :no-contacts-label (i18n/label :t/group-chat-no-contacts)
+       :toggle-fn         group-toggle-contact
+       :allow-new-users?  (< selected-contacts-count
+                             (dec constants/max-group-chat-participants))}]
+     [react/view {:style (styles/bottom-container)}
+      [react/view {:style components.styles/flex}]
+      [react/view
+       [button/button
+        {:type                :next
+         :accessibility-label :next-button
+         :label               (i18n/label :t/next)
+         :disabled?           (zero? selected-contacts-count)
+         :on-press            #(re-frame/dispatch [:navigate-to :new-group])}]]]]))
 
 ;; Add participants to existing group chat
 (views/defview add-participants-toggle-list []
@@ -226,7 +225,7 @@
            (i18n/label :t/group-chat-members-count
                        {:selected (+ current-participants-count selected-contacts-count)
                         :max      constants/max-group-chat-participants})]]]]
-       [react/keyboard-avoiding-view {:flex 1}
+       [kb-presentation/keyboard-avoiding-view {:flex 1}
         [searchable-contact-list
          {:contacts          contacts
           :no-contacts-label (i18n/label :t/group-chat-all-contacts-invited)
@@ -250,7 +249,7 @@
      [topbar/topbar
       {:title  :t/edit-group
        :modal? true}]
-     [react/keyboard-avoiding-view {:style {:flex 1}}
+     [kb-presentation/keyboard-avoiding-view {:style {:flex 1}}
       [react/view {:style {:padding        16
                            :flex           1}}
        [react/view {:style (add-new.styles/input-container)}