Fork me on GitHub
#reagent
<
2016-06-24
>
michael.heuberger04:06:24

guys, i am having issues writing a custom component that still maintains hiccup format. this code here looks a bit wrong to me:

michael.heuberger04:06:08

how would you rewrite this? maybe make use of apply? no idea here … thx!

savelichalex07:06:35

guys, what happen with Form 2 reagent components (actually with re-frame subscribes) when they unmounted? What happened with ratoms?

seantempesta07:06:32

quick question. I’m trying to use react-native’s animated api, and it depends on using mutable vars. Is there a way to do this in reagent?

seantempesta07:06:09

class FadeInView extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       fadeAnim: new Animated.Value(0), // init opacity 0
     };
   }
   componentDidMount() {
     Animated.timing(          // Uses easing functions
       this.state.fadeAnim,    // The value to drive
       {toValue: 1}            // Configuration
     ).start();                // Don't forget start!
   }
   render() {
     return (
       <Animated.View          // Special animatable View
         style={{opacity: this.state.fadeAnim}}> // Binds
         {this.props.children}
       </Animated.View>
     );
   }
 }

savelichalex07:06:06

@seantempesta: I’m just using wrappers around Animated)

savelichalex07:06:39

and yeah this is mutable vars

seantempesta07:06:43

yeah, I figured it out. Here’s what I did:

(defn fading-image-circle [width height image-uri]
  (let [opacity (AnimatedValue. 0)]
  (fn [width height image-uri]
    [animated-image {:source {:uri image-uri}
                     :style {:width width
                             :borderRadius (/ width 2)
                             :height height
                             :opacity opacity}
                     :onLoad #(.start (.timing Animated opacity #js {:toValue 1}))}])))

savelichalex07:06:39

I’m using this:

(defn start-animated-timing
  ([animated-value config]
   (.. Animated (timing animated-value (clj->js config)) (start)))
  ([animated-value config end-cb]
   (.. Animated (timing animated-value (clj->js config)) (start #(end-cb)))))

martinklepsch10:06:10

anyone some pointers regarding using reagent components inside an Om app?

sbmitchell14:06:35

I haven't actually done that @martinklepsch but what I would probably do since Om supports native react is just reactify the reagent components then use them

sbmitchell14:06:06

not sure if there is a direct way with markup from both in the same component...seems like that might be bad anyway

martinklepsch14:06:31

@mitchelkuijpers: told me about this: (reagent/as-element [my-comp {:arg 1}]) which works great for him

sbmitchell14:06:42

thats what I would do as well

martinklepsch14:06:56

I ended up trying Rum as well which just worked

sbmitchell14:06:57

just treat it as a external react component

martinklepsch14:06:29

I tried as-element before but I somehow thought it would not need the vector-wrapping which made it break 🙂

sbmitchell14:06:35

I pretty much need to use as-element with any wrapping lib say...react-infinite...react-virtualized..because they end up taking child react components

sbmitchell14:06:43

and you cant just jam in reagent

sbmitchell14:06:18

wrapping lib to be more clear I mean... parent container that acts on child react components

sbmitchell14:06:12

I haven't measured the performance or if there is extra rendering cycles or something but I doubt there is