React Native Basics›Core· 30 min read

Core Components: View, Text & Image

Three building blocks cover most screens: a box (View), some words (Text), and a picture (Image).

What you will learn

Use View as a container
Show words with Text
Display a picture with Image

The three you use most

On the web you reach for <div>, <p> and <img> all day. In React Native the three you reach for most are View, Text and Image.

View — a box that holds and arranges other things (like a <div>).
Text — shows words. Every piece of text must sit inside a Text.
Image — shows a picture, from the internet or from your project files.

A small profile card

Let us put all three together — a picture, a name and a role:

View + Image + two Text components make a simple card

import { View, Text, Image } from 'react-native';

export default function App() {
  return (
    <View>
      <Image
        source={{ uri: 'https://i.pravatar.cc/100' }}
        style={{ width: 100, height: 100 }}
      />
      <Text>Aanya Sharma</Text>
      <Text>React Native Learner</Text>
    </View>
  );
}

Note: Output: A 100x100 photo, then two lines of text: Aanya Sharma React Native Learner The Image from a web link needs a width and height, or it will not show up.

Watch out: You cannot put bare words directly in a View. Writing <View>Hello</View> crashes. Words must always be wrapped: <View><Text>Hello</Text></View>.

Tip: For an Image from the internet you pass an object with a uri. For a picture stored in your project you use require, like source={require('./logo.png')} — and then the size is optional.

Q. Where must plain text always go in React Native?

Answer: All text must be wrapped in a Text component. Putting raw words straight inside a View throws an error.

✍️ Practice

Build a card with one Image and two Text lines (a name and a city).
Swap the web image for a local one using require('./somefile.png').

🏠 Homework

Make an "about me" screen with a photo, your name, and two facts about you, each in its own Text.