O'Reilly logo

Mastering React Native by Jacob Friedmann, Eric Masiello

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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' ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required