Question 32919 in React native Question posted in
The official React Native documentation can be found here.

react native render an image

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

const MyComponent = ({ item }) => {
  const imageSource = require(`./assets/${item}.png`);

  return (
    <View>
      <Image source={imageSource} />
    </View>
  );
};

export default MyComponent;

result:

error: 
componentsmultipleProductsImageReader.tsx: 
componentsmultipleProductsImageReader.tsx:Invalid call at line 4: 
require("../assets/" + item + ".png")

How to render the image in react-native dynamically? like my sample above.

Tags:

2

Answers


  1. 0

    Try rendering your Image as shown below:

     <Image source={require(imageSource)} />

    This will render your image dynamically.

    Login or Signup to reply.
  2. 0

    First of all print item result on console log if image have a already file extension then remove .png from require(./assets/${item}.png);

    Note :- Must check dynamic item image path exist in local assets folder.

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

const MyComponent = ({ item }) => {
  const imageSource = require(`./assets/${item}.png`); 
  return (
    <View>
      {imageSource && <Image source={imageSource} /> } // New Line
    </View>
  );
};

export default MyComponent;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search