Pass the local image path as a prop between two functional components

Question

I'm working on a project in react-native, where I have troubles of understanding how props works between functional components. My requirement is to create a re-usable button component where I can just pass the image location in the resource file inside my project, so it'll create the button for me. For some reason if i give the required location manually, it will work and create the button for me, but if i\I pass the location as a prop from where I create it wont work for some reason. My code as bellow.

Button component

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

const ButtonWithImage = (props) => {
    const {buttonStyle} = styles;
    const clickEvent = () => {}

    return (
        <TouchableOpacity onPress= {clickEvent}style={buttonStyle}>
            <Image 
                source={props.imagePath} 
                style={styles.ImageIconStyle} 
            />
        </TouchableOpacity>
    );
};

const styles = {
    buttonStyle: {
        //alignSelf:'stretch',
        height: 50,
        width:50,
        paddingTop:0,
        flexDirection: 'row'
    }
};

export default ButtonWithImage;

Place where I create the button and pass the prop

import React, { Component } from 'react';
import {
    View,
    StyleSheet,
    Dimensions,
} from 'react-native';
import FooterIcons from './ButtonWithImage'

const Footer = () => {
    return (
        <View style={styles.footerStyle}>
            <FooterIcons imagePath = {'./images/homeButton/homeBtn.png'} />
        </View>
    );
};

const styles = StyleSheet.create({
    footerStyle: {
        height: 60,
        width: 100,
        // justifyContent:'flex-start'
    },
});

export default Footer;

you might have a typo in your code - arguments are `props` and you try to pass `prop.imagePath` — pwolaq, Jan 22 '18 at 15:37
i did sir but still same effect, then i put a console log to see, seems render method runs before it sets the argument parameters i assume — danu, Jan 22 '18 at 15:50

Bamse · Accepted Answer · 2018-01-22T17:26:59.187

This is not possible since you want to require an image with a local path <Image source={require(props.path)} /> and this does not work because require can only take string literal as an argument.

This means that you will have to do:

<FooterIcons imagePath = {require('./images/homeButton/homeBtn.png')} 
/>

To make it work. And don't forget to give your image a width and height.

OR

You can do it in a way which works good for apps that does not have big amounts of images, because we will preload them:

1- Make an assets javascript file assets.js , this file should require all your local images, something like this:

const assetsObject = {
  homeIcon: require('./images/homeButton/homeBtn.png')
  boatIcon: require('./images/homeButton/boat.png')
  ....
  ...
}
module.exports = assetsObject

2- Now you need to require this file in your ButtonWithImage.js file

const assets = require('./assets.js')

const ButtonWithImage = (props) => {
  const {buttonStyle} = styles;
  const clickEvent = () => {}

  return (
      <TouchableOpacity onPress= {clickEvent}style={buttonStyle}>
         <Image 
            source={assets[props.imagePath]} 
            style={styles.ImageIconStyle} 
         />
      </TouchableOpacity>
  );
};

3- The props you send to ButtonWithImage should be on of the keys of the assetsObject we created 'homeIcon' or 'boatIcon' ..etc

const Footer = () => {
return (
    <View style={styles.footerStyle}>
        <FooterIcons imagePath = {'homeIcon'} />
    </View>
);
};

4- Don't forget to give your image a width and height

Thats it, and i suggest not calling the prop imagePath anymore, maybe just image.

this sounds like a legit answer, but for some reason it throws some errors, can u please check the code again in case u missing something sir — danu, Jan 22 '18 at 17:59

score 0 · Answer 2 · answered Mar 01 '22 at 07:51

0

You can simply pass the value as you pass other pros.

import picture from 'linkOfYourImage.png';

function Func() { 
<YourComponent imgLink={picture }/>
}

answered Mar 01 '22 at 07:51

Mujahidul Islam

265
4
8

Pass the local image path as a prop between two functional components

2 Answers2

Linked