Performance: slow navigation transitions

In general, the problem is that we have an additional delay before transition’s animation starts. If we make transition faster it only will make it look jumpy.

  • re-frame events do not add additional delay, at least there is no difference if react-navigation is called directly or through re-frame event
  • in RN docs TouchableOpacity responding delay is mentioned as a possible reason for delays on transitions, but that’s not likely our case because js thread is usually not overloaded
  • removing backgrounds from different components on the screen doesn’t change anything, this means that overdraws do not contribute to this delay
  • rewriting the whole screen so that it is represented as a single data structure and all subscriptions are registered only at the root component doesn’t have a noticeable effect on performance
  • if some heavy screen is replaced with something like
    [react/view {:width 100 :height 100 :background-clor :black}]
    then transition starts as fast as in native apps, which means that delay is caused by rendering of the view, specifically by the number of children components inside the view

what can be done

Unfortunately I haven’t found a solution which would significantly improve nav transition perf and it seems here we are limited to what RN can provide us. Replacing SVG images with PNG helped a bit (because it reduced the number components on each screen), new version of react-navigation is slightly faster as well, but in overall we run into RN’s limitations.