Flickers while navigating (Android)

[RajibKDey]

MaskedView flickers showing only the underlying color when navigating on android

Screen.Recording.2022-06-15.at.4.49.58.PM.mov

[erennyuksell]

I have the same problem. Any solutions?

[pkunat]

Struggling with the same problem, no solution so far.

Problem occurs only during StackNavigator's pop and replace actions, push and jumpTo (delegating to the nested BottomTabs) work fine.

I tried setting androidRenderingMode="software" and it didn't help.

    "@react-native-masked-view/masked-view": "0.2.7",

    "@react-navigation/bottom-tabs": "6.0.9",
    "@react-navigation/native": "6.0.6",
    "@react-navigation/native-stack": "6.2.5",
    "@react-navigation/stack": "6.0.11",

[erennyuksell]

i'm using React-native-navigation by wix and it happens when i call more than once setRoot action. @pkunat Problem appears on my side if maskedElement contains an animated component @unfernandito Can you help us please. Thank you.

[erennyuksell]

I think our problem is about this function
` private void updateBitmapMask() {
if (this.mBitmapMask != null) {
this.mBitmapMask.recycle();
}

View maskView = getChildAt(0);
if (maskView != null) {
  maskView.setVisibility(View.VISIBLE);
  this.mBitmapMask = getBitmapFromView(maskView);
  //maskView.setVisibility(View.INVISIBLE);
} else{
  this.mBitmapMask = null;
}

}`

[unfernandito]

Hi guys, I hope you are well.

I'll check the library and try to find a fix for your problem.

Could you please post the steps to reproduce the issue and an example video?

Or even a piece of code to reproduce it could be useful.

Regards

[erennyuksell]

@unfernandito i found what is causing the problem in my scenario. Unmounting the view after the animation is done is causing the problem. More precisely, its re-rendering is causing problems. Like setting state etc.

[pkunat]

@erennyuksell In my case the masked element is an icon from FontAwesome, so no animations (except for the ones introduced by react-navigation). I'm using MaskedView to add gradient to the icons.

@unfernandito Sorry for the late response. Here's a minimalistic project that reproduces this bug:
https://gitlab.com/pkunat/maskedview-react-native-navigation-bug-repro/-/tree/master
I tried to do it in codesandbox, but it kept crashing, so I gave up.
All the relevant code is in App.js https://gitlab.com/pkunat/maskedview-react-native-navigation-bug-repro/-/blob/master/App.js
As for the video, it's basically what you see in @RajibKDey 's opening post - when the transition animation starts, maskElement disappears and the background element is shown for a brief moment (but only when going from view2 to view1)

[unfernandito]

Thanks for the example code, I'll check it and come back with some kind of fix.

It looks like the method which removes sub-children has been executed one by one and It's not removing the entire masked view element at the same time.

[unfernandito]

Yes, that's the issue.

The background element it's been unmounted after the maskedElement causing this strange behavior.

I'll keep looking for a fix.

[michalgrzelak]

@unfernandito could you tell us what the progress is? Do you need any help with that?

[erennyuksell]

@unfernandito Hi, is there any development?