title: React Native - How to create Loader with transparent view?
body: <p>I want to create transparent loader like facebook login, so the loader can stacked the view,</p>
  
  <p>like this one:</p>
  
  <p><a href="https://i.stack.imgur.com/1HP32.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1HP32.png" alt="enter image description here"></a></p>
  
  <p>I have a file called <code>Loader.js</code>:</p>
  
  <pre><code>class Loader extends React.Component {
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;View style={styles.nyoba}&gt;
            &lt;Text style={[global.global.HeaderText, {color:'white', justifyContent:'center'}]}&gt;Loading...&lt;/Text&gt;
            &lt;Text style={[global.global.HeaderText, {color:'white', justifyContent:'center', marginBottom:150}]}&gt;Please Wait...&lt;/Text&gt;
            &lt;Spinner
              isVisible={true}
              size={100}
              type={'ThreeBounce'}
              color={'#ffffff'}
            /&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    indicator: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      height: 80
    },
    container: {flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0, 0.3)'},
    nyoba: {justifyContent: 'center', alignItems: 'center', backgroundColor: '#8B0000'},
  });
  </code></pre>
  
  <p>And i want to called <code>Loader.js</code> in every screen while calling an API, but the Loader take's all the screen,</p>
  
  <p>like this : </p>
  
  <p><a href="https://i.stack.imgur.com/TtbeF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TtbeF.png" alt="wreid"></a></p>
  
  <p>How can I makes the <code>Loader.js</code> work like I want? Is there's some way to makes my loader like facebook loader?</p>