Skip to content

Commit 7f87892

Browse files
flexsurferflexsurfer
committed
fixed intro animation and reanimated errors
1 parent 67028a9 commit 7f87892

File tree

6 files changed

+72
-67
lines changed

6 files changed

+72
-67
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
"react-native-navigation-bar-color": "^2.0.1",
5858
"react-native-permissions": "^2.1.5",
5959
"react-native-reanimated": "^2.1.0",
60-
"react-native-redash": "^14.2.2",
60+
"react-native-redash": "^16.0.11",
6161
"react-native-safe-area-context": "^2.0.0",
6262
"react-native-screens": "^2.10.1",
6363
"react-native-shake": "^3.3.1",

‎src/mocks/js_dependencies.cljs

+1-1
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@
219219
:getBottomSpace (fn [])})
220220
"react-native-screens" (clj->js {})
221221
"react-native-reanimated" react-native-reanimated
222-
"react-native-redash" react-native-redash
222+
"react-native-redash/lib/module/v1" react-native-redash
223223
"react-native-fetch-polyfill" fetch
224224
"react-native-status-keycard" status-keycard
225225
"react-native-keychain" keychain

‎src/quo/animated.cljs

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
[quo.gesture-handler :as gh]
66
[oops.core :refer [oget ocall]]
77
["react-native-reanimated" :default animated :refer (clockRunning EasingNode)]
8-
["react-native-redash" :as redash]
8+
["react-native-redash/lib/module/v1" :as redash]
99
quo.react)
1010
(:require-macros [quo.react :refer [maybe-js-deps]]))
1111

‎src/status_im/navigation/core.cljs

+3-3
Original file line numberDiff line numberDiff line change
@@ -263,9 +263,9 @@
263263
(fn []
264264
(set-root {:root {:bottomTabs
265265
{:options {:bottomTabs {:titleDisplayMode :alwaysShow
266-
:preferLargeIcons false
267-
:elevation 0
268-
:hideShadow true}}
266+
:preferLargeIcons false}}
267+
;:elevation 0
268+
;:hideShadow true}}
269269

270270
:children
271271
[{:stack {:children [{:component {:name :home

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

+62-57
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
[status-im.privacy-policy.core :as privacy-policy]
1111
[status-im.ui.components.colors :as colors]))
1212

13+
(defonce index (reagent/atom 0))
14+
1315
(defn code [val]
1416
^{:key val}
1517
[animated/code {:exec val}])
@@ -22,34 +24,72 @@
2224
[code (animated/set active (if selected 1 0))]
2325
[animated/view {:style (styles/dot-progress active-transition progress)}]])))
2426

25-
(defn dots-selector [{:keys [n selected progress]}]
26-
[react/view {:style (styles/dot-selector)}
27-
(for [i (range n)]
28-
^{:key i}
29-
[dot {:progress progress
30-
:selected (= selected i)}])])
27+
(defn dots-selector [{:keys [n progress]}]
28+
(let [selected @index]
29+
[react/view {:style (styles/dot-selector)}
30+
(for [i (range n)]
31+
^{:key i}
32+
[dot {:progress progress
33+
:selected (= selected i)}])]))
34+
35+
(defn slides-view [slides width]
36+
(let [height (reagent/atom 0)
37+
text-height (reagent/atom 0)
38+
text-temp-height (atom 0)
39+
text-temp-timer (atom nil)]
40+
(fn [_]
41+
[:<>
42+
(doall
43+
(for [s slides]
44+
^{:key (:title s)}
45+
[react/view {:style {:flex 1
46+
:width width
47+
:justify-content :flex-end
48+
:align-items :center
49+
:padding-horizontal 32}}
50+
(let [size (min width @height)]
51+
[react/view {:style {:flex 1}
52+
:on-layout (fn [^js e]
53+
(let [new-height (-> e .-nativeEvent .-layout .-height)]
54+
(swap! height #(if (pos? %) (min % new-height) new-height))))}
55+
[react/image {:source (:image s)
56+
:resize-mode :contain
57+
:style {:width size
58+
:height size}}]])
59+
[quo/text {:style styles/wizard-title
60+
:align :center
61+
:weight :bold
62+
:size :x-large}
63+
(i18n/label (:title s))]
64+
[quo/text {:style (styles/wizard-text-with-height @text-height)
65+
:on-layout
66+
(fn [^js e]
67+
(let [new-height (-> e .-nativeEvent .-layout .-height)]
68+
(when (and (not= new-height @text-temp-height)
69+
(not (zero? new-height))
70+
(< new-height 200))
71+
(swap! text-temp-height #(if (pos? %) (max % new-height) new-height))
72+
(when @text-temp-timer (js/clearTimeout @text-temp-timer))
73+
(reset! text-temp-timer
74+
(js/setTimeout #(reset! text-height @text-temp-height) 500)))))}
75+
(i18n/label (:text s))]]))])))
3176

32-
(defn carousel [slides]
77+
(defn carousel [slides width]
3378
;;TODO this is really not the best implementation, must be a better way
3479
(let [scroll-x (reagent/atom 0)
3580
scroll-view-ref (atom nil)
36-
width (reagent/atom 0)
37-
height (reagent/atom 0)
38-
text-height (reagent/atom 0)
39-
index (reagent/atom 0)
81+
4082
manual-scroll (atom false)
41-
text-temp-height (atom 0)
42-
text-temp-timer (atom nil)
4383
progress (animated/value 1)
4484
autoscroll (animated/value 1)
4585
finished (animated/value 0)
4686
clock (animated/clock)
4787
go-next (fn []
4888
(let [x (if (>= @scroll-x (* (dec (count slides))
49-
@width))
89+
width))
5090
0
51-
(+ @scroll-x @width))]
52-
(reset! index (Math/round (/ x @width)))
91+
(+ @scroll-x width))]
92+
(reset! index (Math/round (/ x width)))
5393
(some-> ^js @scroll-view-ref (.scrollTo #js {:x x :animated true}))))
5494
code (animated/block
5595
[(animated/cond* (animated/and* (animated/not* (animated/clock-running clock))
@@ -72,9 +112,7 @@
72112
(fn [_ _]
73113
[react/view {:style {:align-items :center
74114
:flex 1
75-
:justify-content :flex-end}
76-
:on-layout (fn [^js e]
77-
(reset! width (-> e .-nativeEvent .-layout .-width)))}
115+
:justify-content :flex-end}}
78116
[animated/code {:exec code}]
79117
[react/scroll-view {:horizontal true
80118
:paging-enabled true
@@ -86,48 +124,14 @@
86124
:on-scroll #(let [x (.-nativeEvent.contentOffset.x ^js %)]
87125
(when @manual-scroll
88126
;; NOTE: Will be not synced if velocity is big
89-
(reset! index (Math/round (/ x @width))))
127+
(reset! index (Math/round (/ x width))))
90128
(reset! scroll-x x))
91129
:on-scroll-begin-drag cancel-animation
92130
:on-scroll-end-drag restart-animation
93131
:on-momentum-scroll-end #(reset! manual-scroll false)
94132
:style {:margin-bottom 16}}
95-
(doall
96-
(for [s slides]
97-
^{:key (:title s)}
98-
[react/view {:style {:flex 1
99-
:width @width
100-
:justify-content :flex-end
101-
:align-items :center
102-
:padding-horizontal 32}}
103-
(let [size (min @width @height)]
104-
[react/view {:style {:flex 1}
105-
:on-layout (fn [^js e]
106-
(let [new-height (-> e .-nativeEvent .-layout .-height)]
107-
(swap! height #(if (pos? %) (min % new-height) new-height))))}
108-
[react/image {:source (:image s)
109-
:resize-mode :contain
110-
:style {:width size
111-
:height size}}]])
112-
[react/text {:style styles/wizard-title
113-
:align :center
114-
:weight :bold
115-
:size :x-large}
116-
(i18n/label (:title s))]
117-
[react/text {:style (styles/wizard-text-with-height @text-height)
118-
:on-layout
119-
(fn [^js e]
120-
(let [new-height (-> e .-nativeEvent .-layout .-height)]
121-
(when (and (not= new-height @text-temp-height)
122-
(not (zero? new-height))
123-
(< new-height 200))
124-
(swap! text-temp-height #(if (pos? %) (max % new-height) new-height))
125-
(when @text-temp-timer (js/clearTimeout @text-temp-timer))
126-
(reset! text-temp-timer
127-
(js/setTimeout #(reset! text-height @text-temp-height) 500)))))}
128-
(i18n/label (:text s))]]))]
129-
[dots-selector {:selected @index
130-
:progress progress
133+
[slides-view slides width]]
134+
[dots-selector {:progress progress
131135
:n (count slides)}]])))
132136

133137
(defn intro []
@@ -140,7 +144,8 @@
140144
:text :intro-text2}
141145
{:image (resources/get-theme-image :browser)
142146
:title :intro-title3
143-
:text :intro-text3}]]
147+
:text :intro-text3}]
148+
@(re-frame/subscribe [:dimensions/window-width])]
144149
[react/view styles/buttons-container
145150
[react/view {:style (assoc styles/bottom-button :margin-bottom 16)}
146151
[quo/button {:on-press #(re-frame/dispatch [:init-onboarding])}

‎yarn.lock

+4-4
Original file line numberDiff line numberDiff line change
@@ -6798,10 +6798,10 @@ react-native-reanimated@^2.1.0:
67986798
mockdate "^3.0.2"
67996799
string-hash-64 "^1.0.3"
68006800

6801-
react-native-redash@^14.2.2:
6802-
version "14.2.2"
6803-
resolved "https://registry.yarnpkg.com/react-native-redash/-/react-native-redash-14.2.2.tgz#199746ed51b895e58132aa4d6796686d228ea298"
6804-
integrity sha512-LOBfh96sSZxVnW0bK8afwRdOHnrqmVS7XlpcmATNiRVTs2cGYF32F0o89+/nMoNY5Ffo2CAoIV5nnsFteYT+PA==
6801+
react-native-redash@^16.0.11:
6802+
version "16.0.11"
6803+
resolved "https://registry.yarnpkg.com/react-native-redash/-/react-native-redash-16.0.11.tgz#973c3050a0645e3b9873790a8e68694770a32f27"
6804+
integrity sha512-9yTpeabkAoWASzmhEkynNh1wDTrLVtbE+x9dOV1DI23vRa7k1HI+Y1jOUNOPyRG2ddgHampNq9iHtsLnkK4mtw==
68056805
dependencies:
68066806
abs-svg-path "^0.1.1"
68076807
normalize-svg-path "^1.0.1"

0 commit comments

Comments
 (0)