title: Render image from JSON stored as base64 with other data in React-Native
body: <h1>I have a JSON file that my app retrieves from the api</h1>
  <h3>It contains name location and other information along with an image in b ase64 encoding</h3>
  <pre><code>[ { meta: { views: 0, tapped: 0, favs: 0, priority: 0 },
      img: { data: [Binary] },
      special: true,
      _id: 5cace9fbeb520a4d8833bc1b,
      date: 2019-04-09T00:00:00.000Z,
      title: 'Test',
      url: 'http://goole.com',
      body: 'Oh it chaned',
      published: false,
      category: 'Sports',
      location: 'dafasfasf',
      __v: 0,
      publishDate: 2019-04-09T18:30:00.000Z,
      subCategory: 'Footabll' },
    { meta: { views: 0, tapped: 0, favs: 0, priority: 0 },
      img: { data: [Binary] },
      special: true,
      _id: 5cacf8e54b578827e8425c83,
      date: 2019-04-02T00:00:00.000Z,
      title: 'Testasd',
      url: 'http://google.com',
      body: 'wadwadwad',
      published: false,
      category: 'Sports',
      location: 'Random',
      subCategory: 'Footabll',
      __v: 0,
      publishDate: 2019-04-09T18:30:00.000Z },
  </code></pre>
  <p>It looks something like this</p>
  <h2>I am unable to render the image in react native</h2>
  <p>I am getting Objects are not valid as a React Child found object with keys{data}
  I understand that this is a object thus this error is occurring but i am unable to find a solution for this (its telling me to iterate thought each key while i want to access the specific key).</p>
  <h2>this is the function i am calling inside render</h2>
  <pre><code>viewfunc(){
  
  
  
  return(
    this.state.dataSource.map((item)=&gt;{
  
      return(
  
      &lt; View key={Math.random()} style={styles.slide3}&gt;
  
        &lt;Text style={styles.text}&gt;{item.title}&lt;/Text&gt;
        &lt;Image
        style={{
          width: 51,
          height: 51,
          resizeMode: 'contain',
        }}
        source={{
          uri:
            'data:image/png;base64,${item.img.data}',
        }}
      /&gt;
        &lt;Text style={styles.body}&gt;{item.body}&lt;/Text&gt;
  
      &lt;/View&gt;)
  
  }
  ))}
  ))}
  </code></pre>
  <p>I am unable to render this img and also if i try to print the base64 by placing <code>{item.img.data}</code> in the text field its returning the Objects are not valid.. error
  I am able to access the meta with <code>{item.meta.views}</code>
  Please i need help!</p>
  <h2>edit</h2>
  <p>This is how i an encoding it when pushing the image to database</p>
  <pre><code>var newImg = fs.readFileSync(req.file.path);
  var encImg = newImg.toString('base64');
  </code></pre>
  <h2>Tried this too</h2>
  <pre><code>  &lt;Image
          style={{
            width: 51,
            height: 51,
  
          }}
          source={{
            uri:
              `data:image/png;base64,`+item.img.data,
          }}
        /&gt;
  </code></pre>
  <p>Still not rendering..</p>