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' }} 
    style={{ width: 150, height: 300 }} 
  /> 

There are two key differences when referencing a local image versus a remote one. For starters, a local image is loaded through require...