Modal flickering on closeing

[DennyWanye]

Ask your Question

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

https://github.com/callstack/react-native-paper/assets/37296472/b5917747-45d9-41ef-b404-060c570f8e85

[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,
    },
});