[Example] Could we get an example with CRA

[rileybracken]

I think it would be super useful to have a Create React App example of this available. I started creating one but I am running into problems with React-Dom

import React, { Component } from 'react';
import './App.css';
import Animated from 'animated';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      animation: new Animated.Value(0),
    }
  }

  render() {
    console.log(Animated);
    return (
      <Animated.div className="App">
      </Animated.div>
    );
  }
}

export default App;

And I am getting this error, what am I doing wrong?

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `App`.

[soutar]

Hey @rileybracken, you need to import the ReactDOM version like so:

import Animated from 'animated/lib/targets/react-dom';

[rileybracken]

oh, I started a workaround by doing this:

import Animated from 'animated';

const AnimatedDiv = = Animated.createAnimatedComponent('div');

To me it is a lot cleaner.

Edit:
After further discovery you cannot do this right now and use transforms, refer to this comment #62 (comment).

[browniefed]

@rileybracken this is possible. However just like react-native the main helper methods are provided. You can see that here https://github.com/animatedjs/animated/blob/master/src/targets/react-dom.js#L47

[browniefed]

I think the main reason there is no example (and haven't pushed for one) is that this library isn't prime time or production ready (I mostly mean for the web, for RN it's great). If anything would probably spin up a separate repo to show off examples vs including in this repo.

Could probably pull https://github.com/animatedjs/interactive-docs and switch it over to CRA

[rileybracken]

my main issue with this

import Animated from 'animated/lib/targets/react-dom';

is that I have to remember it, if I am creating a ton of components that have Animated this could get tedious. You could make the same argument for the way I am doing it, but it is declarative on what is happening.

I would rather type more and be more explicit as to what and why I am doing it, instead of just typing more.

That might not make much sense, but it does to me 😄 .

[browniefed]

Oh I'm totally with you, typing that out or even creating a snippet is a bit nuts. Back to the definite not prime time point haha
You could use the browser key in your package.json and point animated at 'animated/lib/targets/react-dom' I think. Or use a webpack resolve /babel config resolve module.

Also I think we can potentially set that up in the Animated and point to the proper file w/ main right?

[rileybracken]

Yeah pointing Animated in the packages.json to animated/lib/targets/react-dom looks like it would work.

It seems like setting that up is the easiest solution. It is almost so easy that it makes me skeptical. Is there a reason why it isn't currently done that way?

With just the eyeball test it seems like this would break RN.

If I did this and made a PR would it break something, I guess I could test it in RN and React.

[browniefed]

@rileybracken This isn't use for RN internals. This is a copy. RN looks at the react-native key in your package.json so we could set that up and point to the correct target that way.

[paigecwilley]

@rileybracken and @browniefed Just a heads up on this, if you use .createAnimatedComponent() for this, it does not recognize or add the transforms to the element style, but will add other styles. I tried the import Animated from 'animated/lib/targets/react-dom';, and the transform worked as expected.

[browniefed]

@paigecwilley This is good to point out. You can check out the implementation of why here https://github.com/animatedjs/animated/blob/master/src/targets/react-dom.js#L25

[rileybracken]

@paigecwilley good to know on those transforms, I edited my comment above that recommends createAnimatedComponent. #62 (comment)

Yeah I think good next steps for this would be to:

1. Translate the example to CRA
2. Create a new issue to do what we are talking about here [Example] Could we get an example with CRA #62 (comment)
3. Potentially create a new issue for fixing transforms in createAnimatedComponent

@browniefed createAnimatedComponent supports transforms in RN correct? I believe this is a issue in of itself.

I could probably start this today and finish 1 and 2, then create separate PR's.

[browniefed]

@rileybracken Yes. However the structure of a transform in RN looks like

{
  transform: [
{ scale: 2},
{rotateX: "90deg"},
{translateY: 50}

]
}

Which is why inject custom mapTransform here https://github.com/animatedjs/animated/blob/master/src/targets/react-dom.js#L17