CODEWITHSUNDEEP
imagereact-nativebase64
Harry G.
Harry G.

Reputation: 324

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

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:

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

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

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?

Upvotes: 4

Views: 5115

Answers (1)

Harry G.
Harry G.

Reputation: 324

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:

  1. 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}}/>

  2. 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

Upvotes: 4

Related Questions