Is there an equivalent to shouldRasterizeIOS?

Svg.Text performs quite bad when transforming the <Svg>. Is there any way to rasterize the text as with the shouldRasterizeIOS property on a regular <View>?

[msand]

@msageryd Thought you might be interested in a very successful optimisation strategy I applied the other day. It works great to speed up animations/gestures where you’re only transforming some parts of the content, or where some parts of the svg content changes rarely but various layers need relative transforms and clipping.

It roughly goes like this: Cover the area you want to respond to gestures with an Animated.View/ScrollView, split the svg content you want to animate independently into separate svg roots and wrap them in an Animated.View, then connect the gestures to transform the entire results of rendering the svg content into bitmaps using RN transform arrays and useNativeDriver: true.

This way the svg doesn’t need to rerender the bitmaps at all, and it uses native Views to clip and transform the content instead. https://snack.expo.io/@msand/soundcloud-player-fast-animation-cross-platform

There’s a bit more info on medium: https://medium.com/@dnasleakim/the-fast-cross-platform-end-result-of-my-investigation-can-be-found-here-ed2f0ac79ac7

Expo required a bit of extra logic for Android. But the iOS version seems to work fine in the latest rn and rnsvg. https://medium.com/@dnasleakim/and-for-the-grand-finale-the-fastest-possible-i-think-8eccf71f6e2c

Might be easier to follow the chain of optimisations in chronological order on my profile, as the responses became a bit of a tree over time. https://medium.com/@dnasleakim/responses

E.g. the first change I made was based on looking at the time profile and noticing the endTransparencyLayer was the main time consumer, so I moved the opacity from being on thousands of rects onto a single G element instead, making it already quite usable.

Then, trying to make the bitmap smaller seemed to improve a bit, but the best was just not to rerender any bitmaps at all (especially screen sized), merely clipping and transforming the view of the bitmaps, invalidating the dirty areas and as little extra as possible.

In practice, this runs the whole interaction of the app using only native code, the js is only used to set up the native view hierarchy which then does the initial single render of the svgs, sets up the native gesture responders and animations, and gives full 60fps interaction.

[msand]

@msageryd Published v7.0.0 now 😄