You must manually specify the dimensions of your image. Image dimensions are specified in meters and it is not possible to predict the intended dimensions merely from the pixel width and height of the image.
The issue is that React VR is fully 3D. Pixels don't correspond directly to world units because it is possible to place an image at various different depths. If you don't specify the image dimensions in the browser, the browser renders a 0x0 element, downloads the image, and then renders the image based with the correct size. Therefore, we have chosen to make developers specify explicit image dimensions.
An interesting React Native decision is that the
src attribute is named
source and doesn't take a string but an object with a
This is desirable from an infrastructure viewpoint. It allows us to attach
metadata to this object. For example, if you are using
require('./my-icon.png'), then we add information about its actual location
and size. This is also future proofing, for example, we may want to support
sprites at some point, or texture sampling methods such as
and so on.
A common feature request from developers familiar with the web is an equivalent
background-image. To do this, create a normal
<Image> component and then
add whatever children you would like to layer on top of it.
Please note that the following corner specific, border radius style properties are currently ignored by the image component:
You can file an issue on GitHub if you see a typo or error on this page!