title: Google cloud storage on react native
body: <p>I have a project needs to store profile photos on google cloud storage. I got a signed URL from our API, and I upload the image with:</p>
  
  <pre><code>const xhr = new XMLHttpRequest();
  xhr.open("PUT", signedURL, true);
  xhr.onload = () =&gt; {
    const status = xhr.status;
    if (status === 200) {
      console.log("ok");
    } else {
      console.log("Something went wrong!", status);
    }
  };
  
  xhr.onerror = () =&gt; {
    console.log("......Something went wrong!")
  };
  xhr.setRequestHeader('Content-Type', "application/octet-stream");
  
  const fileBuffer = base64.toByteArray(data)
  xhr.send(fileBuffer);
  </code></pre>
  
  <p>To render image on React Native, I am using in this way:</p>
  
  <p><code>&lt;Image source={{uri: 'https://storage.googleapis.com/mybucketname/myfile.jpg'}} /&gt;</code>, </p>
  
  <p>I changed the bucket to Public Access (add member <code>allUsers</code> to Storage Object Viewer).</p>
  
  <p>The result is, from the dashboard, <a href="https://i.stack.imgur.com/nG3Tl.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nG3Tl.jpg" alt="enter image description here"></a> I click <code>Public to internet</code> and <code>Link URL</code>, they return two different images, which <code>Public to internet</code> always the first image and <code>Link URL</code> is always the latest uploaded. Any idea how to fix this or what is the correct way to show the image?</p>
  
  <p>Besides, I also need to upload and review videos and documents, is that possible to render on react native, even if the bucket has to be private?</p>