Обновите видимость модального React-Native без повторного рендеринга кода

Question

У меня проблемы с этим модалом, мне нужно, чтобы он стал виден при нажатии кнопки без повторного рендеринга кода, но я понятия не имею, как это сделать, это мой модальный код:

    import React from 'react';
    import { StyleSheet, Text, View, TouchableOpacity, FlatList, Modal} from 'react-native';    

    const Modalt = props => {  
        return(
            <Modal visible={props.vivible} transparent={true}>
                    <View style={{width:'100%', height:'100%', justifyContent:'center', alignItems:'center',backgroundColor: 'rgba(52, 52, 52, 0.2)'}}>
                        <View style={{width:'85%', height:'30%', backgroundColor:'white', borderRadius:8, alignItems:'center', justifyContent:'space-evenly', padding:12}}>
                            <View>
                                <Text style={{fontFamily:'Montserrat-SemiBold', fontSize:18}}>Deseja cancelar:</Text>
                            </View>
                            <View>
                                <Text style={{fontFamily:'Montserrat-Medium', textAlign:'center'}}>
                                        Deseja cancelar o agendamento da consulta no  
                                        <Text style={{fontFamily:'Montserrat-SemiBold'}}> dia xx xx xxxxx </Text>  
                                        às <Text style={{fontFamily:'Montserrat-SemiBold'}}>xx:xx </Text> 
                                        com o<Text style={{fontFamily:'Montserrat-SemiBold'}}> paciente Xxxxxxx</Text>
                                </Text>
                            </View>
                            <View style={{flexDirection:'row', justifyContent:'space-evenly', width:'100%'}}>
                                    <TouchableOpacity style={{borderRadius:4, borderWidth:1, borderColor:'red', padding:0, justifyContent:'center', alignItems:'center', paddingHorizontal:18, paddingVertical:4}} onPress={props.onDelete}>
                                        <Text style={{fontFamily:'Montserrat-SemiBoldItalic', color:'red', fontSize:18}}>Não</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={{borderRadius:4, borderWidth:1, borderColor:'green', padding:0, justifyContent:'center', alignItems:'center', paddingHorizontal:18, paddingVertical:4}} onPress={props.onConfirm}>
                                        <Text style={{fontFamily:'Montserrat-SemiBoldItalic', color:'green', fontSize:18}}>Sim</Text>
                                    </TouchableOpacity>
                            </View>
                        </View>
                    </View>
                </Modal>
        );
    } 

    export default Modalt;

А вот сегменты кода, которые должны сделать его видимым

    const modalVisibility = useRef(false);
        const deleteItensHandler = () =>
        {
            console.log('teste');
            modalVisibility.current = true;
        }
        const deleteItensHandlerCancel = () =>
        {
            console.log('teste_dois');
            modalVisibility.current = false;
        }

И этот:

<Modalt vivible={modalVisibility.current} onDelete={deleteItensHandlerCancel}/>

Answer 1

В принципе то, что вы хотите, невозможно. Вы хотите изменить рендеринг без повторного рендеринга ... Я бы предположил, что по любой причине, по которой вам нужно такое поведение, вы можете просто использовать другую логику c для достижения желаемого результата.