Modal flickering on closeing

[DennyWanye]

Ask your Question

when I closing Modal, the Modal is flickering once. and then it will close.

modalIssue.mov

[DennyWanye]

this is my modal code

import { Portal, TextInput, Text, Modal } from 'react-native-paper';
import { StyleSheet, SafeAreaView } from 'react-native';
import { ReactNode } from 'react';
import { useTheme } from 'react-native-paper';

type formItems = {
    label: string,
    value: string,
    setValue: Function,
}

interface PropsTagEditor {
    title: string,
    visible: boolean,
    formItems: Array<formItems>,
    submitFun: Function,
}

export default function UseEditModal(Props: PropsTagEditor): ReactNode {

    const { title, visible, formItems, submitFun } = Props
    const theme = useTheme();
    const containerStyle = { backgroundColor: theme.colors.background, padding: 20 };

    return (<Portal>
        <Modal visible={visible} onDismiss={() => submitFun()} contentContainerStyle={containerStyle} >
            <SafeAreaView>
                <Text>{title}</Text>
                {
                    formItems.map((item, index) => {
                        return (
                            <TextInput
                                key={index}
                                label={item.label}
                                value={item.value}
                                onChangeText={text => item.setValue(text)}
                                mode="outlined"
                                style={styles.tagInput}
                                multiline={true}
                            />
                        )
                    })
                }
            </SafeAreaView>
        </Modal>
    </Portal>)
}

const styles = StyleSheet.create({
    tagInput: {
        marginTop: 10,
    },
});

[DennyWanye]

this is my modal code

import { Portal, TextInput, Text, Modal } from 'react-native-paper';
import { StyleSheet, SafeAreaView } from 'react-native';
import { ReactNode } from 'react';
import { useTheme } from 'react-native-paper';

type formItems = {
    label: string,
    value: string,
    setValue: Function,
}

interface PropsTagEditor {
    title: string,
    visible: boolean,
    formItems: Array<formItems>,
    submitFun: Function,
}

export default function UseEditModal(Props: PropsTagEditor): ReactNode {

    const { title, visible, formItems, submitFun } = Props
    const theme = useTheme();
    const containerStyle = { backgroundColor: theme.colors.background, padding: 20 };

    return (<Portal>
        <Modal visible={visible} onDismiss={() => submitFun()} contentContainerStyle={containerStyle} >
            <SafeAreaView>
                <Text>{title}</Text>
                {
                    formItems.map((item, index) => {
                        return (
                            <TextInput
                                key={index}
                                label={item.label}
                                value={item.value}
                                onChangeText={text => item.setValue(text)}
                                mode="outlined"
                                style={styles.tagInput}
                                multiline={true}
                            />
                        )
                    })
                }
            </SafeAreaView>
        </Modal>
    </Portal>)
}

const styles = StyleSheet.create({
    tagInput: {
        marginTop: 10,
    },
});

[amanblog]

Hey @DennyWanye did you find a solution for this?

[scottboyd-ai]

Also experiencing this issue, would love a solution.

[bberos]

Also with this problem, any solution?

[scottboyd-ai]

No solution that I've seen. I was seeing this on 5.12.5, but 5.13.1 is out now. I didn't see any commits that would suggest this is fixed, but you never know. I'll be trying an upgrade eventually, but if someone else can confirm that this either is or isn't happening on 5.13.1, it might help.

[bberos]

Agreed, in the meantime what I did was to add a conditional in the modal for when it's visible and this way the flickering stopped, but the fade animation is gone.
Might help for the moment...

   <Portal>
      {visible ? (
	<Modal
            visible={visible}
     ...

[CalculusCoder]

I found a solution; you can check out the respective links. Go to your react native paper modal component in your package.json and within the hide modal callback, replace

if (visibleRef.current) {
    showModal();
} else {
    setRendered(false);
}

With this

 setRendered(false);

Solution