Poor performance Android using MaskedView

[k-ibr]

Hi all,

We are experience extremely poor performance on our mobile app using MaskedView on Android devices. IOS seems to have no trouble keeping things at 60fps, but android devices drop below 30 and on some devices even go to max 7fps. This is very similar to issue #88 to which I responded before, but since that hasn't seen much progress, I am now worried if there is likely going to be a short-term solution on this issue.

MaskedView has become an extremely important library for us as we are developing a visually stunning platform using RN with complex shapes and cool user experiences. Without MaskedView we'd have to manually prepare lots of our assets in various shapes and besides it being labor-intensive, it just doesn't make sense to us to adjust our entire artist workflow for something as a "workaround".

Does anyone perhaps have any work-arounds, solutions, other libraries or suggestions that might help us in the right direction. We are a small startup so we are really trying to develop as LEAN as possible without having to resort into more technical complex solutions or time-intensive solutions as a workaround.

We are using:
-Expo (v40)
-RN (v0.63.3)
-MaskedView (v0.2.3)

[jonathanroze]

Yeah i implement a mask view and it works very fine on IOS, but on Android my FPS drop from 120 fps to 30 fps maximum....

[jonathanroze]

@k-ibr I found something, you can add renderToHardwareTextureAndroid to you MaskView component, a lot of improvement, but I don't know down sides !

[k-ibr]

thanks for the tip @jonathanroze will definitely have a look at that. As you said I am wondering what the downside will be, I expect we have to do a lot of manual cleanup of memory to avoid clogging the device with unused components?

I am also wondering if switching to RN Hermes as the JS engine would give any improvements to the issue. We haven't had a chance to try that out yet, but just thinking out loud here since this issue really is driving us nuts haha and its weird how little of an issue it seems to be that we are the only ones + a handful of others complaining about this and how long the issue has been unsolved ...

[k-ibr]

@jonathanroze tried your suggested fix and though it did help improve performance a little, it also caused a lot of issues. One of the main issues is that some of our components wouldn't re-render properly when wrapped inside of our masked component with the renderToHardwareTextureAndroid attached.

So we are still struggling with this as its still a major issue for our app and is seriously putting a strain on our development.

I hope we can see some improvements soon. What surprises me is that this is the only module that does this, but this one is extremely unstable and not that well maintained.

[k-ibr]

Created a PR for this issue, activating hardware acceleration solved the performance issue for us on complex interactive Masked Views (such as animated)

[k-ibr]

Fixed on V0.2.4

[wemow]

For my case I went from 19fps to 50-55 with renderToHardwareTextureAndroid, any other ideas?

[wemow]

Nope, my bad, after a device rotation it drops to 14fps, the View is under a fullscreen video for example, it's 60fps so,
Screen render, MarskedView is visible (renderToHardwareTextureAndroid) => 54fps
Screen render, MarskedView is visible (no renderToHardwareTextureAndroid) => 20fps
Toggle a fullscreen video with a MaskedView under it => 60fps
Device rotation to initial, MaskedView is visible => 14fps