diff --git a/src/quo2/components/inputs/profile_input/component_spec.cljs b/src/quo2/components/inputs/profile_input/component_spec.cljs index 6a767ac105..c21fa65ad7 100644 --- a/src/quo2/components/inputs/profile_input/component_spec.cljs +++ b/src/quo2/components/inputs/profile_input/component_spec.cljs @@ -5,7 +5,8 @@ (h/describe "Profile Input" (h/test "renders user avatar with placeholder name if no value is specified" (h/render [profile-input/profile-input - {:placeholder "Your Name"}]) + {:placeholder "Your Name" + :image-picker-props {:full-name "Your Name"}}]) (-> (js/expect (h/get-by-text "YN")) (.toBeTruthy))) diff --git a/src/quo2/components/inputs/profile_input/view.cljs b/src/quo2/components/inputs/profile_input/view.cljs index a5f301bc70..5ccef27a65 100644 --- a/src/quo2/components/inputs/profile_input/view.cljs +++ b/src/quo2/components/inputs/profile_input/view.cljs @@ -6,7 +6,6 @@ [quo2.components.inputs.title-input.view :as title-input] [quo2.foundations.colors :as colors] [react-native.core :as rn] - [react-native.platform :as platform] [react-native.hole-view :as hole-view])) (defn profile-input @@ -15,49 +14,42 @@ on-press title-input-props image-picker-props]}] - (let [full-name (:full-name image-picker-props)] - [rn/view - {:style (style/container customization-color)} - [rn/view - (if platform/ios? - [hole-view/hole-view - {:holes [{:x 33 - :y 24 - :width 24 - :height 24 - :borderRadius 12}]} - [user-avatar/user-avatar - (assoc image-picker-props - :customization-color customization-color - :full-name (if (seq full-name) - full-name - placeholder) - :status-indicator? false - :size :medium)]] - [user-avatar/user-avatar - (assoc image-picker-props - :customization-color customization-color - :full-name (if (seq full-name) - full-name - placeholder) - :status-indicator? false - :size :medium)]) - [buttons/button - {:accessibility-label :select-profile-picture-button - :type :grey - :override-theme :dark - :override-background-color (colors/alpha colors/white 0.05) - :on-press on-press - :icon-size 20 - :width 24 - :size 24 - :icon :i/camera - :style style/button - :inner-style style/button-inner} :i/camera]] - [rn/view {:style style/input-container} - [title-input/title-input - (merge title-input-props - {:blur? true - :override-theme :dark - :placeholder placeholder - :customization-color customization-color})]]])) + [rn/view + {:style (style/container customization-color)} + [rn/view + [hole-view/hole-view + ;; Force re-render hole view when props are changed + ;; https://github.com/status-im/status-mobile/issues/15577 + {:key (hash + (if (:profile-picture image-picker-props) + (:profile-picture image-picker-props) + image-picker-props)) + :holes [{:x 33 + :y 24 + :width 24 + :height 24 + :borderRadius 12}]} + [user-avatar/user-avatar + (assoc image-picker-props + :static? true + :status-indicator? false + :size :medium)]] + [buttons/button + {:accessibility-label :select-profile-picture-button + :type :grey + :override-theme :dark + :override-background-color (colors/alpha colors/white 0.05) + :on-press on-press + :icon-size 20 + :width 24 + :size 24 + :icon :i/camera + :style style/button + :inner-style style/button-inner} :i/camera]] + [rn/view {:style style/input-container} + [title-input/title-input + (merge title-input-props + {:blur? true + :override-theme :dark + :placeholder placeholder + :customization-color customization-color})]]]) diff --git a/src/status_im2/contexts/onboarding/create_profile/view.cljs b/src/status_im2/contexts/onboarding/create_profile/view.cljs index a5b16bbaae..af66c42d1f 100644 --- a/src/status_im2/contexts/onboarding/create_profile/view.cljs +++ b/src/status_im2/contexts/onboarding/create_profile/view.cljs @@ -106,8 +106,11 @@ :content (fn [] [method-menu/view on-change-profile-pic])}])) - :image-picker-props {:profile-picture @profile-pic - :full-name @full-name} + :image-picker-props {:profile-picture (when @profile-pic {:uri @profile-pic}) + :full-name (if (seq @full-name) + @full-name + (i18n/label :t/your-name)) + :customization-color @custom-color} :title-input-props {:default-value @full-name :auto-focus true :max-length c/profile-name-max-length