Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

373
Vistas
Failed %s type: %s%s, prop, Invalid prop `source` supplied to `Image`, expected one of type [number]

I am trying to retrieve data and images from the node backend everything is retrieving but not images and it's giving me an Invalid prop error

this is listing Screen

function ListScreen(props) {
  const [listing, setListing] = useState([]);

  useEffect(() => {
    loadlistings();
  }, []);

  const loadlistings = async () => {
    const res = await listingApi.getListing();
    setListing(res.data);
  };
  return (
    <View styles={styles.container}>
      <StatusBar styles="auto" />
      <FlatList
        data={listing}
        keyExtractor={(item) => item._id}
        renderItem={({ item }) => (
          <ListItem
            title={item.name} //working fine
            subTitle={item.job} //working fine
            name="email"
            name2="phone"
            image={item.image} //not working 
          />
        )}
      />
    </View>
  );
}

this ListItem Component

function ListItem({ image, title, subTitle, name, name2 }) {
  return (
    <Pressable>
      <View style={styles.container}>
        {image && <Image style={styles.image} source={image} />}
        <View style={styles.detailsContainer}>
          <Text style={styles.title}> {title}</Text>
          <Text style={styles.subTitle}> {subTitle}</Text>
          {Icon && <Icon name={name} />}
          {Icon && <Icon name={name2} />}
        </View>
      </View>
    </Pressable>
  );
}

this is the data from the backend

{
"_id": "629b5670579b00cd931122e9",
"name": "Harry Potter",
"job": "BackEnd Developer",
"image": "http://192.168.1.40:4545/image/image1654347376236_922911498.jpg",
"__v": 0
},
{
"_id": "629b568a579b00cd931122eb",
"name": "John Wick",
"job": "Full Stack Developer",
"image": "http://192.168.1.40:4545/image/image1654347402595_708253593.jpg",
"__v": 0
}

Please help anyone stuck on this for days

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

You have to provide the image URI by passing an object with the key uri to the source prop of <Image /> like:

<Image style={styles.image} source={{uri: image}} />
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda