Updating informations from modal-React native

Question

On my react native app I display information that I fetched from the server this way:

So when I click update profil, I display a modal with text input on it in order to give the user the opportunity to change the information of his profile. The modal look like this:

Now I already created a Fetch Post function that, when I click on the button update it sends static information to the server and the modal closes. but the profile page doesn't refresh until I get out of it and come back.

My question is: whats the best way to get the values from the textinputs, send them through post. and refresh the screen after the modal closes?. Should i use formik?

Here is a look at my code:

export default function MprofilScreen({ navigation }) {
    const [modalVisible, setModalVisible] = useState(false);
    const [Data, setData] = useState([]);
    useEffect(() => {

        fetch('******')
            .then((response) => response.json())
            .then((res) => {
                console.log("repooooonse")
                console.log(res)
                setData(res)
            })
            .done();
    }, []);
    return (
        <View style={{ flex: 1, backgroundColor: 'white' }} >
            <Modal
                animationType="slide"
                transparent={true}
                visible={modalVisible}
                onRequestClose={() => {
                    Alert.alert("Modal has been closed.");
                }}>
                <View style={styles.modalView}>


                    <TouchableOpacity
                        style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
                        onPress={() => {
                            setModalVisible(!modalVisible);
                        }}
                    >
                        <Text style={styles.textStyle}>close</Text>
                    </TouchableOpacity>
                    <ScrollView>
                        <Text style={styles.text}>Nom:</Text>
                        <TextInput style={styles.text_input} placeholder="nom" />
                        ....
                        <Text style={styles.text}>Ville :</Text>
                        <TextInput style={styles.text_input} placeholder="Ville " />
                        <TouchableOpacity
                            style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
                            onPress={() => {
                                setModalVisible(!modalVisible);
                            }}
                        >
                            <Text style={styles.textStyle}>Delete</Text>
                        </TouchableOpacity>
                    </ScrollView>
                </View>

            </Modal>
            <TouchableOpacity style={styles.btn}
                onPress={() => {
                    setModalVisible(true);
                }}>
                <Text style={{ color: 'white', fontSize: 15 }}> Update profil</Text>
            </TouchableOpacity>
            <View >


<View style={styles.main_container}>
    <Text style={styles.text}>Nom:</Text>
    <Text style={styles.text1}>{Data.nom}</Text>

</View>
.....
<View style={styles.main_container}>
    <Text style={styles.text}>Ville:</Text>
    <Text style={styles.text1}> {Data.ville}</Text>

</View>


</View>

        </View>
    );
}

I'm new to react native and I'll appreciate your help!

Answer 1

I'll assume you have the fetching details in componentDidMount of that profile page, and since modal also resides in it, so page doesnt refresh. What you can do is call that function again on modalClose.

suppose you have,

getDetails = () => {
.... fetch details
}

and in componentDidMount you call like :

componentDidmount(){
this.getDetails();
}

So same you can call on modalClose the same function after updating it.

onModalClose = () => {
this.getDetails()
}

hope its clear.feel free for doubtys