Hi guys,
Im getting something strange here with assets through Asset.loadAsync
and with their image densities.
Note: I have 3 different images according each density (look in snack for these files).
Code in snack:
Full code (without images):
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { AppLoading, Asset, MapView } from 'expo';
const REGION = {
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
};
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
initialRegion: REGION,
animatedRegion: new MapView.AnimatedRegion(REGION),
isLoadingComplete: false,
};
}
_loadResourcesAsync = async () => {
return Promise.all([
Asset.loadAsync([
require('./assets/images/marker-truck-ongoing.png')
]),
]);
};
_handleLoadingError = error => {
// In this case, you might want to report the error to your error
// reporting service, for example Sentry
console.warn(error);
};
_handleFinishLoading = () => {
this.setState({
isLoadingComplete: true
});
};
render() {
const {
initialRegion,
animatedRegion,
isLoadingComplete,
} = this.state;
if (!isLoadingComplete) {
return (
<AppLoading
startAsync={this._loadResourcesAsync}
onError={this._handleLoadingError}
onFinish={this._handleFinishLoading}
/>
);
}
return (
<View style={styles.container}>
<MapView style={styles.map} initialRegion={initialRegion}>
<MapView.Marker.Animated
coordinate={animatedRegion}
centerOffset={{ x: 0, y: -18 }}
image={require('./assets/images/marker-truck-ongoing.png')}
/>
</MapView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
map: {
...StyleSheet.absoluteFillObject,
},
});
The problem Iām having is that if I use the image directly without using Asset.loadAsync
it works correctly, otherwise the image does not respect the size set in iOS, look the following captures:
with Asset.loadAsync
:
without (this was the expected result):
If you want to try the code by yourself, just modify the isLoadingComplete
mark to use the cache or not (with the mark in true, do not use Asset.loadAsync
)
Any help will be welcome, I am afraid that the Expo Asset.loadAsync
is the cause of this issue,
Thanks !!!