title: React Native - base64 image
body: <p>I'm trying to display an image that's been recorded to base64. I can console log and confirm the image is working. But I am not quite sure how to display it from the API request.</p>
  <p>I'm completely new to typescript &amp; coding in general, so just trying to get a further understanding, been stuck on this little problem for a little while.</p>
  <pre class="lang-js prettyprint-override"><code>const graphClient = Client.initWithMiddleware(clientOptions);
  
  export class GraphManager {
    static getPhoto = async () =&gt; {
      return await graphClient
          .api('/me/photo/$value')
          .get()
          // display image 
          .then(res =&gt; {
            const reader = new FileReader();
            reader.readAsDataURL(res);
            reader.onloadend = () =&gt; {
            // return base64 image
              return reader.result
            };
          })
    };
  </code></pre>
  <p>Then on my main component</p>
  <pre class="lang-js prettyprint-override"><code>
      const userPhoto = GraphManager.getPhoto()
      const HomeComponent = () =&gt; {
  
      const userContext = React.useContext(UserContext);
      return (
        &lt;View style={styles.container}&gt;
          &lt;ActivityIndicator
            color={Platform.OS === 'android' ? '#276b80' : undefined}
            animating={userContext.userLoading}
            size='large'
          /&gt;
          {userContext.userLoading ? null : (
          &lt;Image style={{ width: 200, height: 200 }} source={{ uri:`${UserPhoto}`}}/&gt;
          )}
        &lt;/View&gt;
      );
    };
  </code></pre>
  <p>I am able to get the image to show, if I put the base64 data in another file and export it as a const. But that's as far as I've gotten. I am new to classes/methods.</p>