Clojurians
#cljsrn
<
2016-01-18
>

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

artemyarulin07:01:06

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

dvcrn08:01:45

someone here tried to use animated yet?

dvcrn08:01:30

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
  }
}
this is the example from the website

dvcrn08:01:55

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

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

dvcrn08:01:19

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

dvcrn08:01:05

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

artemyarulin08:01:55

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

dvcrn08:01:21

hmm what would you suggest instead for this?

artemyarulin08:01:07

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

dvcrn08:01:40

you that will work with reagent?

dvcrn08:01:04

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

artemyarulin08:01:06

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

dvcrn08:01:26

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

artemyarulin08:01:09

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

dvcrn08:01:48

I'm sure you can as well - somehow :stuck_out_tongue:

artemyarulin08:01:52

another way - maybe RN animation supports custom functions as handlers

dvcrn08:01:58

Let me check what reagent passes into my lifecycle methods

dvcrn08:01:36

looks react-y

artemyarulin08:01:34

Animated.spring(                          // Base: spring, decay, timing
      this.state.bounceValue,                 // Animate `bounceValue`
      {
        toValue: 0.8,                         // Animate to smaller size
        friction: 1,                          // Bouncier spring
      }
actually looking into this - how they make binding to this.state.bounceValue. I mean it should return value in JS, but at the same time animation manages to change this value. Looks like JXS magic

artemyarulin08:01:57

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

dvcrn08:01:20

hrrmm that's actually a good point

artemyarulin08:01:45

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

artemyarulin08:01:55

so you’ll see the actual JS code

dvcrn08:01:41

bounceValue: new Animated.Value(0)

dvcrn08:01:47

I don't think this is just a integer

dvcrn08:01:58

so it uses the reference to whatever that is

artemyarulin08:01:03

it’s not JSX magic then :simple_smile:

artemyarulin08:01:43

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

jaen08:01:49

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

dvcrn08:01:04

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

artemyarulin08:01:20

oh, cool - then it solves it

dvcrn08:01:25

let me try that -

jaen08:01:04

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

jaen08:01:21

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

dvcrn08:01:53

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

dvcrn08:01:57

that's what I just tried

jaen08:01:06

The problem is

jaen08:01:46

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.

dvcrn08:01:17

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

jaen09:01:06

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

jaen09:01:11

That sounds reasonable to me.

dvcrn09:01:34

then let me try that

dvcrn09:01:37

fingers crossed

dvcrn09:01:11

omg it works!

dvcrn09:01:59

thanks a lot @jaen, @artemyarulin :simple_smile:

artemyarulin09:01:44

@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?

dvcrn09:01:25

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

alwx17:01:20

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 :simple_smile:

tord18:01:11

@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.

alwx19:01:06

@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 :simple_smile:

alwx19:01:30

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.

artemyarulin21:01:44

@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.

artemyarulin21:01:05

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

mjmeintjes21:01:46

@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.

artemyarulin21:01:17

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

pesterhazy21:01:23

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

pesterhazy21:01:01

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

mjmeintjes21:01:01

@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.

mjmeintjes22:01:07

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

pesterhazy22:01:38

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…}

artemyarulin22:01:52

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

mjmeintjes22:01:11

@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?

pesterhazy22:01:39

it's in the simulator

mjmeintjes22:01:26

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

pesterhazy22:01:34

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

pesterhazy22:01:11

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

pesterhazy22:01:41

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.

pesterhazy22:01:53

and

Unbalanced calls start/end for tag 5

pesterhazy22:01:13

and

Not shimming window.location - location already set to 

pesterhazy22:01:22

but otherwise reloading works!

pesterhazy22:01:05

:floppy_disk:

mjmeintjes22:01:33

@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.

wei22:01:47

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