Use Images in React Native.

Photo by Fons Heijnsbroek, abstract art on Unsplash

Link For Non-Members

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.

First install the below packages

1. npm install  react-native-svg
2. npm install  react-native-svg-transformer

create declarations.d.ts file in root project and paste the below code

declare module "*.svg" {
    import { SvgProps } from "react-native-svg";
    const content: React.FC<SvgProps>;
    export default content;
}

open metro.config.js file in the root project and update with the below code ( if you don’t have create a one).

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const defaultConfig = getDefaultConfig(__dirname);
const {assetExts, sourceExts} = defaultConfig.resolver;
/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
    transformer: {
        babelTransformerPath: require.resolve('react-native-svg-transformer'),
      },
      resolver: {
        assetExts…