react-native support?

[stevoland]

Hi, thanks for the library, the demos look fantastic.

We plan on building cross-platform components and are looking at animating solutions. Would it be feasible for this project to support react-native? Do you have ideas for an approach? Would you be interested in PRs towards this?

Thanks

[drcmda]

@stevoland rn would most certainly be possible, since animated supports it. I removed react-native.js from animated/targets but if put back it should be fine.

Spring.js in the root has a dependency on animated/targets/react-dom, which is the entry point for the web, here it would have to be able somehow to reference the other. All of the other code is platform independent, the entry points basically just define some specifics.

PRs are welcome.

[Hamatek]

anyone managed to make it work with RN ?

[MarcelBlockchain]

+2

[smooJitter]

What do you mean by “I removed react-native.js”

[drcmda]

I think it would only be a matter of a few polyfills (request/cancelAnimationFrame) and adding View/Image/etc animated components under /arc/animated/targets/react-native. But i don't have the capacity right now and i haven't done much in RN. If anyone wants to give it a go - i could provide some guidance on project structure.

@smooJitter This file needs fixing: https://github.com/drcmda/react-spring/blob/master/src/animated/targets/react-native/index.js

And this is the original from animated: https://github.com/animatedjs/animated/blob/master/src/targets/react-native.js

As well as animateds injectables: https://github.com/animatedjs/animated/tree/master/src/injectable

which in react-spring are globals: https://github.com/drcmda/react-spring/blob/master/src/animated/Globals.js

There are a couple of places inside the code under /src/animated where plain requestAnimationFrame is called. This has to go back to global injects.

Last but not least, the main index contains the dom target hardcoded right now: https://github.com/drcmda/react-spring/blob/master/src/index.js#L1

I guess this could be solved like so:

// default, dom
import { Spring, Trail, animated } from 'react-spring'
animated.div

// react-native
import { Spring, Trail, animated } from 'react-spring/native'
animated.View

Most primitives (Spring, Trail, Transition, Keyframes) should already be platform independent, the only that would need conversion from divs to Views is Parallax.

[drcmda]

Anyway, i had some free time today - it's looking good so far. You can try it out:

yarn add react-spring@5.3.0-beta.0

import React from 'react'
import { StyleSheet, Text, View, TouchableWithoutFeedback } from 'react-native'
import { Spring, animated } from 'react-spring/dist/react-spring-native.esm'

const styles = {
    flex: 1,
    margin: 0,
    borderRadius: 35,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
}

export default class App extends React.Component {
    state = { flag: true }
    toggle = () => this.setState(state => ({ flag: !state.flag }))
    render() {
        const { flag } = this.state
        return (
            <Spring native from={{ margin: 0 }} to={{ margin: flag ? 100 : 0 }}>
                {props => (
                    <TouchableWithoutFeedback onPressIn={this.toggle}>
                        <animated.View style={{ ...styles, ...props }}>
                            <Text>It's working!</Text>
                        </animated.View>
                    </TouchableWithoutFeedback>
                )}
            </Spring>
        )
    }
}

Would need some testing and debugging, i haven't been able to animate colors for instance - and no idea how to debug rn.

[drcmda]

Never mind, colors work - must've been the emulator, on my iphone it's fine. So to me it looks like all behaves as it should be. I'll run some tests and it will be available under react-spring/dist/native in the next release.

[drcmda]

@stevoland @Hamatek @MarcelBlockchain @smooJitter are there any things to watch out for now? For instance, in the dom we use animated.div animated.h1 and so on, it's basically just a list of strings, but in RN if i wanted to pull all the available primitives (View, Text, Image, ........) --- these are real classes, and it would pull down bundle-size. Would RN users be ok with creating their own primitives using createAnimatedComponent, like so:

import { Spring, animated } from 'react-spring/dist/native'
import { View } from 'react-native'

const AnimatedView = animated(View)

<Spring ...>
    {props => <AnimatedView ... />}
</Spring>

?

[drcmda]

Released it: 5.3.1: https://twitter.com/0xca0a/status/1000513216672403456

Goes actually further than react-native, it could animate all platforms now.

[smooJitter]

Whoa.... I will take a look in a few days. I'm traveling for the holiday.