status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-02-17 05:16:46 +00:00
Code Issues Projects Releases Wiki Activity

stickers panel animation with native driver

Browse Source
This commit is contained in:
Roman Volosovskyi 2019-06-22 10:44:28 +03:00
parent 79454938bc
commit cd567656d6
No known key found for this signature in database
GPG Key ID: 0238A4B5ECEE70DE
1 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/status_im/ui/screens/chat/stickers/views.cljs
View File

@ -110,9 +110,11 @@
[bottom-anim-value alpha-value] [bottom-anim-value alpha-value]
(anim/start (anim/start
(anim/parallel (anim/parallel
[(anim/spring bottom-anim-value {:toValue (styles/stickers-panel-height)}) [(anim/spring bottom-anim-value {:toValue 0
:useNativeDriver true})
(anim/timing alpha-value {:toValue 1 (anim/timing alpha-value {:toValue 1
:duration 500})]))) :duration 500
:useNativeDriver true})])))
(defview scroll-indicator [] (defview scroll-indicator []
(letsubs [window-width [:dimensions/window-width]] (letsubs [window-width [:dimensions/window-width]]
@ -123,15 +125,12 @@
(defview stickers-view [] (defview stickers-view []
(letsubs [selected-pack [:stickers/selected-pack] (letsubs [selected-pack [:stickers/selected-pack]
installed-packs [:stickers/installed-packs-vals] installed-packs [:stickers/installed-packs-vals]
input-focused? [:chats/current-chat-ui-prop :input-focused?] bottom-anim-value (anim/create-value (styles/stickers-panel-height))
bottom-anim-value (anim/create-value 0)
alpha-value (anim/create-value 0)] alpha-value (anim/create-value 0)]
{:component-will-mount #(if (not input-focused?) {:component-will-mount #(show-panel-anim bottom-anim-value alpha-value)}
(show-panel-anim bottom-anim-value alpha-value) [react/animated-view {:style {:background-color :white
(do :height (styles/stickers-panel-height)
(anim/set-value bottom-anim-value (styles/stickers-panel-height)) :transform [{:translateY bottom-anim-value}]
(anim/set-value alpha-value 1)))}
[react/animated-view {:style {:background-color :white :height (if input-focused? 0 bottom-anim-value)
:opacity alpha-value}} :opacity alpha-value}}
(cond (cond
(= selected-pack :recent) [stickers-paging-panel installed-packs selected-pack] (= selected-pack :recent) [stickers-paging-panel installed-packs selected-pack]