Use Images in React Native.

Photo by Fons Heijnsbroek, abstract art on Unsplash

In this article we will see how to add or use images/Icons in React Native Application.

First create a folder assets/images and inside the folder create index.ts file and keep two images .svg and .png images.

Let’s see how to use .png image because both have different ways to access.

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

const ImageScreen = () => {
  return (
    <View
      style={{
        alignItems: 'center',
      }}>
      <Image
        source={require('../assets/images/edit.png')}
        style={{
          width: 100,
          height: 100,
        }}
      />
    </View>
  );
};

export default ImageScreen;

As you can see above , we use <Image/> component and in the source attribute we passed path of png image .

→ Use SVG Image

For accessing the SVG image in React Native project , we requires some modification.