react native modal not close after setState false

Question

I have set modal visibility to false but it still showing. I cant figure out what causes this issue. this my code at loading.js. I'm use this component in main what happen when setState false but its just close after close simolator and restart the device

import React,{Component} from 'react';
import PropTypes from 'prop-types'
import {View, Image, Modal, StyleSheet, Text} from "react-native";

export default class Loader extends Component{
    render(){
        const {animationType,modalVisible}=this.props;
        return(
            <Modal

                animationType={animationType}
                transparent={true}
                visible={modalVisible}>
                <View style={styles.wrapper}>
                    <View style={styles.loaderContainer}>
                        <Image
                            source={require('../img/loading.gif')}
                            style={styles.loaderImage}/>

                    </View>

                </View>

            </Modal>

        )
    }
}

Loader.propTypes={
    animationType:PropTypes.string.isRequired,
    modalVisible:PropTypes.bool.isRequired
}

this main class

 export default class ForoshRah extends Component {
        constructor() {
            super();
            I18nManager.forceRTL(true);
            this.state = {
                image: null,
                images: null,
                loadingVisible:false,
            };
            this.onValueChange2=this.onValueChange2.bind(this);
            this.OnSubmiteData=this.OnSubmiteData.bind(this);
        }
        onValueChange2(value: string) {
            this.setState({
                Field: value,
            });
        }
        async OnSubmiteData(){
            this.setState({loadingVisible:true})
            let token = await    AsyncStorage.getItem('token',token);
            let response = await          
            fetch(url,{
                method:'POST',
                headers:{
                    'Content-Type':'application/json',
                    Authorization:'JWT'+" "+token,
                }

                ,body: JSON.stringify({
                    title,
     
                })
            })
            let register = await response.json();
            this.setState({userID:register.id})
            if(response.status===200){
                this.UploadImage()
            }
        }
        async UploadImage() {
    
            let token = await            AsyncStorage.getItem('token',token);
            let response = await fetch(url,{
                method:'POST',
                headers:{
                    Authorization:'JWT'+" "+token,
                },body: formData
            })
            let uimage = await response;
            console.log('user',this.state.userID);
            if(response.status=200){

                handleCloseModal = () => {
                    console.log(this.state.loadingVisible);
                    this.setState({ loadingVisible: false})
                    });
                };
    this.props.navigation.dispatch({ type: 'Navigation/BACK' })

            }else {
                setTimeout(() => {
                    this.setState({ loadingVisible: false })
                }, 100)

            }
            setTimeout(() => {
                this.setState({ loadingVisible: false })
            }, 100)
        }
        render() {
            return (
                <KeyboardAwareScrollView >

                    <View style={{marginBottom:'10%'}}>
                    <Button block  style={{backgroundColor:'#8e25a0'}}  onPress={this.OnSubmiteData.bind(this)}>
                    </Button>
                    </View>
                <Loader 
                        modalVisible={loadingVisible}
                        animationType="fade"
                />
                </KeyboardAwareScrollView>


                    );
        }
    }

onsubmitdata setState true and after response going to 200 Setstate set false in code main

Answer 1

You cannot just call state name as you have did. You should do like below.

<Loader 
        modalVisible={this.state.loadingVisible}
         animationType="fade"
 />