react-native: creating image from base64 string for iOS and Android (in react-native-elements list)

Question

I'm trying to display icons in a dynamic (react-native-elements) list from a DB via REST call which delivers the icon as base64 encoded string (i.e. here done with jHipster/swagger).

It has to work for both iOS and Android.

I thought this should be a quite common use case, but it turns out somewhat challenging...

What I tried so far:

using static addImageFromBase64(base64ImageData, success, failure) see here
- works for iOS only (@platform ios)
using 'data:' uri scheme like this example (as discussed here):

var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANS ...
<Image source={{uri: base64Icon}} ... />

the PR mentioned in that discussion was closed later, but somehow it seems that 'data:' scheme still was introduced, see RCTConvert.m, although it is not documented in Image
but again it seems it was implemented only for iOS (only in the .m file)
Looking at Image for Android, it seems that rendering is delegated to the native side and this could be the reason why it was not implemented for Android (at least it does not work for me in Android).

So is there any good way to get a base64 image string into an Android react-native app?

Or is there a good practice or library to solve this (getting icons dynamically from a DB via REST API into a react-native app) in a complete different way?

What's the issue you're seeing with base64 encoded images using uri on Android? It works when I test it on my device. — Michael Cheng
– Michael Cheng, Commented Jun 29, 2017 at 22:07
Two things, see if this thread might solve something for you when loading in bigger pictures (we had a similar the same use case). Did you add a height/width to the styling of the picture? — martwetzels
– martwetzels, Commented Jun 30, 2017 at 9:56

Harry G. · Accepted Answer · 2017-12-07 16:04:49Z

4

In fact it works, I was just always combining some different flaws and also added React native elements to increase confusion...
Thanks to martwetzels for leading me in the right direction with the height/width hint.

If someone else has problems with images and the 'data:' scheme, these are the main obstacles I was stumbling over:

For React Native <Image>:
- if you use 'data:' in an <Image>, at least you have to provide width and height in style
- this is mentioned for Network images in the Guide for Images:
  Unlike with static resources, you will need to manually specify the dimensions of your image.
- but unfortunately it is not in the reference for Image component nor the 'data:' scheme is mentioned anywhere
So this is a working example for a React Native <Image>:
```
var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANS ...
<Image style={{width: 50, height: 50}} source={{uri: base64Icon}}/>
```
For images in a react-native-elements <List>
- only the avatar prop will take an url - the leftIcon prop is for icons from an included library like material-icons only - OR for a separate React Native element
- the avatar prop can have an optional separate avatarStyle, but will by default scale the image automatically
- the leftIcon prop with a nested <Image> will again need a style for the picture to appear, with at least width & height
A working example for React Native Elements <List> with leftIcon prop with an <Image> as element (style mandatory!):
```
<List>
    {            
        myItems.map((item, i) => (
        <ListItem
            key={i}
            title={item.name}
            leftIcon={<Image style={{width: 35, height: 35}} source={{uri: item.base64Icon}}/>}
        />
        ))
    }
</List>
```
A working example for React Native Elements <List> with avatar prop (no style, but optional avatarStyle):
```
<List>
    {            
        myItems.map((item, i) => (
        <ListItem
            key={i}
            title={item.name}
            avatar={{uri: item.base64Icon}}
            // optional: avatarStyle={{width: 50, height: 50}}
        />
        ))
    }
</List>
```

So far this is all pretty ovious, once understood... Sorry for asking this dumb question ;-)

As a result, because all my confusion was related to documentation, I will propose some PRs for both React Native and Elements docs.

Edit: PR is now merged and doc changes regarding images with "data:" uri schema and the need to specify size are public meanwhile! Search for "data:" in:
http://facebook.github.io/react-native/docs/images.html
http://facebook.github.io/react-native/docs/image.html

edited Dec 7, 2017 at 16:04

answered Jul 4, 2017 at 16:28

Harry G.

3243 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Harry G. Over a year ago

My doc changes regarding images with "data:" uri schema and the need to specify size are public meanwhile, search for "data:": facebook.github.io/react-native/docs/images.html facebook.github.io/react-native/docs/image.html Thanks to the facebook dev team for merging!

Harsha Over a year ago

am getting multiple base64 items from api,in mobile base64 working if Platform.OS==='web' i can't able to see app icon in web

Collectives™ on Stack Overflow

react-native: creating image from base64 string for iOS and Android (in react-native-elements list)

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related