Core components: View, Text, Image

React Native has no HTML tags: a screen is built from ready-made components of the react-native library. The three most needed are View, a container for other elements, Text for any text, and Image for pictures.

View and Text

Open the main screen of the to-do list, app/index.tsx, and replace its contents:

// app/index.tsx
import { Text, View } from 'react-native';
 
export default function Index() {
  return (
    <View>
      <Text>My tasks</Text>
      <Text>No tasks yet</Text>
    </View>
  );
}

Two lines appear in the top left corner of the phone. View is like a div: it shows nothing by itself and groups the nested elements. The lines go from top to bottom, like blocks on the web.

Nested Text

A Text can be nested in a Text to highlight part of a line. It is like a span inside a paragraph:

// app/index.tsx
<Text>
  Done: <Text style={{ fontWeight: 'bold' }}>2 of 5</Text>
</Text>

You get one line where "2 of 5" is bold. The numberOfLines prop cuts long text with an ellipsis: <Text numberOfLines={1}>.

Image: a picture from the project

A local picture is included with require, and Metro adds the file to the app:

// app/index.tsx
import { Image, Text, View } from 'react-native';
 
export default function Index() {
  return (
    <View>
      <Image
        source={require('@/assets/images/icon.png')}
        style={{ width: 64, height: 64 }}
      />
      <Text>My tasks</Text>
    </View>
  );
}

The app icon, 64 by 64, appears above the heading. The @/ prefix means the project root; it is configured in the template's tsconfig.json.

Image: a picture from the internet

For a picture at a URL, pass an object with a uri field to source. The size is required, because React Native does not know it in advance.

// app/index.tsx
<Image
  source={{ uri: 'https://picsum.photos/200' }}
  style={{ width: 200, height: 200 }}
/>

Once loaded, a random 200 by 200 photo appears on the screen.

Web to React Native

Common mistake

Writing text directly inside a View:

// app/index.tsx
// Wrong:
<View>My tasks</View>

The app shows a red error screen saying "Text strings must be rendered within a Text component". Wrap any text, even a single word or number, in Text.