Unable to hide / change visibility of a react native component

Question

I have a spinner progress bar which shows spinning wheel when user is losing in and once done, it hides. I am using a state for the same when view is loaded spinner is hidden due to visibility state set to false and when login button is clicked its set to true, until this it works but after the result, I want to hide it which doesn't work. Here is the code

export default class LoginScreen extends Component {
static navigationOptions = {
    title: 'Login',
    headerTintColor:'black'
};
constructor(props) {
    super(props);
    this.state = { loginText: 'username',pwdText:'password',loading:false };

    this.onLogin = this.onLogin.bind(this);

}
onLogin() {
    this.setState({
        loading: true
    });



    var params = 'username=';
    params = params.concat(this.state.loginText,'&password=');
    params = params.concat(this.state.pwdText);


    console.log(params);

    fetch("http://example.com/app/loginUser.php", {
        method: 'POST',
        headers: new Headers({
            'Content-Type': 'application/x-www-form-urlencoded', // <-- Specifying the Content-Type
        }),
        body: params // <-- Post parameters
    })
        .then((response) => response.json())
        .then((responseJson) => {

            console.log(responseJson.result);
            if(responseJson.result != "false") {

                this.setState({
                    loading: false
                });

                Alert.alert(
                    'Info',
                    'Login successful.',
                    [
                        {text: 'OK', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}
                    ],
                    { cancelable: false }
                )
            }
            else {
                Alert.alert(
                    'Info',
                    'Unable to login.',
                    [
                        {text: 'OK', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}
                    ],
                    { cancelable: false }
                )
                this.setState({
                    loading: false
                });

            }
        })
        .catch((error) =>{
            console.error(error);
        });


}
render() {
    const { navigate } = this.props.navigation;
    return (
        <ImageBackground
            source={require('./images/marble.jpg')}
            style={styles.backgroundImage}>

            <View style={styles.container}>
                <Spinner visible={this.state.loading} textContent={"Loading..."} textStyle={{color: '#FFF'}} />

                <Image style = {styles.logoFit} resizeMode="contain"  source={require('./images/Logo1.png')}/>

                <View>
                    <TextInput clearTextOnFocus={true} style={styles.textInput} value={this.state.loginText }
                               onChangeText={(textInputValue1) => this.setState({loginText:textInputValue1})}></TextInput>

                    <TextInput clearTextOnFocus={true} style={styles.textInput} value={this.state.pwdText}
                               onChangeText={(textInputValue2) => this.setState({pwdText:textInputValue2})}></TextInput>
                </View>
                <View style={styles.buttonSection}>
                    <TouchableOpacity onPress = {this.onLogin}>
                        <View style = { styles.donebutton}>ß
                            <Text style = {{color: 'white'}}>Login</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>

        </ImageBackground>
    );
}

}

Answer 1

As suggested by @RaviRaj in one of the comment and suggested by @Pramod in above answer, I checked for the state and found that state was getting set. And then as Spinner is modal and Alert is modal too ( thats what I guess) it was messing up. After removing Alert it started working as expected. There is an issue reported here https://github.com/facebook/react-native/issues/11084

Answer 2

Check the state is getting set or not this.setState({ loading: false},() => {console.log(this.state.loading)});

if its not getting set try forceUpdate this.setState({ loading: false},() => {this.forceUpdate()});