Performance issue on iOS

[iosfitness]

Hello, I'm trying to render multiple markers on Map. The rendering is very laggy on iOS. However, the same code is comparatively faster on Android.

Please review the code and suggest corrections. Thanks in advance.

Below is the code snippet :

componentWillMount() { this.getMapsMarker().done(); }

async getMapsMarker() { let incidenceData = this.props.navigation.state.params; let identifiers = [] for (var i = 0; i < incidenceData.length; i++) { let incidenceObject = incidenceData[i]; let address = ''; if (incidenceObject.street) { address = address + incidenceObject.street + ','; } if (incidenceObject.city) { address = address + incidenceObject.city + ','; } if (incidenceObject.country) { address = address + incidenceObject.country + ','; } if (incidenceObject.postalCode) { address = address + incidenceObject.postalCode; } console.log(address) let latitude = 0; let longitude = 0; try { const res = await Geocoder.geocodeAddress(address) console.log('pos', i) console.log('geocode', res.length > 0 ? res[0].position : '') latitude = res.length > 0 ? res[0].position.lat : 0; longitude = res.length > 0 ? res[0].position.lng : 0 } catch (err) { console.log(err) } let coordinates = { latitude, longitude, } incidenceData[i].coordinates = coordinates;

    }
    this.setState({
        mapMarkers: incidenceData,
        identifiers
    })
}

render() { return (

{ this.mapRef = ref }} style={styles.map}> {this.state.mapMarkers && this.state.mapMarkers.map((marker, i) => { return ( { this.navigateToForms(); }}> {marker.subject} ) })}

    );
}

Thanks in advance.