React native, ImageBackground check image has loaded before navigating to page

Question

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>
    </>
  );
};

Answer 1

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 ();
  }
}