Implementing masked view on entire app causes the UI and JS fps to be capped at 35 FPS or lower fro Android

[SamyOptimize]

I tried implementing this splash screen tutorial using this library and it works great on iOS, but for android I noticed my entire app is running slow/choppy, the performance monitor is showing the app running at 35 FPS or lower for UI and JS. If I remove the MaskedView that's wrapping my entire app then it runs as normal.

[johnfrancisgit]

+1 same issue

[olarra]

I spent a time to understand what was causing my android app to be slow. If I remove the masked-view then the JS and UI thread pass to 59.9 fps, otherwise it passes to 35 fps or lower.

I was building a Twitter’s App Loading Animation and I didn't necessarily the maskElement to stay after app's loaded, so I could solve the issue using a local component state to send a null value as maskElement after render or animation completed.

I also had to disable a warning because of the masked-view props definition.

I think that a temporary workaround it would be to set a null value on unmount component as well.

// state to set null value as mask element
const [hideMask, setHideMask] = React.useState<boolean>(false);
// ignore expected warning
LogBox.ignoreLogs(['MaskedView: Invalid `maskElement` prop was passed to MaskedView']);
// MaskElement
const Mask = () => (<View style={{height:"100%", width: "100%", backgroundColor: "black"}}/>);
// MaskedView component
<MaskedView  style={{ flex: 1, flexDirection: 'row', height: '100%' }}
             maskElement={hideMask ? null as any : <Mask/> }>
  {/* Shows behind the mask, you can put anything here, such as an image */}
  <View style={{ flex: 1, height: '100%', backgroundColor: '#324376' }} />
  <View style={{ flex: 1, height: '100%', backgroundColor: '#F5DD90' }} />
  <View style={{ flex: 1, height: '100%', backgroundColor: '#F76C5E' }} />
  <View style={{ flex: 1, height: '100%', backgroundColor: '#e1e1e1' }} />
</MaskedView>

[olarra]

Hello, I upgraded to the latest version but this issue is still present.

[brandtnewlabs]

I noticed I was still using @react-native-community/masked-view (version 0.10 or something) and didn't know there was an update for this package in this new repository. I experienced the performance issues on Android too but upgrading to the current version of this package solved it!

[olarra]

Hi @brandtnewww have you verified the fps rate ? your app is entirely wrapped by the MaskedView ? I'm actually using the latest version 0.2.1, and still having frame rate below 30 fps.

[brandtnewlabs]

@olarra I used the MaskView for masking an image on a single screen and it didn't had an impact on the fps then. BUT, when I animate the height of the mask (reanimated v2), the FPS drops on my Google Pixel 3A.

[k-ibr]

@brandtnewww Should be fixed with V0.2.4, please test and let me know!

[MedElba]

@k-ibr Hi! I tested it and partially yes! I have some screens with flatlist inside and in the Items i have some gradient text.. before v0.2.4 the list was lagging even if only 1 list is mounted, now 1 list doesn't lag but if i have more than one mounted the app lags a lot.. this only on android with renderToHardwareTextureAndroid prop.. any suggestion?

Thanks!!

[I-vasilich-I]

I tried implementing this splash screen tutorial using this library and it works great on iOS, but for android I noticed my entire app is running slow/choppy, the performance monitor is showing the app running at 35 FPS or lower for UI and JS. If I remove the MaskedView that's wrapping my entire app then it runs as normal.

I made it too, using this tutorial. The problem in my case is that I have video cards on my app and apparently react-native-video, react-native-youtube, react-native-youtube-iframe doesn't show the video, play only the sound. It took me a week of googling, re-implementing with different libs same component, and finally re-initiating the whole project and rebuilding it piece by piece to figure out that the MaskedView is the reason the video doesn't work. It's my first project on RN) maybe that's the reason it took me so long.