Is there a way I can check if the image has loaded before navigating to a page?
My image if loaded from a url then displayed to the background, I get random errors saying ImageBackground is undefined.
Redux shows the image existing in the store, but I still get the error when navigating to the page:
export const RescueMeLandingScreen = (props) => {
const { navigation } = props;
const {
rescueMe: {
rescueMeSplashScreen: {
backgroundImage: { url }, //https://xxx/v3/assets/bltba214d69f78d0dfb/blt90b1f745b5b348ef/62333622893506175b30a63f/xxx.png
buttonText,
informationText,
title: pageTitle,
},
},
} = useSelector((state) => state);
...
return (
<>
<RACPageStructure loading={false} title={pageTitle} isMain>
<ScrollView contentContainerStyle={styles.scollView}>
<ImageBackground source={{ uri: url }} style={styles.imageBackground}>
...
</ImageBackground>
</ScrollView>
</RACPageStructure>
</>
);
};
You could try conditionally rendering the component.
Example:
{ url !== undefined && <ImageBackground>}
If that doesn't work, you could also create a custom component wrapper for your component that would return a default image if the other one is undefined.
Example:
const ImageBackgroundWrapper = () => {
if (url === undefined) {
return ();
} else {
return ();
}
}