Base64 image data not rendered in iOS

[gavaliswapnil]

No description provided.

[gavaliswapnil]

import React from 'react'
import Svg, { Image } from 'react-native-svg'

const SvgComponent = props => (
<Svg width={500} height={383} {...props}>
<Image
width={500}
height={383}
xlinkHref="data:image/png;base64,<base64_image_string>/>
)

export default SvgComponent

Above code not working in iOS

[msand]

This seems to work fine at least: https://github.com/magicismight/react-native-svg-example/blob/5a972149f22e0464152d487e6aab015a368ba02a/examples/Svg.js#L153-L185

[jpamarohorta]

Sorry I couldn't understand. Is there a react-native-svg support for images in base64 or the only solution is to use the Image component from react-native?

[msand]

You can use it, but you need to use the href attribute:

import React, { Component } from 'react';
import { View, StyleSheet, Image } from 'react-native';
import { Svg, G, Circle, Path, Image as SvgImage } from 'react-native-svg';

const b64 =
  'data:image/png;base64,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\nCXEZ8NXSXXTAHuBMqO4r3Yi6yaDQPMWxwP3A0aU76YgtwAqo9pVuRN3jrQE0XzdiSDTpdOBPSjeh\nbvKMQvMQVwLXle6ig/YBZ0N1V+lG1C0GhYYUS4F7gFeW7qSj7qP3eYWPPFVjvPSkIUQFfAVDoqST\ngT8v3YS6xaDQMK4Bzi/dhFgH4fugxnjpSQOKE4GtgI/kbIdHgFOheq50Ixp/nlFoUH+LIdEmS4G/\nLN2EusEzCg0gJoHtpbvQYV4EjobqhdKNaLx5RqFBRH+oXZYA3opc2RkUGkD1DPCt0l3oMJuh2la6\nCY0/Lz1pQPFG4DbgJ0t3IqB3/6cLoPrP0o1o/HlGoQFVjwFvAx4t3YnYA1xqSKgpnlFoSLEM+Hc8\nsyhlKiRuLt2IusMzCg2peoj8ZxafBU4EPg3sylgnlR3Ax4CTgFsy1jEkJI2SWAbx48RPc3sEYvUh\ndY6C+GjLnqI3NXZCfALiNYf0fBW9x5imrLUX4h1NvbuSlEiclDAsPgfxMveQisUQ74K4EWJXwXDY\nD7ER4kMQx7xMvz8FcWvCkLgk/fsnSY2oHRYznEXMWfMIiDUNB8b3Ia6G+Ikh+qwgroF4wZCQ1HFx\nEvO7NPR3vOxZxJx1U33HPsi4uObr831DQlLHxclDhMVjw59FzFjz2gaD4vU1e52A+GOIPQPW22dI\nSBpDA4XF30O8OlG9DzQUEgnvcxWnQWwdICR+I11NSWqVWcPiMYiLEtc6p6Gg+HbivhdBfJLeB+OG\nhKQuipMgbu5vfHsg/jrdWcRL6iyeZbNNPf4ife8AcTbE3dPq/C/Er+WpJUmtFMvzBMRLatzbQFBc\nnrH/BRDn98+OFuWrI0mdFV9pIChOKb1KqSRv4aFRtznz/HuB+zPXkFrNoNCo25R5/h9AdSBzDanV\nDAqNutxnFLmDSGo9g0Ijrvoxvbu35mJQqPMMCo2D/844t0GhzjMoNA5ybua5L21JrWdQaBzk2sx/\nCNXzmeaWRoZBoXGQ64zCy04SBoXGwz3Awxnm9ZGjkjQ+4nzSPsjonyAmSq9KaoOqdANSOnEa8J6a\nk7wIfBeq2xM0JEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmS\nJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmS\nJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmS\nJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmS\nJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSpNHzf/LMnJz3PpPV\nAAAAAElFTkSuQmCC\n';

class SvgNativeMethods extends Component {
  static title = 'Tap the shapes to render the Image below based on the base64-data of the Svg';
  state = {
    base64: null,
  };

  alert = function() {
    this.root.toDataURL(base64 => {
      this.setState({
        base64,
      });
    });
  };
  render() {
    return (
      <View>
        <Svg
          height="100"
          width="150"
          ref={ele => {
            this.root = ele;
          }}
        >
          <SvgImage
            x={50}
            width="150"
            height="100"
            href={{
              uri: b64,
            }}
          />
          <G x="40" onPress={this.alert.bind(this)}>
            <Circle
              cx="32"
              cy="32"
              r="4.167"
              fill={this.state.base64 ? 'red' : 'blue'}
            />
            <Path
              d="M55.192 27.87l-5.825-1.092a17.98 17.98 0 0 0-1.392-3.37l3.37-4.928c.312-.456.248-1.142-.143-1.532l-4.155-4.156c-.39-.39-1.076-.454-1.532-.143l-4.928 3.37a18.023 18.023 0 0 0-3.473-1.42l-1.086-5.793c-.103-.543-.632-.983-1.185-.983h-5.877c-.553 0-1.082.44-1.185.983l-1.096 5.85a17.96 17.96 0 0 0-3.334 1.393l-4.866-3.33c-.456-.31-1.142-.247-1.532.144l-4.156 4.156c-.39.39-.454 1.076-.143 1.532l3.35 4.896a18.055 18.055 0 0 0-1.37 3.33L8.807 27.87c-.542.103-.982.632-.982 1.185v5.877c0 .553.44 1.082.982 1.185l5.82 1.09a18.013 18.013 0 0 0 1.4 3.4l-3.31 4.842c-.313.455-.25 1.14.142 1.53l4.155 4.157c.39.39 1.076.454 1.532.143l4.84-3.313c1.04.563 2.146 1.02 3.3 1.375l1.096 5.852c.103.542.632.982 1.185.982h5.877c.553 0 1.082-.44 1.185-.982l1.086-5.796c1.2-.354 2.354-.82 3.438-1.4l4.902 3.353c.456.313 1.142.25 1.532-.142l4.155-4.154c.39-.39.454-1.076.143-1.532l-3.335-4.874a18.016 18.016 0 0 0 1.424-3.44l5.82-1.09c.54-.104.98-.633.98-1.186v-5.877c0-.553-.44-1.082-.982-1.185zM32 42.085c-5.568 0-10.083-4.515-10.083-10.086 0-5.568 4.515-10.084 10.083-10.084 5.57 0 10.086 4.516 10.086 10.083 0 5.57-4.517 10.085-10.086 10.085z"
              fill="blue"
            />
          </G>
          {this.state.base64 && (
            <SvgImage
              y="50"
              width="150"
              height="100"
              href={{
                uri: `data:image/png;base64,${this.state.base64}`,
              }}
            />
          )}
        </Svg>
        <View style={{ width: 150, height: 100, borderWidth: 1, marginTop: 5 }}>
          {this.state.base64 && (
            <Image
              source={{ uri: `data:image/png;base64,${this.state.base64}` }}
              style={{ width: 150, height: 100 }}
            />
          )}
        </View>
      </View>
    );
  }
}

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <SvgNativeMethods />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

[jpamarohorta]

Thank you! I'm testing this solution but it's making my svg completely black. Any idea what could it be?

[msand]

Old version perhaps? Are you using Expo?

[jpamarohorta]

No, I'm using a project with native modules. I'm not using the last RN version so I'll update it to the latest and give feedback. Thanks!

[jpamarohorta]

Sorry my issue was apparently related to a missing transform attribute in the Image. Thanks!

[johnsonfash]

data:image/svg+xml;base64,...... does not work for SvgImage