Search code examples
reactjsreact-nativereact-spring

How does react spring render natively?


react spring comes with an animated function that allows components to be modified natively without having to re-render the component. I found that animated components have a couple of methods that are similar to react native's animated components. Is there any connection between the two or are the concepts like .interpolate() just very common for animation libraries?


Solution

  • The library was initially a fork of Animated and still bears lots of resemblance internally. Christopher Chedeau's Animated has a repo dedicated to the web: https://github.com/animatedjs/animated Sadly it is not maintained any longer.

    The way it works is that components get wrapped via createAnimatedComponent (which is exposed as "animated"): https://github.com/react-spring/react-spring/blob/master/src/animated/createAnimatedComponent.tsx

    This higher order component intercepts styles and attributes (which aren't raw values but self-updating classes). It calls "applyAnimatedValues" to write to the target outside React. Each target (dom, native, konva, three, etc) has to fill it out. For instance here's how the dom applies these props: https://github.com/react-spring/react-spring/blob/master/src/targets/web/globals.ts#L82-L127

    Hope that helps!