Last active
January 31, 2023 01:08
-
-
Save dvcrn/52957f11a5f24eefba63 to your computer and use it in GitHub Desktop.
reagent react-native animation example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(def animated (.-Animated js/React)) | |
(def animated-value (.-Value animated)) | |
(def animated-view (r/adapt-react-class (.-View animated))) | |
(defn testview [] | |
(r/create-class | |
{:get-initial-state | |
#(clj->js {:bounceValue (animated-value. 0)}) | |
:component-did-mount | |
(fn [this] | |
(.setValue (.. this -state -bounceValue) 1.5) | |
(-> | |
(.spring animated (.. this -state -bounceValue) #js {:toValue 0.8 | |
:friction 1}) | |
(.start))) | |
:display-name "test-view" | |
:reagent-render | |
(fn [] | |
(let [this (r/current-component)] | |
[animated-view {:style {:flex 1 | |
:transform [{:scale (.. this -state -bounceValue)}] | |
:backgroundColor "red" | |
:borderRadius 10 | |
:margin 15 | |
:shadowColor "#000000" | |
:shadowOpacity 0.7 | |
:shadowRadius 2 | |
:shadowOffset {:height 1 :width 0}}} | |
[text {} "This is a test"]]))})) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment