I am trying to add images to my application home page but it seems whenever I use this.props.imageUri it just doesn't show the images anymore. I tried to do it using Image source.. it works but when I created Location.js and add this.props.imageUrl the image doesn't show anymore.. so I don't know what to do.

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>
  );

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: "center",
      justifyContent: "center",
    },
  });
}

And this is Location.js

import React, { Component } from "react";
import { View, Text, StyleSheet, Image, imageUri } from "react-native";

class Location extends Component {
  render() {
    return (
      <View
        style={{
          alignItems: "center",
          height: 130,
          width: 130,
          marginLeft: 20,
          borderWidth: 0.5,
          borderColor: "#dddddd",
        }}
      >
        <View style={{ flex: 2 }}>
          <Image
            source={this.props.imageUri}
            style={{
              flex: 1,
              width: null,
              height: null,
              resizeMode: "cover",
            }}
          />
        </View>
        <View style={{ flex: 1, paddingLeft: 3, paddingTop: 10 }}>
          <Text>{this.props.name}</Text>
        </View>
      </View>
    );
  }
}
export default Location;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

CodePudding user response：

Set width and height to a fixed size or just omit them.

<View style={{ flex: 2 }}>
  <Image
    source={this.props.imageUri}
    style={{
      flex: 1,
      {/* Don't set width and height to null */}
      width: null,
      height: null,
      resizeMode: "cover",
    }}
  />
</View>
<View style={{ flex: 1, paddingLeft: 3, paddingTop: 10 }}>
  <Text>{this.props.name}</Text>
</View>