@tord: That’s sad, but yeah - RN not for everything and still quite new

someone here tried to use animated yet?

class Playground extends React.Component {
  constructor(props: any) {
    super(props);
    this.state = {
      bounceValue: new Animated.Value(0),
    };
  }
  render(): ReactElement {
    return (
      <Animated.Image                         // Base: Image, Text, View
        source={{uri: 'http://i.imgur.com/XMKOH81.jpg'}}
        style={{
          flex: 1,
          transform: [                        // `transform` is an ordered array
            {scale: this.state.bounceValue},  // Map `bounceValue` to `scale`
          ]
        }}
      />
    );
  }
  componentDidMount() {
    this.state.bounceValue.setValue(1.5);     // Start large
    Animated.spring(                          // Base: spring, decay, timing
      this.state.bounceValue,                 // Animate `bounceValue`
      {
        toValue: 0.8,                         // Animate to smaller size
        friction: 1,                          // Bouncier spring
      }
    ).start();                                // Start the animation
  }
}

but in cljs we usually save local state inside an atom something like

(let [local-state (atom {})])

here's my problem:

this.state.bounceValue.setValue(1.5);     // Start large
    Animated.spring(                          // Base: spring, decay, timing
      this.state.bounceValue,                 // Animate `bounceValue`
      {
        toValue: 0.8,                         // Animate to smaller size
        friction: 1,                          // Bouncier spring
      }
    ).start();                                // Start the animation

the this.state.bounceValue.setValue will just transform into a reset! but how about Animated.spring? It seems like this is mutating the state. If we work with atoms, it can't do that

do you really want to save animation state inside your atom?

hmm what would you suggest instead for this?

Not sure about that - but I guess you can always create a property in React component (this.state.bounceValue in this case)

you that will work with reagent?

https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components#form-3-a-class-with-life-cycle-methods is where it mentions local state

Not even sure how I could access a this reference inside a custom reagent component

not sure about reagent, know nothing about it. But yeah - I’m almost sure that under the hood it creates React components. You just have to find a way how to add property there

hm I think I'll annoy the people over at #C0620C0C8

Yeah. Well - at least with Om-Next it’s possible and not considered as a hack. I bet you can achieve the same with reagent

I'm sure you can as well - somehow 😛

another way - maybe RN animation supports custom functions as handlers

Let me check what reagent passes into my lifecycle methods

looks react-y

Animated.spring(                          // Base: spring, decay, timing
      this.state.bounceValue,                 // Animate `bounceValue`
      {
        toValue: 0.8,                         // Animate to smaller size
        friction: 1,                          // Bouncier spring
      }

I mean in runtime with simple JS it would be Animated.spring(0,{toValue:0.8,friction:1}), it’s not a macros - animation doesn’t know what field to change after

hrrmm that's actually a good point

Maybe you can get some simple animation with JS and compile it to JS using packager

so you’ll see the actual JS code

ah -

bounceValue: new Animated.Value(0)

I don't think this is just a integer

aha

good

so it uses the reference to whatever that is

it’s not JSX magic then

phew

but question is still open - how to add property to React component with Reagent to use it with animation

@dvcrn: re: getting access to this - (reagent/current-component) should do the trick.

oh hi jaen, didn't know you are here too

oh, cool - then it solves it

let me try that -

I lurk; don't have a smartphone to test it on, but there's always something to be learned.

Also, that's only needed in the render function - in the lifecycle methods you get this as an argument.

(r/create-class
      {:get-initial-state
        #(clj->js {:bounceValue (animated-value. 0)})

that's what I just tried

As described here - https://github.com/reagent-project/reagent/blob/master/src/reagent/core.cljs#L109-L126

Yeah

The problem is

If I'm looking at it right - reagent doesn't store state in React state directly - it has an atom in React state that stores it.

that's why I was thinking about directly manipulating it through the % reference in the lifecycle methods

As in (set! (oget this "state") "someStateProp" some-value) where oget would be goog.object.get?

That sounds reasonable to me.

then let me try that

fingers crossed

omg it works!

Nice!

thanks a lot @jaen, @artemyarulin

@dvcrn: oh nice. Do you mind putting the end solution to some gist? For the future references. Not the full blown example, but just important things to make animation happen?

sure

how to do simple animations with animated in reagent - https://gist.github.com/dvcrn/52957f11a5f24eefba63

Thanks!

http://strapmobile.com/native-starter-pro/ Looks cool

it is kinda strange to create product (react native) that allows to create native-looking apps, and create app kit (native starter pro) that doesn't look native

@alwx: Although it is technically possible to create native-looking apps with React Native, I think it would take a lot of work. Too many user interface components (even something as basic as buttons) are still not available out of the box. I've seen FaceBook devs claim that the goal is to make React Native apps indistinguishable from true native apps, but there is clearly still a long way to go before we're there. For the moment, it seems better suited for apps where ease and speed of development are more important than native look and feel.

@tord: hm. I don't know about iOS, but libraries like https://github.com/react-native-material-design/react-native-material-design contain almost everything you need to write nice-looking Material Design applications. Of course, there are problems (first of all, problems with customization), of course, there are components that are still not available, but most of UI components for Android are ready to be used. And, of course, you can contribute and add any desired functionality to any UI component

I am an Android developer, and for me there is only one fundamental problem with React native, and this problem doesn't allow to create apps indistinguishable from true native apps. I am talking about activity transitions (activity ~ screen in android application) We don't have real activities in React Native, we have only one activity, and React's own backstack for "scenes" within this one activity. Of course, it is not a big problem, but, unfortunately, I don't think it is possible to implement transitions that look like activity transitions.

@mjmeintjes: Reading though this https://github.com/mjmeintjes/boot-react-native/pull/19/ "Add support for reading Android log messages “. Do you really want to create a wrapper around everything related to development with RN? Kinda the same as re-natal? I mean one of the reasons why I decided to create my own tool because re-natal does a lot of things and abstracts developer from RN, while I think it should do only one thing - make CLJS development possible.

(while ktoa does a lot even now and I’m thinking of splitting that)

@artemyarulin: Not everything, I just add tasks as I use them in my development. As they are separate tasks, you can basically pick and choose what you want to use. In this case, all I did was just wrap =adb logcat -v time *:S ReactNative:V ReactNativeJS:V= in a boot task, allowing me to put it into the same pipeline and enabling me to see all log output in one terminal (instead of having to run adb logcat in a separate terminal). Really useful for running tests while developing.

For sure it’s useful! I mean it’s cool to have it, I’m just not sure that it should belong to this project. Never mind, just thinking out loud

@mjmeintjes: hey, I was just looking at boot-react-native

saw a problem with the wrapLog functions in the examples, but noticed now that you fixed it already

@artemyarulin: No worries, good to hear some feedback/ideas. My goal with boot-react-native is to make development with cljs and RN easier. This does not mean abstracting developer from RN, but it does mean that I want to add more development tools than just 'making it possible' - as it is possible without boot-rn, just not simple. In my mind, this means: (1) fast development experience (fast compile, i.e. :optimizations :none), (2) logging (unified way to display log messages from device), (3) testing (allow for easy running of tests - both unit and integration). What this won't include is anything that requires deploy time dependency - in other words, boot-react-native should be development time only.

@pesterhazy: Yeah, that wrapLog function was not a good idea.

with the latest version, I'm still seeing this on iOS:

Reload websocket error: g…g.net.W…t.ErrorEvent {type: "error_1", target: g…g.net.WebSocket, currentTarget: g…g.net.WebSocket, propagationStopped_: false, defaultPrevented: false…}

@mjmeintjes: Got it, good explanation. But keep in mind - I’m checking your every commit 😄

@pesterhazy: Try changing all references to localhost in example/build.boot to the ip address/hostname of your development machine. I suspect that your error might be related to the websocket not finding the correct host. Are you running in simulator or on real device?

it's in the simulator

@pesterhazy: Let me know if it doesn't work after changing the references to localhost to the hostname of your dev machine.

@mjmeintjes: ah I restarted my boot processes, now it works with localhost

it should always work with localhost in the iOS simulator (the iOS app is just a process on the local machine)

I'm still seeing

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.

and

Unbalanced calls start/end for tag 5

and

Not shimming window.location - location already set to 

but otherwise reloading works!

💾

@pesterhazy: Great, thanks for testing! I think the first 2 message are related, and probably related to the way I've set up the example app to enable reloading. Not critical, but I'll check them out and see where I can fix. Message 3 is not a problem, and expected if you are running in Chrome Debugger.

how do you guys include third-party js libraries? npm?

@wei https://github.com/clojure/clojurescript/wiki/Quick-Start#dependencies