ImageScreen.js

import imgSrcF from '../../assets/forest.jpg';
import imgSrcB from '../../assets/beach.jpg';
import imgSrcM from '../../assets/mountain.jpg';
 
const ImageScreen = () => {
    // imgageSource={require('../../assets/forest.jpg')} /> 
    return <View>
        <Text>Hello</Text>
        <Image source={{ uri: imgSrcF }} style={style.image} />
        <ImageDetail title='Forest'
            imgageSource={imgSrcF} /> 
    </View>
}
  

Imagedetails.js

const ImageDetail = (props) => {
    console.log(props)
    // <Image source={props.imageSource} />
    return <View>
        <Image source={{ uri: props.imageSource }}
            style={styles.image} />
        <Text> {props.title} </Text>
    </View>
}

Note

The Image Element is showing when the import is in same file.... sample is use in the Screen

Passing Image is not working

Currently running on web...

Result of above code on react native web

Attempted solution link React Native Web Image component not showing image