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

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;

Answer 1

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.

Answer 2

You can simply pass the value as you pass other pros.
import picture from 'linkOfYourImage.png';
function Func() {
<YourComponent imgLink={picture }/>
}