title: How to show hide loading bar automatically in react native
body: <p>I would like to show a loading bar when a request is made to backend, I have declared interceptor for request and response as follow:</p>
  
  <pre><code>// Add a request interceptor
  axios.interceptors.request.use(function (config) {
      // Do something before request is sent
      console.log("before request");
      return config;
  }, function (error) {
      // Do something with request error
      console.log("before request error");
      return Promise.reject(error);
  });
  
  // Add a response interceptor
  axios.interceptors.response.use(function (response) {
      // Do something with response data
      console.log("after request completed success");
      return response;
  }, function (error) {
      // Do something with response error
      console.log("after request completed error");
      return Promise.reject(error);
  });
  </code></pre>
  
  <p>The idea is that I would like to have a variable or some kind of state that I can show loading bar depending while request is made and not finished, and hide it when receiving the response!</p>
  
  <p>I have a loading bar component separate as below:</p>
  
  <pre><code>export default class ProgressBar extends React.Component {
  
      constructor(props) {
          super(props);
      }
  
      render() {
          return (
              &lt;View&gt;
                  &lt;Progress.Circle size={60} indeterminate={true}/&gt;
              &lt;/View&gt;
          );
      }
  }
  </code></pre>
  
  <p>I tried to create a const value on a separate file smth like <strong>isLoading: false</strong> and then change it from the intereceptors but for some reason its not working the way I want, so that the loading bar shows and hides depending on the value of the isLoading variable!</p>