image onLoad width is undefined - react-native

Question

When running the following code without the ImageZoom component,the useEffect hook console logs this : Object { "height": 412, "width": 231.66666666666666, } which is the right height and width of the image on load (the size of the image as displayed).
but when im adding the ImageZoom component I get a Component Exception Cannot read property 'width' of undefined.
const ImageModal = ({ image, isOpenImage, onStateChange }) => {
const [imageLoad, setImageLoad] = useState({ width: null, height: null });
const handleLoad = (event) => {
setImageLoad({
width: event.nativeEvent.source.width,
height: event.nativeEvent.source.height,
});
};
useEffect(() => {
console.log(imageLoad);
}, [imageLoad]);
const NewImage = useCallback(
() => (
<Image
onLoad={(event) => handleLoad(event)}
source={image}
style={{ flex: 1 }}
resizeMode="contain"
/>
),
[]
);
return (
<Modal
style={{ flex: 1 }}
animationType="slide"
transparent={true}
visible={isOpenImage}>
<Fragment>
<View
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: '#000000',
opacity: 0.5,
}}
/>
<View
style={{
position: 'absolute',
bottom: 22.5,
zIndex: 2,
alignSelf: 'center',
}}>
<TouchableOpacity
onPress={() => {
onStateChange(false);
}}
style={{
width: 130,
height: 47,
borderRadius: 50,
borderWidth: 2,
borderColor: '#fff',
backgroundColor: '#2e423d',
transform: [{ scaleX: 1 }],
justifyContent: 'center',
}}>
<Text
style={{
fontSize: 18.8,
fontFamily: 'OpenSansHebrew-Regular',
color: '#ffffff',
alignSelf: 'center',
}}>
סגירה
</Text>
</TouchableOpacity>
</View>
<View
style={{
flex: 1,
backgroundColor: 'white',
marginBottom: 0,
marginHorizontal: 15,
borderRadius: 20,
}}>
<View
style={{
flex: 1,
backgroundColor: 'white',
marginBottom: 0,
marginBottom: 250,
marginTop: 150,
justifyContent: 'center',
}}>
<ImageZoom
cropWidth={screenWidth}
cropHeight={screenHeight}
imageWidth={imageLoad.width}
imageHeight={imageLoad.height}>
<NewImage />
</ImageZoom>
</View>
</View>
</Fragment>
</Modal>
);
};

Answer 1

try initializing imageLoad state with some data.
const [imageLoad, setImageLoad] = useState({width: 0, height: 0});

Answer 2

You are initializing the state imageLoad with an empty value. First of all you have to define the width and height of the value in your useState hook like this -
const [imageLoad, setImageLoad] = useState({width:null, height: null});
It's showing error because you have not defined your width and height objects in the state imageLoad.
according to your comment, it seems that your state is not updating before rendering of the ImageZoom component.
First try to update the state before the ImageZoom renders for that you can create a new state called imageLoaded and than update this state in your useEffect like this ->
const [imageLoaded , setImageLoaded ] = useState(false);
useEffect(() => {
getDimensions ()
}, []);
const getDimensions = (url) => {
var img = new Image();
img.src = url;
img.onload = ()=> { setImageLoad({
width: img.width,
height: img.height,
})
setImageLoaded(true) }
}
Now render component On State of ImageLoad
ImageLoaded ?
<ImageZoom
cropWidth={screenWidth}
cropHeight={screenHeight}
imageWidth={imageLoad.width}
imageHeight={imageLoad.height}>
<NewImage />
</ImageZoom>
: null;
Now you don't need the onLoad event in your image component