Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
reagent react-native animation example
;; very simple example on how to use Animated with reagent
(def animated (.-Animated js/React))
(def animated-value (.-Value animated))
(def animated-view (r/adapt-react-class (.-View animated)))
(defn testview []
;; instantiate a new Animated.Value class with 0 = completely hidden
#(clj->js {:bounceValue (animated-value. 0)})
(fn [this]
(.setValue (.. this -state -bounceValue) 1.5)
;; set the animation properties and start it off
(.spring animated (.. this -state -bounceValue) #js {:toValue 0.8
:friction 1})
:display-name "test-view"
;; render does not receive this as first argument
;; to get this, we need to use (reagent.core/current-component)
(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