I need to load a different image depending on screen size. On web you would use the picture element:
<picture>
<source srcset="big.jpg" media="(min-width: 800px)">
<img src="small" />
</picture>
Note that this is different to an image with srcset. With srcset the browser decides which image to load. I need to control this as it's an entirely different image, not just a different resolution. More info here: https://dev.to/jessefulton/explain-htmls-img-srcset-vs-picture-tag-like-im-five-167p
Can this be done with React Native Web? There's a few conversations on the github repo but I dont think they do exactly what I need:
https://github.com/necolas/react-native-web/pull/1456
https://github.com/necolas/react-native-web/pull/1408
I found a library but it seems to optimise a single image, not allow you to specify different ones: https://github.com/ladas-larry/react-native-responsive-image
Maybe I could hack by code splitting, then reading the screen width, and then load the image I need?