Failed prop type: Invalid prop `source` supplied to `ForwardRef(Image)`

Question

I have a react native app where i want to show custom image as marker in my mapview and i'm taking the path of the images from the api dynamically. I don't know if it's possible for the require method to take images dynamically. But whenever i'm trying to do that it throws the following error:

Warning: Failed prop type: Invalid prop `source` supplied to `ForwardRef(Image)`

Here's how i'm trying to show the images as markers:

 async componentDidMount() {
    await fetch('https://api', {
      method: 'GET',
      headers: {
        'X-API-KEY': '123456',
        'Authorization': userToken
      }
    })
      .then((response) => {
        return response.json()
      })
      .then((response) => {
        let coordinates = response.data.coordinates
        let geoCoordinates = []
        coordinates.map((coord) => {
          const coordsNumber = {
            'latitude': Number(coord.latitude),
            'longitude': Number(coord.longitude),
            'title': String(coord.title),
            'description': String(coord.description),
            'image': String(coord.image)
          }
          geoCoordinates.push(coordsNumber)

        })
        this.setState({
          coordinates: geoCoordinates,
          packeging: response.data.packeging,
        })
      })
      .catch((error) => {
        console.log('cutch block ', error)
      })
  }
  
  render() {
  return (
    <ScrollView style={[{ flex: 1 }]}>
      <View style={styles.container}>
        <MapView
          initialRegion={{
            latitude: 3.101033,
            longitude: 101.683881,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
          style={styles.mapcontainer}
          ref={c => this.mapView = c}
        >
          {this.state.coordinates.map((coordinate, index) =>
            <MapView.Marker key={`coordinate_${index}`} 
                            coordinate={coordinate}
                            title={coordinate.title} 
                            description={coordinate.description} >
                   <Image source={coordinate.image} />
           </MapView.Marker>
          )}
          {(this.state.coordinates.length >= 2) && (
            <MapViewDirections
              origin={this.state.coordinates[0]}
              waypoints={(this.state.coordinates.length > 2) ? this.state.coordinates.slice(1, -1) : null}
              destination={this.state.coordinates[this.state.coordinates.length - 1]}
              apikey={'api key'}
              strokeWidth={5}
              strokeColor="blue"
              optimizeWaypoints={true}
              onStart={(params) => {
                console.log(`Started routing between "${params.origin}" and "${params.destination}"`);
              }}
              onReady={result => {
                console.log('Distance: ${result.distance} km')
                console.log('Duration: ${result.duration} min.')

                this.mapView.fitToCoordinates(result.coordinates, {
                  edgePadding: {
                    right: (width / 20),
                    bottom: (height / 20),
                    left: (width / 20),
                    top: (height / 20),
                  }
                });
              }}
              onError={(errorMessage) => {
              }}
            />
          )}
        </MapView>
      </View>
    </ScrollView>
  );
}
}

What can be done here? The error showing for <Image source={coordinate.image} /> this part.

Dehli Dehli · Accepted Answer · 2019-07-18T11:53:24

If these are remote images, you'll need to pass in the source differently.

<Image
  style={{width: 50, height: 50}}
  source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
/>

Check out the documentation for more examples.

Failed prop type: Invalid prop `source` supplied to `ForwardRef(Image)`

1 Answers