function ImageX( props){
const [state, setState] = React.useState({v:{height:1}});
useEffect(() => {
if(!props.source || !props.source.uri) return;
Image.prefetch(props.source.uri)
.then(() => {
Image.getSize(props.source.uri, (width, height) => {
let aspectRatio = height/width;
state.v.width=Dimensions.get('window').width;
state.v.height=aspectRatio*state.v.width;
setState({...state});
});
})
.catch(error => console.log(error))
},[props.source && props.source.uri]);
if (state.v.height <=1) //Image not in cache (disk) yet
{
return (
<Image {...props}/>
);
}
else
{
let neededst={v:{width:state.v.width, height:state.v.height}}
let st={v:props.style};
assignObject(neededst, st);
return (
<Image {...props} style={neededst.v}/>
);
}
}
function assignObject(target, source) {
if (!source) return;
for (let k in target) {
let v = target[k];
if (Object(v) === Object) assignObject(v, source[k]);
else {
if (source[k]) {
try {
Object.assign(v, source[k]);
} catch (e) {
alert(e);
}
}
}
}
for (let k in source) {
if (!target[k]) {
target[k] = source[k];
}
}
}Using Image component from https://reactnativeelements.com/docs/image