Skip to content

Instantly share code, notes, and snippets.

@dvcrn
Last active January 31, 2023 01:08
Show Gist options
  • Save dvcrn/52957f11a5f24eefba63 to your computer and use it in GitHub Desktop.
Save dvcrn/52957f11a5f24eefba63 to your computer and use it in GitHub Desktop.
reagent react-native animation example
;; very simple example on how to use Animated with reagent
;; https://facebook.github.io/react-native/docs/animations.html
(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
;; instantiate a new Animated.Value class with 0 = completely hidden
#(clj->js {:bounceValue (animated-value. 0)})
:component-did-mount
(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})
(.start)))
:display-name "test-view"
;; render does not receive this as first argument
;; to get this, we need to use (reagent.core/current-component)
: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