I am having trouble displaying images on my application home page. Whenever I use this.props.imageUri, the images do not appear. I tried using Image source and it works, but when I created Location.js and added this.props.imageUrl, the image no longer displays. I'm not sure what to do next.
This is my Home.js file
import React from "react";
import {
View,
Text,
Button,
SafeAreaView,
TextInput,
StatusBar,
Platform,
ScrollView,
Image,
imageUri,
StyleSheet,
} from "react-native";
import ProductsList from "../../components/productsList/ProductsList";
import { styles } from "../../styles/authStyle";
import Icon from "react-native-vector-icons/Ionicons";
import { fontSize } from "styled-system";
import Location from "../components/Location";
export default function Search({ navigation }) {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<View
style={{
height: 80,
backgroundColor: "white",
borderBottomWidth: 1,
borderBottomColor: "#dddddd",
}}
>
<View
style={{
flexDirection: "row",
padding: 10,
backgroundColor: "white",
marginHorizontal: 20,
shadowOffset: { width: 0, height: 0 },
shadowColor: "black",
shadowOpacity: 0.2,
borderRadius: 50,
elevation: 1,
}}
>
<Icon name="ios-search" size={20} style={{ marginRight: 10 }} />
<TextInput
underlineColorAndroid="transparent"
placeholder="City, airport, adrerss, or hotel"
placeholderTextColor="grey"
style={{ flex: 1, fontWeight: "700", backgroundColor: "white" }}
/>
</View>
</View>
<ScrollView scrollEventThrottle={16}>
<View style={{ flex: 1, backgroundColor: "white", paddingTop: 20 }}>
<Text
style={{
fontSize: 24,
fontWeight: "700",
paddingHorizontal: 20,
marginLeft: 100,
}}
>
FIND YOUR RIDE
</Text>
<View style={{ height: 130, marginTop: 20 }}>
<ScrollView>
<Location
imageUri={require("../home/nicosia.png")}
name="nicosia"
/>
</ScrollView>
</View>
</View>
</ScrollView>
</View>
</SafeAreaView>
);
}
And this is Location.js
import React, { Component } from "react";
import { View, Text, StyleSheet, Image, imageUri } from "react-native";
class Location extends Component {
render() {
const { imageUri, name } = this.props;
return (
<View
style={{
alignItems: "center",
height: 130,
width: 130,
marginLeft: 20,
borderWidth: 0.5,
borderColor: "#dddddd",
}}
>
<View style={{ flex: 2 }}>
<Image
source={imageUri}
style={{
flex: 1,
width: null,
height: null,
resizeMode: "cover",
}}
/>
</View>
<View style={{ flex: 1, paddingLeft: 3, paddingTop: 10 }}>
<Text>{name}</Text>
</View>
</View>
);
}
}
export default Location;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
});