Skip to content

Instantly share code, notes, and snippets.

@dvcrn

dvcrn/reagent-animated-example.cljs

Last active January 31, 2023 01:08
Download ZIP

Revisions

  1. dvcrn renamed this gist Jan 18, 2016. 1 changed file with 0 additions and 0 deletions.
    0 sample.cljs → reagent-animated-example.cljs
    View file
    File renamed without changes.
  2. dvcrn revised this gist Jan 18, 2016. 1 changed file with 7 additions and 0 deletions.
    7 changes: 7 additions & 0 deletions sample.cljs
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,6 @@
    ;; 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)))
    @@ -6,15 +9,19 @@
    (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)]
  3. dvcrn created this gist Jan 18, 2016.
    30 changes: 30 additions & 0 deletions sample.cljs
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    (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"]]))}))