Add animated onboarding videos

Add animated assets on intro screens

Add component for video on home view

Did not use it for now - as the asset for that video is broken

Do not justify center videos in intro

Update video assets for home view

fix generate-nix.sh script for maven deps

Signed-off-by: Jakub Sokołowski <jakub@status.im>

add missing android-scalablevideoview dependency

Signed-off-by: Jakub Sokołowski <jakub@status.im>

Fix center position of videos in onboarding

Use image for sample key in android

Because during animation transition in creates a black background

Add play when inactive for ios

Signed-off-by: Gheorghe Pinzaru <feross95@gmail.com>

clj-rn.conf.edn

@@ -20,6 +20,7 @@
               "react-native-svg"
               "react-native-webview-bridge"
               "react-native-touch-id"
+              "react-native-video"
               "web3-utils"
               "chance"
               "emojilib"
@@ -81,6 +82,7 @@
 
  ;; Resoures
  :resource-dirs ["resources/images"
+                 "resources/videos"
                  "desktop/resources"]
 
  :figwheel-options {:nrepl-port 7888

components/src/status_im/react_native/resources.cljs

@@ -7,9 +7,6 @@
    :analytics-image     (js/require "./resources/images/ui/analytics-image.png")
    :welcome-image       (js/require "./resources/images/ui/welcome-image.png")
    :welcome             (js/require "./resources/images/ui/welcome.jpg")
-   :intro1              (js/require "./resources/images/ui/intro1.jpg")
-   :intro2              (js/require "./resources/images/ui/intro2.jpg")
-   :intro3              (js/require "./resources/images/ui/intro3.jpg")
    :sample-key          (js/require "./resources/images/ui/sample-key.jpg")
    :lock                (js/require "./resources/images/ui/lock.png")
    :tribute-to-talk     (js/require "./resources/images/ui/tribute-to-talk.png")
@@ -35,12 +32,21 @@
    :phone-nfc-off       (js/require "./resources/images/ui/phone-nfc-off.png")
    :dapp-store          (js/require "./resources/images/ui/dapp-store.png")
    :ens-header          (js/require "./resources/images/ui/ens-header.png")
-   :new-chat-header     (js/require "./resources/images/ui/new-chat-header.png")})
+   :new-chat-header     (js/require "./resources/images/ui/new-chat-header.png")
+   :welcome-video       (js/require "./resources/videos/welcome.mp4")
+   :browser-video       (js/require "./resources/videos/browser.mp4")
+   :wallet-video        (js/require "./resources/videos/wallet.mp4")
+   :chat-video          (js/require "./resources/videos/chat.mp4")
+   :keys-video          (js/require "./resources/videos/keys.mp4")})
 
-(def loaded-images (atom {}))
+(def loaded-assets (atom {}))
 
-(defn get-image [k]
+(defn get-asset [k]
-  (if (contains? @loaded-images k)
+  (if (contains? @loaded-assets k)
-    (get @loaded-images k)
+    (get @loaded-assets k)
-    (get (swap! loaded-images assoc k
+    (get (swap! loaded-assets assoc k
                 (get ui k)) k)))
+
+(def get-image get-asset)
+
+(def get-video get-asset)

fiddle/src/status_im/react_native/resources.cljs

@@ -6,10 +6,6 @@
    :analytics-image      "images/ui/analytics-image.png"
    :welcome-image       "images/ui/welcome-image.png"
    :welcome              "images/ui/welcome.jpg"
-   :intro1               "images/ui/intro1.png"
-   :intro2               "images/ui/intro2.png"
-   :intro3               "images/ui/intro3.png"
-   :sample-key           "images/ui/sample-key.png"
    :lock                "images/ui/lock.png"
    :tribute-to-talk      "images/ui/tribute-to-talk.png"
    :wallet-welcome       "images/ui/wallet-welcome.png"

ios/Podfile.lock

@@ -205,6 +205,11 @@ PODS:
     - React
   - react-native-splash-screen (3.2.0):
     - React
+  - react-native-video (5.0.2):
+    - React
+    - react-native-video/Video (= 5.0.2)
+  - react-native-video/Video (5.0.2):
+    - React
   - react-native-webview (6.11.1):
     - React
   - react-native-webview-bridge (0.33.17):
@@ -297,6 +302,7 @@ DEPENDENCIES:
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-shake (from `../node_modules/react-native-shake`)
   - react-native-splash-screen (from `../node_modules/react-native-splash-screen`)
+  - react-native-video (from `../node_modules/react-native-video`)
   - react-native-webview (from `../node_modules/react-native-webview`)
   - react-native-webview-bridge (from `../node_modules/react-native-webview-bridge`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -375,6 +381,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-shake"
   react-native-splash-screen:
     :path: "../node_modules/react-native-splash-screen"
+  react-native-video:
+    :path: "../node_modules/react-native-video"
   react-native-webview:
     :path: "../node_modules/react-native-webview"
   react-native-webview-bridge:
@@ -443,6 +451,7 @@ SPEC CHECKSUMS:
   react-native-safe-area-context: d288138da2c800caa111f9352e9333f186a06ead
   react-native-shake: de052eaa3eadc4a326b8ddd7ac80c06e8d84528c
   react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865
+  react-native-video: d01ed7ff1e38fa7dcc6c15c94cf505e661b7bfd0
   react-native-webview: 0658813bcc4b6c22f3cbb035a2227aa896a8cbc0
   react-native-webview-bridge: 3023f6b0e84cdf8e4a96511d2b04e73b038f95f0
   React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76

mobile/js_files/package.json

@@ -41,6 +41,7 @@
     "react-native-status-keycard": "git+https://github.com/status-im/react-native-status-keycard.git#v2.5.17",
     "react-native-svg": "^9.8.4",
     "react-native-touch-id": "^4.4.1",
+    "react-native-video": "^5.0.2",
     "react-native-webview": "^6.11.1",
     "react-native-webview-bridge": "git+https://github.com/status-im/react-native-webview-bridge.git#fix/community-webview",
     "react-navigation": "^3.11.0",

mobile/js_files/yarn.lock

@@ -2109,6 +2109,11 @@ elliptic@^6.4.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
+eme-encryption-scheme-polyfill@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-1.0.3.tgz#6ee8d9633bfa5ab44a620ea33854f4e7aa58f3c2"
+  integrity sha512-BO98g91VkDSpFHHgWAeppz9hn1U3WRQWKh4O3mZk5JvaUvgYm0Q67t7/bC+8iEQsK+JA/K7+v2lhz1B+zXR/zA==
+
 emoji-regex@^6.1.0:
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.5.1.tgz#9baea929b155565c11ea41c6626eaa65cef992c2"
@@ -3424,7 +3429,7 @@ jsx-ast-utils@^1.4.0:
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz#3867213e8dd79bf1e8f2300c0cfc1efb182c0df1"
   integrity sha1-OGchPo3Xm/Ho8jAMDPwe+xgsDfE=
 
-keymirror@0.1.1:
+keymirror@0.1.1, keymirror@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/keymirror/-/keymirror-0.1.1.tgz#918889ea13f8d0a42e7c557250eee713adc95c35"
   integrity sha1-kYiJ6hP40KQufFVyUO7nE63JXDU=
@@ -4681,7 +4686,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -4921,6 +4926,15 @@ react-native-touch-id@^4.4.1:
   resolved "https://registry.yarnpkg.com/react-native-touch-id/-/react-native-touch-id-4.4.1.tgz#8b1bb2d04c30bac36bb9696d2d723e719c4a8b08"
   integrity sha512-1jTl8fC+0fxvqegy/XXTyo6vMvPhjzkoDdaqoYZx0OH8AT250NuXnNPyKktvigIcys3+2acciqOeaCall7lrvg==
 
+react-native-video@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/react-native-video/-/react-native-video-5.0.2.tgz#8f07da0cd85a1d4b316d115f3786409efc9e39fb"
+  integrity sha512-zbItbMH0uZYkK7xFKa41+950QjoTrIl60bY1vAP7gxTn20HGHvHZRw28h9A5npK5T0QuWMAkn8twaGzqcDkTug==
+  dependencies:
+    keymirror "^0.1.1"
+    prop-types "^15.5.10"
+    shaka-player "^2.4.4"
+
 "react-native-webview-bridge@git+https://github.com/status-im/react-native-webview-bridge.git#fix/community-webview":
   version "0.33.17"
   resolved "git+https://github.com/status-im/react-native-webview-bridge.git#55acc0cb683dc239673bbe5a94b1f13e7b90e1f7"
@@ -5406,6 +5420,13 @@ setprototypeof@1.1.1:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
   integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
 
+shaka-player@^2.4.4:
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/shaka-player/-/shaka-player-2.5.7.tgz#d8cf3489fef2609957ae44a4faa46a38a5fcda20"
+  integrity sha512-Hcanwr1cnGru1E42EXml6XaoRCByutr3DRI9LRoknZKdIlsBG+F4kT5aWrMlwFw6foFNw9hoMpRsB6LWUPlrIw==
+  dependencies:
+    eme-encryption-scheme-polyfill "^1.0.2"
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"

nix/mobile/android/maven-and-npm-deps/maven/generate-nix.sh

@@ -20,8 +20,13 @@ output_nix_file_path="${current_dir}/maven-sources.nix"
 inputs2nix=$(realpath --relative-to="${current_dir}" "${GIT_ROOT}/nix/tools/maven/maven-inputs2nix.sh")
 
 echo "Regenerating Nix files, this process should take about 90 minutes"
-nix-shell --run "set -Eeuo pipefail; LC_ALL=C ${current_dir}/fetch-maven-deps.sh | sort -u -o ${inputs_file_path}" \
+nix-shell \
-          -A targets.mobile.android.generate-maven-and-npm-deps-shell --show-trace "${GIT_ROOT}/default.nix"
+    --argstr target android \
+    --option sandbox false \
+    --run "set -Eeuo pipefail; LC_ALL=C ${current_dir}/fetch-maven-deps.sh \
+    | sort -u -o ${inputs_file_path}" \
+          -A targets.mobile.android.generate-maven-and-npm-deps-shell \
+          --show-trace "${GIT_ROOT}/default.nix"
 
 pushd ${current_dir}
 ${inputs2nix} ${inputs_file_path} > ${output_nix_file_path}

nix/mobile/android/maven-and-npm-deps/maven/maven-inputs.txt

@@ -343,6 +343,7 @@ https://jcenter.bintray.com/com/sun/xml/fastinfoset/FastInfoset/1.2.13/FastInfos
 https://jcenter.bintray.com/com/tunnelvisionlabs/antlr4-annotations/4.5/antlr4-annotations-4.5
 https://jcenter.bintray.com/com/tunnelvisionlabs/antlr4-runtime/4.5/antlr4-runtime-4.5
 https://jcenter.bintray.com/com/tunnelvisionlabs/antlr4/4.5/antlr4-4.5
+https://jcenter.bintray.com/com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4
 https://jcenter.bintray.com/commons-codec/commons-codec/1.10/commons-codec-1.10
 https://jcenter.bintray.com/commons-codec/commons-codec/1.4/commons-codec-1.4
 https://jcenter.bintray.com/commons-codec/commons-codec/1.6/commons-codec-1.6

nix/mobile/android/maven-and-npm-deps/maven/maven-sources.nix

@@ -5213,6 +5213,21 @@ in {
       sha256 = "0vlqbcihfsgvkzsczp0h6ynz7wnf2d88kvhqfbn1hibry1y7h9wh";
     };
   };
+  "https://jcenter.bintray.com/com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4" =
+  {
+    host = repositories.jcenter;
+    path =
+      "com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4";
+    type = "aar";
+    pom = {
+      sha1 = "450c695ac203f62a5d9064f0264c6d174c73c943";
+      sha256 = "0ihhy4z0vqw2i1lqsz9idz1j84c6bwym7ldg7h6kdnxh7jh7w4s5";
+    };
+    jar = {
+      sha1 = "41f9ccae09aafebcc34593036243b5ac2e77ef8e";
+      sha256 = "1qzz9y9z58nynjvim1pqfkh45419pd79lvnlryqw2f515jjflm1b";
+    };
+  };
   "https://jcenter.bintray.com/commons-codec/commons-codec/1.10/commons-codec-1.10" =
   {
     host = repositories.jcenter;

src/status_im/ui/components/video.cljs

@@ -0,0 +1,7 @@
+(ns status-im.ui.components.video
+  (:require [reagent.core :as reagent]
+            [goog.object :as object]))
+
+(def rn-video (js/require "react-native-video"))
+
+(def video (reagent/adapt-react-class (object/get rn-video "default")))

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

@@ -2,6 +2,7 @@
   (:require [re-frame.core :as re-frame]
             [reagent.core :as reagent]
             [status-im.i18n :as i18n]
+            [status-im.ui.components.video :as video]
             [status-im.react-native.resources :as resources]
             [status-im.ui.components.connectivity.view :as connectivity]
             [status-im.ui.components.icons.vector-icons :as icons]
@@ -22,23 +23,24 @@
             [status-im.ui.components.button :as button])
   (:require-macros [status-im.utils.views :as views]))
 
-(defn welcome-image-wrapper []
+(defn welcome-video-wrapper []
-  (let [dimensions (reagent/atom {})]
+  [react/view {:style {:align-items     :center
-    (fn []
+                       :justify-content :center
-      [react/view {:on-layout  (fn [e]
+                       :flex            1}}
-                                 (reset! dimensions (js->clj (-> e .-nativeEvent .-layout) :keywordize-keys true)))
+   [video/video {:source           (resources/get-video :welcome-video)
-                   :style {:align-items :center
+                 :repeat           true
-                           :justify-content :center
+                 :pause            false
-                           :flex 1}}
+                 :playWhenInactive true
-       (let [padding    0
+                 :resize-mode      :contain
-             image-size (- (min (:width @dimensions) (:height @dimensions)) padding)]
+                 :style            {:position "absolute"
-         [react/image {:source (resources/get-image :welcome)
+                                    :top      0
-                       :resize-mode :contain
+                                    :bottom   0
-                       :style {:width image-size :height image-size}}])])))
+                                    :left     0
+                                    :right    0}}]])
 
 (defn welcome []
   [react/view {:style styles/welcome-view}
-   [welcome-image-wrapper]
+   [welcome-video-wrapper]
    [react/i18n-text {:style styles/welcome-text :key :welcome-to-status}]
    [react/view
     [react/i18n-text {:style styles/welcome-text-description

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

@@ -10,7 +10,8 @@
             [status-im.utils.identicon :as identicon]
             [status-im.ui.components.radio :as radio]
             [status-im.ui.components.text-input.view :as text-input]
-            [taoensso.timbre :as log]
+            [status-im.ui.components.video :as video]
+            [status-im.react-native.resources :as resources]
             [status-im.utils.gfycat.core :as gfy]
             [status-im.ui.components.colors :as colors]
             [reagent.core :as r]
@@ -21,7 +22,6 @@
             [status-im.i18n :as i18n]
             [status-im.constants :as constants]
             [status-im.utils.config :as config]
-            [status-im.utils.platform :as platform]
             [status-im.ui.components.topbar :as topbar]))
 
 (defn dots-selector [{:keys [on-press n selected color]}]
@@ -31,93 +31,105 @@
       ^{:key i}
       [react/view {:style (styles/dot color (selected i))}]))])
 
-(defn intro-viewer [slides window-height]
+(defn intro-viewer [slides window-height window-width]
-  (let [scroll-x (r/atom 0)
+  (let [scroll-x        (r/atom 0)
         scroll-view-ref (atom nil)
-        width (r/atom 0)
+        width           (r/atom 0)
-        height (r/atom 0)
+        height          (r/atom 0)
-        bottom-margin (if (> window-height 600) 32 16)]
+        bottom-margin   (if (> window-height 600) 32 16)]
     (fn []
-      [react/view {:style {:align-items :center
+      [react/view {:style     {:align-items     :center
-                           :flex 1
+                               :flex            1
-                           :margin-bottom bottom-margin
+                               :margin-bottom   bottom-margin
-                           :justify-content :flex-end}
+                               :justify-content :flex-end}
                    :on-layout (fn [e]
                                 (reset! width (-> e .-nativeEvent .-layout .-width)))}
-       [react/scroll-view {:horizontal true
+       [react/scroll-view {:horizontal                        true
-                           :paging-enabled true
+                           :paging-enabled                    true
-                           :ref #(reset! scroll-view-ref %)
+                           :ref                               #(reset! scroll-view-ref %)
-                           :shows-vertical-scroll-indicator false
+                           :shows-vertical-scroll-indicator   false
                            :shows-horizontal-scroll-indicator false
-                           :pinch-gesture-enabled false
+                           :pinch-gesture-enabled             false
-                           :on-scroll #(let [x (.-nativeEvent.contentOffset.x %)]
+                           :on-scroll                         #(let [x (.-nativeEvent.contentOffset.x %)]
-                                         (reset! scroll-x x))
+                                                                 (reset! scroll-x x))
-                           :style {;:width @width
+                           :style                             {;:width @width
-                                   :margin-bottom bottom-margin}}
+                                                               :margin-bottom bottom-margin}}
         (doall
          (for [s slides]
            ^{:key (:title s)}
-           [react/view {:style {:flex 1
+           [react/view {:style {:flex            1
-                                :width @width
+                                :justify-content :flex-start
-                                :justify-content :flex-end
+                                :align-items     :center
-                                :align-items :center
+                                :width           window-width}}
-                                :padding-horizontal 32}}
+            (let [size (min @width @height)]
-            (let [margin 32
+              [react/view {:style     {:flex 1}
-                  size (min @width @height) #_(- (min @width @height) #_(* 2 margin))]
-              [react/view {:style {:flex 1}
                            :on-layout (fn [e]
                                         (reset! height (-> e .-nativeEvent .-layout .-height)))}
-               [react/image {:source (:image s)
+               [video/video {:source           (resources/get-video (:video s))
-                             :resize-mode :contain
+                             :repeat           true
-                             :style {:width size
+                             :pause            false
-                                     :height size}}]])
+                             :playWhenInactive true
-            [react/i18n-text {:style styles/wizard-title :key (:title s)}]
+                             :resize-mode      :contain
-            [react/i18n-text {:style styles/wizard-text
+                             :style            {:background-color :white
-                              :key   (:text s)}]]))]
+                                                :width            size
+                                                :height           size}}]])
+            [react/view {:style {:padding-horizontal 16}}
+             [react/i18n-text {:style styles/wizard-title :key (:title s)}]
+             [react/i18n-text {:style styles/wizard-text
+                               :key   (:text s)}]]]))]
        (let [selected (hash-set (quot (int @scroll-x) (int @width)))]
          [dots-selector {:selected selected :n (count slides)
-                         :color colors/blue}])])))
+                         :color    colors/blue}])])))
 
 (defview intro []
-  (letsubs  [{window-height :height} [:dimensions/window]]
+  (letsubs  [{window-height :height
+              window-width :width} [:dimensions/window]]
     [react/view {:style styles/intro-view}
-     [intro-viewer [{:image (:intro1 resources/ui)
+     [intro-viewer [{:video :chat-video
                      :title :intro-title1
-                     :text :intro-text1}
+                     :text  :intro-text1}
-                    {:image (:intro2 resources/ui)
+                    {:video :wallet-video
                      :title :intro-title2
-                     :text :intro-text2}
+                     :text  :intro-text2}
-                    {:image (:intro3 resources/ui)
+                    {:video :browser-video
                      :title :intro-title3
-                     :text :intro-text3}] window-height]
+                     :text  :intro-text3}] window-height window-width]
      [react/view styles/buttons-container
       [components.common/button {:button-style (assoc styles/bottom-button :margin-bottom 16)
                                  :on-press     #(re-frame/dispatch [:multiaccounts.create.ui/intro-wizard true])
                                  :label        (i18n/label :t/get-started)}]
       [components.common/button {:button-style (assoc styles/bottom-button :margin-bottom 24)
-                                 :on-press    #(re-frame/dispatch [:multiaccounts.recover.ui/recover-multiaccount-button-pressed])
+                                 :on-press     #(re-frame/dispatch [:multiaccounts.recover.ui/recover-multiaccount-button-pressed])
-                                 :label       (i18n/label :t/access-key)
+                                 :label        (i18n/label :t/access-key)
-                                 :background? false}]
+                                 :background?  false}]
       [react/nested-text
        {:style styles/welcome-text-bottom-note}
        (i18n/label :t/intro-privacy-policy-note1)
-       [{:style (assoc styles/welcome-text-bottom-note :color colors/blue)
+       [{:style    (assoc styles/welcome-text-bottom-note :color colors/blue)
          :on-press privacy-policy/open-privacy-policy-link!}
         (i18n/label :t/intro-privacy-policy-note2)]]]]))
 
 (defn generate-key []
   (let [dimensions (r/atom {})]
     (fn []
-      [react/view {:on-layout  (fn [e]
+      [react/view {:on-layout (fn [e]
-                                 (reset! dimensions (js->clj (-> e .-nativeEvent .-layout) :keywordize-keys true)))
+                                (reset! dimensions (js->clj (-> e .-nativeEvent .-layout) :keywordize-keys true)))
-                   :style {:align-items :center
+                   :style     {:align-items      :center
-                           :justify-content :center
+                               :justify-content  :center
-                           :flex 1}}
+                               :background-color :white
-       (let [padding    40
+                               :flex             1}}
-             image-size (- (min (:width @dimensions) (:height @dimensions)) padding)]
+       (let [size (min (:width @dimensions) (:height @dimensions))]
-         [react/image {:source (resources/get-image :sample-key)
+         (if platform/android?
-                       :resize-mode :contain
+           [react/image {:source      (resources/get-image :sample-key)
-                       :style {:width image-size :height image-size}}])])))
+                         :resize-mode :contain
+                         :style       {:width  size
+                                       :height size}}]
+           [video/video {:source           (resources/get-video :keys-video)
+                         :repeat           true
+                         :pause            false
+                         :playWhenInactive true
+                         :resize-mode      :contain
+                         :style            {:width size :height size}}]))])))
 
 (defn choose-key [{:keys [multiaccounts selected-id view-height]}]
   [react/view
@@ -449,7 +461,7 @@
                    :ellipsize-mode  :middle}
        (utils/get-shortened-address pubkey)]]]]])
 
-(defview wizard-generate-key []
+(defview wizard-generate-key [_ focused?]
   (letsubs [wizard-state [:intro-wizard/generate-key]]
     [react/view {:style {:flex 1}}
      [topbar/topbar
@@ -458,9 +470,10 @@
         :accessibility-label :back-button
         :handler #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
      [react/view {:style {:flex 1
+                          :background-color :white
                           :justify-content :space-between}}
       [top-bar {:step :generate-key}]
-      [generate-key]
+      [generate-key focused?]
       [bottom-bar {:step :generate-key
                    :forward-action :intro-wizard/step-forward-pressed
                    :processing? (:processing? wizard-state)}]]]))