How to display binary data as image in react-native - axios

Question

I am very new to react, an i have a use case like, getting the books details in a API response with the image. I need to iterate over the response and I need to display the image.
as suggested displaying binary data as image below is the code i have used for this. But image is not displayed. Any suggestions would be appreciated. What Am i doing wrong?
<View>
<FlatList data={books} renderItem={
data => {
console.log("data is -? " + books.author);
//const buffer = Buffer.from(data.item.image.data, 'binary').toString('base64');
/* let image = btoa(
new Uint8Array(data.item.image.data)
.reduce((d, byte) => d + String.fromCharCode(byte), '')
);*/
const encoded = data.item.image.data;
<View style={styles.imageContainer}>
<Image
source={{
uri: `data:image/jpeg;base64,${encoded}`
} }
//source="{URL.createObjectUrl(encoded)}"
style={styles.stretch}
/>
</View>
}
} />
</View>

Answer 1

Here am sharing the solution how did solve the problem, hope this might help someone. Just sharing the working code.
<FlatList data={books} keyExtractor={(item, index) => item.id.title+index}
renderItem={({ item }) =>
<Item title={item} />
} />
function Item({ title }) {
let ed = 'data:image/png;base64,' + title.image.data;
return (
<View>
<Image source={{ uri: ed }} /></View>
);
}