CODEWITHSUNDEEP
reactjsreact-native
kevin richard
kevin richard

Reputation: 91

fetch multiple image source before render react native

I would like show image on my markers, but it works only when I use the icon attribute of the marker. I need to use the subview to manage the style. When I use the ICON attribute, the view image appear (so I have two image on the map) but not showing when it's in comment.

This how I fetch the data and update the state.

componentDidMount(){
  getmarkers().then(data => {
    let test = []
    data.forEach(element => {
      test.push(
        {
          latlng:
          {
            latitude: JSON.parse(element.latitude),
            longitude: JSON.parse(element.longitude)
          },
          name: JSON.parse(element.images)[0],
          id: element.id,
          image: JSON.parse(element.images)[0]
        }
      )
    });

    this.setState({ markers: test, loaded: true })

  })
}

}

This is my view 

            {this.state.markers.map((marker, i) => (
          <Marker
            key={i}
            coordinate={marker.latlng}
            title={marker.name}
            description={marker.name}
            tracksViewChanges={false}
          // icon={{ uri: 'https://www.testeed.com/uploads/minifiedplaces/' + marker.image}}
          >

            <View>
              <Image source={{ uri: 'https://www.testeed.com/uploads/minifiedplaces/' + marker.image }} style={{ width: 40, height: 40, borderRadius: 6 }} />
            </View>

          </Marker>
        ))}

Upvotes: 1

Views: 479

Answers (2)

kevin richard
kevin richard

Reputation: 91

The issue come from Trackviewchange. If you put this value to false. the application is lagging. then if you put the value to false, the application do not load the image at first loading.

So you have to init Trackviewchange to True and create promise after the execution of your fetch/foreach, if it doesn't work, you can do a a setimeout or setinterval to change the value of trackviewchange to false to show images changes and get a better smooth user experience.

Upvotes: 2

Kerem atam
Kerem atam

Reputation: 2787

const customMarkerImage = require("../../../customMarkerImage.png");

<MapView.Marker>
  <View >
    <Image source={customMarkerImage} onLoad={() => this.forceUpdate()}>
    </Image>
  </View>
</MapView.Marker>

It is probably about this issue : https://github.com/react-native-community/react-native-maps/issues/924

Upvotes: 1

Related Questions