brunolemos/react-native-web-monorepo

Static images doesn't render on android debug

bandojulio opened this issue · 5 comments

bandojulio commented

Steps to reproduce:

  1. clone repo
  2. change some url image to a static image
  3. run android in emulator
waqaspassu commented

I have the same issue. Cannot render static image

WeirdDNA commented

The same thing is happening to me as well. The example ImageBackground imported from react-native works, but I can't define any images of my own. They display correctly on ios though. They also occupy about the right amount of height/width. I think I read this could be due to the android build process not copying the image files into the build? Someone got around a similar issue by adding some parameters to their build command to bundle the images in the right place. I followed the same steps to get the custom files included as resources, but I don't know enough about android apps or react native to wire them to appear in the right places. That line of thinking is probably a red herring anyway. This also appears to prevent (some) material icons from being displayed. Even though it's a bit outside of the scope of this example, react-native-paper will still draw its animated loading indicators, but react-navigation gets blocked from drawing things like the back buttons it gets via react-native-vector-icons, this might also impact web (CRA), but again, works perfectly out-of-the-box on iOS. When I need to draw an image on the web in my own components, I haven't been using the react native Image component (because I assumed it wasn't compatible with react-native-web), but for 3rd party libraries, this issue seems to block their images as well.

jgo80 commented

I solved this issue following this tutorial at the very end (scroll down!). The solution is also described here facebook/metro#290 (comment)

Hope it helps.

WeirdDNA commented

I solved this issue following this tutorial at the very end (scroll down!). The solution is also described here facebook/metro#290 (comment)

Hope it helps.

Hi @mrsimply, thanks for finding this. Unfortunately I'm a bit green with configuring react native, babel, metro, etc. Could you provide more info on how you managed to get this fixed at least for android? I've tried adjusting the mobile/metro.config.js and mobile/babel.config.js files according to those links and the ones linked in those sections. I've tried installing babel-plugin-module-resolver, and following those configuration steps as well (although this project doesn't have a .bablrc file - can it just be added?)

Any help or examples would be appreciated!

samzmann commented

Ran into the same issue recently.
@jgo80 Thanks for posting the links! They are a little old, but led me in the right direction.

This more recent comment on issue 290 says to install react-native-monorepo-tools and update the Metro configurations. I did exactly that it, which solved the problem 🎉

  • 👍1