1st modal flickers after closing 2nd children modal

[msqar]

I got on one of my app screens, a button, that opens a modal, this modal has also a button, that shows a fullscreen modal. Whenever I close the latter, the first modal that is behind, flickers super fast that you can see for a millisecond the screen beneath and then it renders back again.

Is there any way to solve this issue? Haven't tested on Android, but i'm seeing this on iPhone X simulator iOS 12.1 and also on my iPhone 6S (device).

This is the way i'm setting up the 2nd modal which is full screen:

                    style={styles.modal}
                    backdrop={false}
                    isOpen={this.state.modalOpened}
                    onOpened={ () => this.setState({ modalOpened: true })}
                    onClosed={ () => this.setState({ modalOpened: false })}
                    position={'top'}
                    swipeToClose={false}
                    keyboardTopOffset={0}
                    coverScreen={true}
                    entry={'bottom'}
                    backdropPressToClose={false}>

RN info:

    "react": "16.6.3",
    "react-native": "0.57.8",
    "react-native-modalbox": "^1.6.0",

[msqar]

Seems that someone else had this issue, by setting useNativeDriver to false in the index.js on animateOpen and animateClose seems to solve the issue but i'm modifying the file that is inside the node_modules which im gitignoring. So here are the questions:

1. What do you suggest? I have to copy the entire structure and have a copy myself in my project with the modified index.js?

2. Is this change a real fix for a production release? or i might have a problem in the future?

Thanks

[msqar]

2nd attempt. Tried to apply the "showContent" solution that @mmazzarolo suggested on their git react-native-modal, but on this component i couldn't make it work, the entire content is inside an Animation.View, so i guess it could be because of that. Even though i was able to hide the content while animation close was running, the flashing was still occurring at the end of the animation.

Now, the only way i could solve it was: 1- By avoiding the closing animation completely... but it looks super ugly if the modal just disappears. 2- By setting useNativeDriver: false on both animateOpen and animateClose functions.

But I read that disabling useNativeDriver can be dangerous performance-wise. So i think im stuck?

[carlmagumpara]

same problem here

[msqar]

@carlmagumpara still no responses since i created this :/ #FeelsBadMan

[msqar]

No response yet!? Anyone knows how to solve this for good?

[lucasroca]

I've encountered the same problem. Looks like it only happens when using coverScreen={true}. Checking the code, react-native Modal is being used to wrap the content. So it might be related to this issue

[Tiagopt3]

try coverScreen={false} on every Modal

[gbmsimoes]

For me a similar issue was happening only on Android (or at least only noticeable on Android) when the keyboard was dismissed. So basically I had a TextInput on a modal that was causing the background to flicker when the keyboard was dismissed. coverScreen={false} solved it. If anyone can shed some information regarding why this happens it would be awesome!

[rifansyah]

I've made my own solution for modalbox using this fix proposal for react-native-modal, it'll work with coverScreen={true}.

the idea is the same but without the hideModalContentWhileAnimating prop.

you can check it here: https://github.com/rifansyah/react-native-modalbox

I've been using my forked version and don't get any glitches/flickers since then.