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

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

       //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:

          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