React-transition-group: Using ReactTransitionGroup in React Native

[mosesoak]

I've found that I can use ReactTransitionGroup in a React Native app without problems. @yachaka said here https://github.com/facebook/react-native/issues/9321 that it's really slow but I haven't confirmed that yet, it seems to run fine.

This seems like a useful utility that could pretty easily be offered up to the React Native community.

There are only 2 issues holding it up that I found. One is the DOM reliances in the npm package that prevent it from being installed in a standard RN project:

├── UNMET PEER DEPENDENCY react@^15.0.0
├── UNMET PEER DEPENDENCY react-dom@^15.0.0
└─┬ [email protected]
  └── [email protected]

npm WARN [email protected] requires a peer of react@^15.0.0 but none was installed.
npm WARN [email protected] requires a peer of react-dom@^15.0.0 but none was installed.
npm WARN 3rdParty No description
npm WARN 3rdParty No repository field.
npm WARN 3rdParty No README data
npm WARN 3rdParty No license field.

To get around that temporarily I cloned this repo and pasted these files into my project:

And secondly the default of 'span' means you need to pass component={View}.

        <ReactTransitionGroup component={View}>
          {this.state.showLogo &&
            <AnimatedLogo key='logo' onPress={this.handleLogoPress}/>
          }
        </ReactTransitionGroup>

Even without solving for the View issue, it would be handy to come up with a way to make this library easily installable for React Native, perhaps just via some npm magic?

[yachaka]

@mosesoak You're actually right, it is running fine and I think to my was due to my chrome debugger left open, sadly, it was that dumb. :smile:

[mosesoak]

TransitionGroup provides some much needed transition management functionality.

However, at least with React Native, it requires writing the animations inside each child component. This ends up making animation hard to maintain, and hard to coordinate at the container level.

Maybe that's one reason why Facebook has ended up abandoning this system.

I do think there's value here but I'm trying to find an animation solution that makes it easier to coordinate all the animations on a screen at the container level, even when there are nested components. I will keep searching!

[jquense]

RTG isn't gonna solve any hard animation concerns in React, its more of a general, generic solution to controlling behavior of components that need to mount/unmount over time.

To the RN concern, it should work jsut fine right now, but you do have to install react-dom and dom-helpers (even tho they won't be used). We could probably publish just the TransitionGroup component as a seperate package as well as the bundle here to avoid that. like react-addons does now.

[faceyspacey]

you could also just alias react-dom if you're lazy. i.e. alias it to nothing.

https://www.npmjs.com/package/babel-plugin-module-alias

[peterp]

@jquense I don't think this is true anymore for the 2.0 branch?

[sturmenta]

There is no support in "react-native": "0.56.0" tested with react-alert which uses RTG.

[jtomaszewski]

If this is not working in react-native, what's the workaround?

The biggest problem for me is that I'd like to keep my component in the "DOM" (so it's still rendered as it has been), but not update it anymore (e.g. after open prop is switched to false). So that I can do close animation after the parent wants to close and dismount the child.