title: Unable to hide / change visibility of a react native component
body: <p>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 </p>
  
  <pre><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,'&amp;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', // &lt;-- Specifying the Content-Type
          }),
          body: params // &lt;-- Post parameters
      })
          .then((response) =&gt; response.json())
          .then((responseJson) =&gt; {
  
              console.log(responseJson.result);
              if(responseJson.result != "false") {
  
                  this.setState({
                      loading: false
                  });
  
                  Alert.alert(
                      'Info',
                      'Login successful.',
                      [
                          {text: 'OK', onPress: () =&gt; console.log('Cancel Pressed'), style: 'cancel'}
                      ],
                      { cancelable: false }
                  )
              }
              else {
                  Alert.alert(
                      'Info',
                      'Unable to login.',
                      [
                          {text: 'OK', onPress: () =&gt; console.log('Cancel Pressed'), style: 'cancel'}
                      ],
                      { cancelable: false }
                  )
                  this.setState({
                      loading: false
                  });
  
              }
          })
          .catch((error) =&gt;{
              console.error(error);
          });
  
  
  }
  render() {
      const { navigate } = this.props.navigation;
      return (
          &lt;ImageBackground
              source={require('./images/marble.jpg')}
              style={styles.backgroundImage}&gt;
  
              &lt;View style={styles.container}&gt;
                  &lt;Spinner visible={this.state.loading} textContent={"Loading..."} textStyle={{color: '#FFF'}} /&gt;
  
                  &lt;Image style = {styles.logoFit} resizeMode="contain"  source={require('./images/Logo1.png')}/&gt;
  
                  &lt;View&gt;
                      &lt;TextInput clearTextOnFocus={true} style={styles.textInput} value={this.state.loginText }
                                 onChangeText={(textInputValue1) =&gt; this.setState({loginText:textInputValue1})}&gt;&lt;/TextInput&gt;
  
                      &lt;TextInput clearTextOnFocus={true} style={styles.textInput} value={this.state.pwdText}
                                 onChangeText={(textInputValue2) =&gt; this.setState({pwdText:textInputValue2})}&gt;&lt;/TextInput&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.buttonSection}&gt;
                      &lt;TouchableOpacity onPress = {this.onLogin}&gt;
                          &lt;View style = { styles.donebutton}&gt;ß
                              &lt;Text style = {{color: 'white'}}&gt;Login&lt;/Text&gt;
                          &lt;/View&gt;
                      &lt;/TouchableOpacity&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
  
          &lt;/ImageBackground&gt;
      );
  }
  </code></pre>
  
  <p>}</p>