Flickers while navigating (Android)

[RajibKDey]

MaskedView flickers showing only the underlying color when navigating on android

https://user-images.githubusercontent.com/47169875/173815386-cea97586-bab6-4fbb-9758-e51e6a6dec38.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?