[#3630]: Improve dynamic image sizing (#3759)

* [#3630]: Improve dynamic image sizing

src/status_im/react_native/resources.cljs

@@ -26,4 +26,6 @@
    :empty-recent    (js/require "./resources/images/ui/empty-recent.png")
    :analytics-image (js/require "./resources/images/ui/analytics-image.png")
    :welcome-image   (js/require "./resources/images/ui/welcome-image.png")
-   :lock            (js/require "./resources/images/ui/lock.png")})
+   :lock            {:image  (js/require "./resources/images/ui/lock.png")
+                     :width  993
+                     :height 933}})

src/status_im/ui/components/common/common.cljs

@@ -1,6 +1,7 @@
 (ns status-im.ui.components.common.common
   (:require-macros [status-im.utils.views :refer [defview letsubs]])
-  (:require [status-im.i18n :as i18n]
+  (:require [reagent.core :as reagent]
+            [status-im.i18n :as i18n]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.components.common.styles :as styles]
@@ -87,9 +88,15 @@
                   (assoc :accessibility-label accessibility-label))
      value]]))
 
-(defn image-contain
+(defn image-contain [_ _]
-  ([source] (image-contain nil source))
+  (let [content-width (reagent/atom 0)]
-  ([{:keys [style]} source]
+    (reagent/create-class
-   [react/view {:style (merge styles/image-contain
+      {:reagent-render
-                              style)}
+       (fn [{:keys [container-style style]} {:keys [image width height]}]
-    [react/image {:source source :resizeMode :contain :style styles/image-contain-image}]]))
+         [react/view {:style     (merge styles/image-contain container-style)
+                      :on-layout #(reset! content-width (-> % .-nativeEvent .-layout .-width))}
+          [react/image {:source      image
+                        :resize-mode :contain
+                        :style       (merge style
+                                            {:width  @content-width
+                                             :height (/ (* @content-width height) width)})}]])})))

src/status_im/ui/components/common/styles.cljs

@@ -164,12 +164,4 @@
    :color          colors/white})
 
 (def image-contain
-  {:flex-direction  :row
+  {:align-self :stretch})
-   :flex            1
-   :align-items     :center
-   :justify-content :center
-   :flex-wrap       :wrap})
-
-(def image-contain-image
-  {:flex-direction :row
-   :flex           1})

src/status_im/ui/screens/profile/seed/styles.cljs

@@ -4,10 +4,11 @@
 (def intro-container
   {:flex              1
    :align-items       :center
+   :justify-content   :center
    :margin-horizontal 26})
 
 (def intro-image
-  {:padding-vertical 25})
+  {:padding-bottom 10})
 
 (def intro-text
   {:text-align     :center
@@ -26,8 +27,7 @@
 
 (def intro-button
   {:flex-direction :row
-   :margin-top     16
+   :margin-top     16})
-   :margin-bottom  32})
 
 (def six-words-container
   {:flex    1

src/status_im/ui/screens/profile/seed/views.cljs

@@ -36,7 +36,7 @@
 
 (defn intro []
   [react/view {:style styles/intro-container}
-   [components.common/image-contain {:style styles/intro-image}
+   [components.common/image-contain {:container-style styles/intro-image}
     (:lock resources/ui)]
    [react/text {:style styles/intro-text}
     (i18n/label :t/your-data-belongs-to-you)]