Styling images

Images in React Native are somewhat unusual. The Image component has qualities of both the inline HTML img element and background properties of CSS. We'll explore these behaviors in this section to better your understanding of how to use images as both content and as design accents within your applications.

Within your React Native project, you can reference either a local image resource or a remote one. To reference an image contained within your project, use the following syntax:

<Image source={require('./images/pizza.jpg')} /> 

If you wish to reference an image located remotely on a server, you'll follow a similar but slightly different pattern:

<Image source={{ uri: 'https://pixabay.com/static/uploads/photo/2014/11/08/17/05/pizza-522485_960_720.jpg' ...

Get Mastering React Native now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.