Pourquoi toujours ouvrir Modal par défaut lors de l'ouverture d'un écran dans React-Native?

Dans mon projet React-Native, je souhaite utiliser Modal inside render. J'ai déclaré une variable d'état comme ci-dessous -

mport React, { Component } from 'react';
import {
    Text, View, ScrollView, StyleSheet, Image, TextInput, NetInfo, TouchableOpacity,
    TouchableHighlight, AsyncStorage, Modal, Alert, Button
} from 'react-native';

import { ICON_NOTE, ICON_TODO, ICON_TAG, ICON_REMINDER, ICON_URGENT, ICON_OFFICE, ICON_PERSONAL, ICON_WORK } from '../actions/ActionTypes';
import LoginScreen from '../components/LoginScreen';

export default class HelloWorldApp extends Component {

state = {

    isLoading: false,
    getValue: null,
    ModalVisibleStatus: false
}

constructor() {
    super();
    this.state = {
        title: '',
        details: '',
        timestamp: '',
        status: '',
        url: '',
        mail: '',
        phone: '',
        category: '',
        showLoader: false,
        showAlert: false,
        isNetConnected: true,
        catImage: null,
    }
};

updateImage(image, category) {
    this.setState({
        catImage: image,
        category: category
    })
}

updateValue(text, field) {
    if (field == 'title') {
        this.setState({
            title: text
        })
    }
    else if (field == 'details') {
        this.setState({
            details: text
        })
    }

}

ShowModalFunction(visible) {
    this.setState({ ModalVisibleStatus: visible });
}

// net connection starts
async componentDidMount() {
    const token = await AsyncStorage.getItem('token');
    this.setState({ getValue: token });
}

render() {
    console.log('#ZZZ2:', this.state.getValue);
    return (
        <View style={{ flex: 1 }}>
            <ScrollView keyboardShouldPersistTaps={'handled'}>
                <View style={styles.container}>
                    <View style={styles.inputContainerEmail}>
                        <Image style={styles.inputIcon} source={{ uri: this.state.catImage }} />
                        <TextInput style={styles.inputs}
                            placeholder="Title"
                            keyboardType="email-address"
                            underlineColorAndroid='transparent'
                            onChangeText={(text) => this.updateValue(text, 'title')} />
                    </View>

                    <View style={styles.inputContainerDetails}>
                        <TextInput style={styles.inputs}
                            placeholder="Details"
                            multiline
                            underlineColorAndroid='transparent'
                            onChangeText={(text) => this.updateValue(text, 'details')} />
                    </View>
                    <ScrollView horizontal={true}>
                        <View style={{ flexDirection: 'row', flex: 1, marginTop: 10, marginBottom: 10, marginRight: 20, marginLeft: 10 }}>
                            <TouchableOpacity style={{ justifyContent: 'center', alignItems: 'center', marginRight: 10 }}
                                onPress={() => { this.updateImage(ICON_NOTE, '1') }}>
                                <Image style={styles.inputIconCategory} source={{ uri: ICON_NOTE }} />
                                <Text style={{ marginLeft: 25, marginTop: 5 }}>Note</Text>
                            </TouchableOpacity>
                        </View>
                    </ScrollView>
                    <TouchableOpacity style={styles.buttonContainerRegister}
                        onPress={() => {
                            console.log("#Ctegory:" + this.state.category + "\n Token:" + this.state.getValue + "\nTitle:" + this.state.title + "\nDetails:" + this.state.details + "\Timestamp:" + this.state.timestamp)
                        }}
                    >
                        <Text>Save</Text>
                    </TouchableOpacity>
                    <Modal
                        transparent={false}
                        animationType={"slide"}
                        visible={this.state.ModalVisibleStatus}
                        onRequestClose={() => { this.ShowModalFunction(!this.state.ModalVisibleStatus) }} >
                        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                            <View style={styles.ModalInsideView}>
                                <Text style={styles.TextStyle}>Text Component With Some Sample Text In Modal. </Text>
                                <Button title="Click Here To Hide Modal" onPress={() => { this.ShowModalFunction(!this.state.ModalVisibleStatus) }} />
                                {/* Put All Your Components Here, Which You Want To Show Inside The Modal. */}
                            </View>
                        </View>
                    </Modal>
                    <Button onPress={() => { this.ShowModalFunction(true) }} title="Click Here To Show Modal" />
                </View>
            </ScrollView>
        </View>
    );
}

Pour montrer le modal, j'ai déclaré une fonction-

 <Modal
          transparent={false}

          animationType={"slide"}

          visible={this.state.ModalVisibleStatus}

          onRequestClose={ () => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } >


  <View style={{ flex:1, justifyContent: 'center', alignItems: 'center' }}>


      <View style={styles.ModalInsideView}>


          {/* Put All Your Components Here, Which You Want To Show Inside The Modal. */}

          <Text style={styles.TextStyle}>Text Component With Some Sample Text In Modal. </Text>

          <Button  title="Click Here To Hide Modal" onPress={() => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } />

          {/* Put All Your Components Here, Which You Want To Show Inside The Modal. */}


      </View>

    </View>


  </Modal>

Et à l'intérieur de la fonction de rendu Je viens d'écrire montrer un modal comme ci-dessous sur une pression de bouton-

 ShowModalFunction(visible) {

    this.setState({ModalVisibleStatus: visible});

  }

Maintenant, le problème est que chaque fois que je lance l'écran par défaut, le modal reste ouvert. Mais j'ai initialement déclaré la variable ModalVisibleStatus à false.

Voici le code complet de Ma classe-

HelloWorldApp.js

i

this.state = { 

        ModalVisibleStatus: false 
    };