3 ms·

The scrolling/transitions animations are jittery in the left in the video, it’s a readily identifiable artifact of RN apps in fact, whereas the native one is in

by pen2l 4y ago

The scrolling/transitions animations are jittery in the left in the video, it’s a readily identifiable artifact of RN apps in fact, whereas the native one is incredibly smooth in all refresh transitions and scrolls. I wonder how difficult it is for RN to fix this. Just this one singular improvement in UX would be worth its weight in gold.

helsontaveras18 4y ago
Why is this being down voted? Upon re-watching the video, I did notice a visible stutter in scrolling the app on the left. (To be fair, I didn't notice it the first time I watched the video.)
danielrhodes 4y ago
This is where things get interesting in React Native. The answer is: yes you can have smooth animations. However, the animations have to be driven at the native level and not in JS. The reason for this is: React Native is on a run loop. And on each loop, new state is shared over a bus from the JS side to the native side. So if you manage the frames of an animation over this bus, it's going to be very slow. If the native side manages the animation, you don't have this overhead. The same goes for touches. If you touch something, the native side gets the event and then this goes over the bus and RN picks it up. But if RN then responds to that touch by highlighting a view, that means another message has to go back to native - lots of overhead. For that to happen without a perceptible delay you have to have these events handled on the native side. Another thing that can happen is too many things in the view change at once: you then have a traffic jam on the bus and the UI slows down or becomes unresponsive. This can happen if state changes too quickly. You can get decent performance out of React Native (especially on tables, which is otherwise a dark art in iOS), but you have to know where the bottlenecks pop up.
- siquick 4y ago
  This is some great insight that should be highlighted in the RN docs.
ricardobeat 4y ago
The only stutter visible is during page navigation. Initially I even thought the right one would be RN. This is a solved problem in RN itself, with the default animation libraries already doing most of their work off the main JS thread. But it is extremely easy to overload React when all the extra rendering and business logic is put in, and it starts eating away the performance. The new Fabric architecture is supposed to reduce the native-to-js bridge cost significantly and might make performance on par with native - yet to be seen.

by pen2l 4y ago

helsontaveras18 4y ago

Why is this being down voted? Upon re-watching the video, I did notice a visible stutter in scrolling the app on the left. (To be fair, I didn't notice it the first time I watched the video.)

danielrhodes 4y ago

This is where things get interesting in React Native. The answer is: yes you can have smooth animations. However, the animations have to be driven at the native level and not in JS. The reason for this is: React Native is on a run loop. And on each loop, new state is shared over a bus from the JS side to the native side. So if you manage the frames of an animation over this bus, it's going to be very slow. If the native side manages the animation, you don't have this overhead. The same goes for touches. If you touch something, the native side gets the event and then this goes over the bus and RN picks it up. But if RN then responds to that touch by highlighting a view, that means another message has to go back to native - lots of overhead. For that to happen without a perceptible delay you have to have these events handled on the native side. Another thing that can happen is too many things in the view change at once: you then have a traffic jam on the bus and the UI slows down or becomes unresponsive. This can happen if state changes too quickly. You can get decent performance out of React Native (especially on tables, which is otherwise a dark art in iOS), but you have to know where the bottlenecks pop up.

siquick 4y ago
This is some great insight that should be highlighted in the RN docs.

ricardobeat 4y ago

The only stutter visible is during page navigation. Initially I even thought the right one would be RN. This is a solved problem in RN itself, with the default animation libraries already doing most of their work off the main JS thread. But it is extremely easy to overload React when all the extra rendering and business logic is put in, and it starts eating away the performance. The new Fabric architecture is supposed to reduce the native-to-js bridge cost significantly and might make performance on par with native - yet to be seen.