react native share image url - react-native

Question

there are two part of codes, the first : a page with list of touchable image and the second: with onPress the image open in new page in full size.
till now every thing is fin. but in new page when I want to share image url, it doesn't work!!!
here is some part of my code:
part one:
const Images = [
{ url: require("../Images/dress.jpg") },
{ url: require("../Images/111.jpg") },
{ url: require("../Images/222.jpg") },
...
]
export class Dress extends Component {
render() {
return (
...
<View>
{Images.map((image, index) => (
<TouchableOpacity
key={index}
onPress={() => this.props.navigation.navigate("ShowImage", {url:image.url})}
>
<Image source={image.url}/>
</TouchableOpacity>
))}
</View>...
part two (above onPress direct to new page)
export class ShowImage extends Component {
shareMessage = async (PhotoLink) => {
console.log('myUrl'+PhotoLink)
const result = await Share.share({
title: "title goes here",
message: ("hi"+PhotoLink),
});
render() {
return (
...
<TouchableOpacity
onPress={()=>this.shareMessage(this.props.route.params.url)}
>
...
when I use local image the result is: "hi3" or "hi4" or ...
when I use web image from internet the result is: "hi[object Object]"
I don't know where is the problem!! plz help me :)

Answer 1

Edit your Part1 code like this:
const Images = [
{ url: "../Images/dress.jpg" },
{ url: "../Images/111.jpg" },
{ url: "../Images/222.jpg" },
]
export class Dress extends Component {
render() {
return (
<View>
{Images.map((image, index) => (
<TouchableOpacity
key={index}
onPress={() => this.props.navigation.navigate("ShowImage", {url:image.url})}>
<Image source={require(image.url)}/>
</TouchableOpacity>
))}
</View>
)
}
}
and Part2 like this:
export class ShowImage extends Component {
shareMessage = async (PhotoLink) => {
console.log('myUrl'+PhotoLink)
const result = await Share.share({
title: "title goes here",
message: ("hi"+PhotoLink),
});
render() {
return (
...
<TouchableOpacity
onPress={()=>this.shareMessage(this.props.route.params.url)}
>
...
and try again. when you require an image it is converted to an object.
and if you want to use web image url, you can simply edit Part1 like this:
const Images = [
{ url: "https://en.wikipedia.org/wiki/File:Image_created_with_a_mobile_phone.png" },
]
export class Dress extends Component {
render() {
return (
<View>
{Images.map((image, index) => (
<TouchableOpacity
key={index}
onPress={() => this.props.navigation.navigate("ShowImage", {url:image.url})}>
<Image source={{uri: image.url}}/>
</TouchableOpacity>
))}
</View>
)
}
}