react-spring / General

Is my benchmark correct? react-spring really support React Native?

Is my benchmark correct? react-spring really support React Native?

react-spring/General · June 15, 2018 at 9:45pm

Is my benchmark correct? react-spring really support React Native?

react-spring / General · June 15, 2018 at 9:45pm (Edited 7 months ago)
I'm trying to check the performance of the react-spring project, but I'm not sure yet if my results are correct. Below you can see my code and a video that I recorded with my results. I really want to use this library, but I confess that my project will render sometimes 15 or 20 animated components, so I need to be sure that react-spring is using the native resources on React Native. Can someone help me?
https://codesandbox.io/s/yqrrj61jmx?view=editor

Another side question that I have is if react-spring support the velocity property of the RK4 Algorithm.

Anyway, congratulations by this awesome library.



June 16, 2018 at 9:15am

By default it's using rk4, and yes, you can set tension, friction, velocity and restdisplacement, just like in animated. You can also use RN's and IOS's ocillator spring, the GH front site has a section dedicated to it, then you can set the "mass" property as well.

  • reply
  • like

If you're dealing with lots and lots of things that animate, keep in mind that for now react-spring works like rn-animated without the nativeDriver. That means it will apply values in a raf look similar to how d3 and gsap work.

like-fill
1
  • reply
  • like

perhaps it would be easy to get nativeDriver back in, but here i have little RN experience. from what i've seen there are some caveats, too, as only layout props can be animated.

  • reply
  • like

basically if you used animated in RN without usenativeDriver, then it should behave the same or perhaps even a bit faster. If you had useNativeDriver: true in your code, there's currently no way to do this in react-spring

  • reply
  • like

* raf-look = raf-loop

  • reply
  • like

June 16, 2018 at 4:00pm

By default it's using rk4, and yes, you can set tension, friction, velocity and restdisplacement, just like in animated. You can also use RN's and IOS's ocillator spring, the GH front site has a section dedicated to it, then you can set the "mass" property as well.

Thank you for the prompt feedback. How can I set the velocity? I did not see this information on the docs.

  • reply
  • like

basically if you used animated in RN without usenativeDriver, then it should behave the same or perhaps even a bit faster. If you had useNativeDriver: true in your code, there's currently no way to do this in react-spring

I see in the docs a mention about the native boolean property, but not is clear yet how it will affect the the final results, once react-spring will use the raf loopin the end. The animated method when used with the Animated.View can be a solution to check if useNativeDriver works. I will check it out and put my results later.

  • reply
  • like

June 16, 2018 at 8:33pm

config={{ tension, friction, velocity, ... }}

like-fill
1
  • reply
  • like

when you pass the native flag it will use raf, now the component inside spring will render only once and the values aren't numbers and strings any longer but opaque classes

  • reply
  • like

hence you would need const AnimatedView = animated(View)

  • reply
  • like

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

import { View } from 'react-native'

const AnimatedView = animated(View)

<Spring native from={{ opacity: 0 }} to={{ opacity: 1 }}>

{styles => <AnimatedView style={styles} />}

</Spring>

like-fill
1
  • reply
  • like

config={{ tension, friction, velocity, ... }}

Wow! Nice! So it's possible on the same config property? Awesome! I will give it a try. Thanks for the prompt feedback :)

  • reply
  • like

June 17, 2018 at 2:00am

Hey! Just tested here the velocity property inside of the config property and works like a charm. Is the velocity computed in `ms`? I also give a try to animated(Animated.View) using the useNativeDriver property, but it doesn't add any additional effect on the performance. My concern is about adding many processes on the JS Thread and create a bottleneck there. On my stress tests with 100 fragments, I got 15-20FPS on the JS Thread 😢 Is there a way to improve it? Is in the roadmap use the Animated.View with useNativeDriver when possible on React Native? Again, thanks a lot for the support. For sure I will use react-spring after this experience.

  • reply
  • like

June 17, 2018 at 8:10am

as for usenativedriver, yes, it's on the roadmap but it would need some help from devs that have some RN background. react-spring is still quite young and as it grows it will surely get more contributors.

like-fill
1
  • reply
  • like

June 18, 2018 at 12:29am

Awesome! Yeah! I can see this, but even at an early stage, react-spring is amazing. I'll check if I can help with anything else. Is there a roadmap document or some plan to create issues with the "good first issue" label on GitHub?

  • reply
  • like

June 18, 2018 at 7:19am

The most pressing things atm are typescript and proper testing. but if you want to give usenativedriver a shot, well that would be awesome. I forked animated for this project and rewrote some parts of it (src/animated) but the basic premises still apply). but even animated (the repo that's outside the react-native base) doesn't support nativedriver - so it would mean looking into the RN core: https://github.com/facebook/react-native/tree/master/Libraries/Animated/src

like-fill
1
  • reply
  • like

June 18, 2018 at 2:38pm

Sure! I'll investigate these stuff. Will be very useful in the end. Thanks a lot for all support :) It makes the difference.

  • reply
  • like

Log in or sign up to chat