How are the local preloaded images used later with the Image component

How to / Third Party Tooling
1

I’ve got several local images that I use on different screens. To avoid flashes and late loading I’m preloading all my assets and fonts in the root component. Here’s how I do it:

   async componentDidMount() {
    await Font.loadAsync({
      "icon-fonts": require("./assets/fonts/icon-fonts.ttf"),
      "segoe-ui": require("./assets/fonts/segoe-ui.ttf"),
      "segoe-ui-bold": require("./assets/fonts/segoe-ui-bold.ttf")
    });
    await Asset.loadAsync([require("./assets/logo_blue.png")]);
    this.setState({ assetsLoaded: true });
   }  

   render(){
    if(!this.state.assetsLoaded){
       //show AppLoader
    }
    //else show the home screen
   }

However, when I use the assumingly cached images later in other screens, it seems, to cache them beforehand has no effect. It takes almost a second before I can see the image. I get the same result if I turn off the caching. Here’s how I use Image component:

<Image
          source={require("../../assets/logo_blue.png")}
          style={{ height: 40, width: 40 }}
        />

So again I say require("../../assets/logo_blue.png") . Is this the way I should reference the source when I have already cached it?

1 Like