Summary - Images
- React Native course
- Beginner
- Lesson 70/116
- 5 min
Combine Image, source and resizeMode to write a profile image.
Summary - Images
This group covered the basics of images. The Image component shows the picture; source takes a uri for remote images and require for local ones. resizeMode decides how the image fits the box.
ImageBackground lets you stack children on an image. width, height and aspectRatio handle sizing. Now you will combine these in two mini tasks: first a profile image, then a card with a background image.
Practice Write a profile image
Write an <Image>. Give it source={'{ require('./assets/avatar.png') }'}. Add style with width: 80, height: 80 and borderRadius: 40. Export the App function.
Starter code
import { Image } from 'react-native';
// write the profile image hereSample solution
function App() {
return (
<Image
source={require('./assets/avatar.png')}
style={{ width: 80, height: 80, borderRadius: 40 }}
/>
);
}
export default App;Practice A welcome card with a background
Write an <ImageBackground>. Give it source={'{ uri: 'https://example.com/hero.png' }'} and style with width: 320 and height: 180. Put a <Text> inside with color: 'white' and fontSize: 24. Export the App function.
Starter code
import { ImageBackground, Text } from 'react-native';
// write the welcome card hereSample solution
function App() {
return (
<ImageBackground
source={{ uri: 'https://example.com/hero.png' }}
style={{ width: 320, height: 180 }}>
<Text style={{ color: 'white', fontSize: 24 }}>Welcome</Text>
</ImageBackground>
);
}
export default App;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match all the image concepts
| Term | Meaning |
|---|---|
source |
Image address |
resizeMode |
Fit behavior |
ImageBackground |
Children over image |
aspectRatio |
Ratio lock |
2 What is used for a local image?
- fetch Correct answer
- uri
- require
- import-css
Explanation: require bundles the local file into the app.