title: How to display a video from an S3 bucket in React Native?
body: <p>I am trying to download a video from an S3 bucket and pass it to Expo's <a href="https://docs.expo.io/versions/latest/sdk/video/" rel="nofollow noreferrer">Video component</a>. I am using <code>s3.getObject()</code> and the callback function to get the object as an <code>ArrayBuffer</code>. But I don't know how to use this data from this point. I tried concatenating <code>&quot;data:video/mp4;base64,&quot; + videoData.body</code> and passing that as an object. I also tried converting it to <code>Base64String</code>, which also didn't work.</p>
  <pre class="lang-js prettyprint-override"><code>let videoData = {}
  const downloadIntro = async () =&gt; {
  
    s3.getObject(bucketParams, function (err, data) {
      if (err) {
        console.log(&quot;Error:&quot; + err)
      } else {
        console.log(data.ContentLength)    // 1210362
        console.log(data.ContentType)      // video/mp4
        console.log(data.Metadata)         // Object {}
        console.log(data.Body.buffer)      // ArrayBuffer []
        videoData.body = data.Body.buffer
      }
    })
  }
  
  export default function App() {
  
    let [vidData, setVidData] = useState(null)
  
    const playVideo = () =&gt; {
      console.log(&quot;Trying to play&quot;)
      setVidData({video: &quot;data:video/mp4;base64,&quot; + videoData.body})
    }
  
    return (
  
      &lt;SafeAreaView style={styles.container}&gt;
  
        &lt;Button title={&quot;Load Video&quot;} onPress={downloadIntro}/&gt;
        &lt;Button title={&quot;Start&quot;} onPress={playVideo}/&gt;
  
        &lt;Video
          source={vidData}  
          rate={1.0}
          volume={1.0}
          isMuted={false}
          resizeMode={&quot;contain&quot;}
          shouldPlay={paused}
          isLooping={false}
          style={{
            width: 300,
            height: 300
          }}
        /&gt;
  
      &lt;/SafeAreaView&gt;
  
    );
  }
  </code></pre>