How to show Base64 Data as Image in React Native

One common use case for React Native is displaying images in a mobile app. In this tutorial, we will learn how to display a base64 image in react native.

Showing Base64 encoded data as an image is very easy in React Native. It is pretty similar to what you would do with basic HTML.

All you need is to pass the Base64 data to the source property of the Image component. See the code snippet given below.

const encodedBase64 = 'R0lGODlhAQABAIAAAAAA...7';
<Image
        style={styles.image}
        source={{uri: `data:image/png;base64,${encodedBase64}`}}
      />

Following is the complete code for reference.

import {StyleSheet, Image, View} from 'react-native';
import React from 'react';

const App = () => {
  const encodedBase64 =
    'iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==';

  return (
    <View style={styles.container}>
      <Image
        style={styles.image}
        source={{uri: `data:image/png;base64,${encodedBase64}`}}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    height: 50,
    width: 50,
  },
});

export default App;

And you will get the following output.

That’s how you show base64 image in react native.