React Native unable to resolve module for static image - react-native

Question

I want to send images from one page to another with react native navigations
here are my codes
this is app.js file which is the main file to initialized react navigations and pages
App.js
import React from "react"
import Walkthrought1 from "./Pages/Walkthrought1/Walkthrought1.js"
import Walkthrought2 from "./Pages/Walkthrought2/Walkthrought2.js"
import {createAppContainer} from "react-navigation"
import {createStackNavigator} from "react-navigation-stack"
const PushRouteOne = createStackNavigator({
Page1: {
screen: Walkthrought1,
},
Page2: {
screen:Walkthrought2,
},
/*
Page3:{
screen:Walkthrough03,
},
Login: {
screen:Register,
}*/
},
{
initialRouteName: "Page1",
mode: "modal",
headerMode: "none",
})
const AppContainer = createAppContainer(PushRouteOne)
export default class App extends React.Component {
render() {
return <AppContainer/>
}
}
And the another pages Walkthrought1 which is the list of images and select the image and send it to walkthrought2
Walkthrought1.js
const products = [
{
id:'1',
title:'Product1',
image: require("./assest/image1.jpg"),
},
{
id:'2',
title:'Product2',
image:require("./assest/image2.jpg"),
},
{
id:'3',
title:'Product3',
image:require("./assest/image3.jpg"),
},
{
id:'4',
title:'Product4',
image:require("./assest/image4.jpg"),
},
{
id:'5',
title:'Product5',
image:require("./assest/image5.jpg"),
},
{
id:'6',
title:'Product6',
image:require("./assest/image7.jpg"),
},
{
id:'7',
title:'Product7',
image:require("./assest/image8.jpg"),
},
{
id:'8',
title:'Product8',
image: require("./assest/image9.jpg"),
},
];
function Item({ id,title,image,selected,onSelect }) {
return (
<TouchableOpacity
onPress={() => {
const {navigate} = this.props.navigation;
navigate("Page2",{
Send_Image:image,
Send_Title:title,
});
}}>
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
<Image style={styles.images} source={image}/>
</View>
</TouchableOpacity>
);
}
export default class Walkthrought1 extends React.Component {
static navigationOptions = ({ navigation }) => {
const { params ={} } = navigation.state
}
constructor(props)
{
super(props)
}
render(){
return (
<SafeAreaView>
<FlatList
numColumns={2}
data={products}
renderItem={({ item }) =>
<Item
title={item.title}
image={item.image}
/> }
keyExtractor={item => item.id}
extraData={selected}
/>
</SafeAreaView>
);
}
}
and this is Walkthrought2.js this page showing image which is come from walkthrought1 with navigation
Walkthrought2.js
import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import {
Image,
StyleSheet,
View,
Text,
} from 'react-native';
import {
//responsiveheight,
responsiveWidth,
responsiveFontSize,
responsiveHeight,
} from "react-native-responsive-dimensions";
export default class Walkthrought2 extends React.Component {
static navigationOptions = ({ navigation }) => {
const { params ={} } = navigation.state
}
constructor(props)
{
super(props)
}
componentDidMount() {
const Get_Image = (this.props.navigation.params("Send_Image"));
const Get_Title = (this.props.navigation.params("Send_Title"));
}
render() {
return (
<NavigationContainer>{<View>
<Image style={styles.images} source={require(Get_Image)}/>
<Text style={styles.title}>{Get_Title}</Text>
</View>}</NavigationContainer>
);
}
}
And when I ran i've given this error