Understanding the 5 Most Important Core Components in React Native

If you've ever played with Lego blocks, you know that no matter how massive and complex a model is (like a castle or a spaceship), they are all created by connecting the most basic bricks.

UI programming in React Native is exactly the same. You don't have to create buttons or frames from scratch. React Native provides you with a built-in toolkit called Core Components. By combining them, you can build the interface of Facebook, TikTok, or any application you want.

In this article, we will learn how to master the 5 most important "bricks": View, Text, Image, TextInput, and ScrollView.

1. View: The "universal box"

In the world of Web programming, we have the <div> tag to group elements together. In React Native, we use <View>.

The role of View: A View is essentially an empty box. It doesn't display any text or images if it stands alone. Its only task is to wrap, group, and layout other components.

For example, when you see an avatar image placed next to a Username, both are usually wrapped together inside a <View> tag.

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

export default function App() {
  return (
    <View style={{ padding: 20, backgroundColor: '#f0f0f0' }}>
      <Text>This is content inside a View box</Text>
    </View>
  )
}

Note: View automatically converts to UIView on iOS and ViewGroup on Android.

2. Text: Where all text is displayed

Unlike the Web (where you can type text directly inside a <div> tag), in React Native, all text must be placed inside a <Text> tag. If you let a single letter fall outside this tag, your app will immediately throw a red screen error!

The <Text> tag supports many useful properties:

• Truncate text if it's too long with ... (the numberOfLines property).
• Change font, color, bold, italics.

<Text numberOfLines={1} style={{ fontSize: 20, fontWeight: 'bold' }}>
  This headline is very long and will be truncated with an ellipsis if it exceeds the screen limit.
</Text>

3. Image: Bringing images into the app

An app would be very boring without images. The <Image> tag in React Native allows you to display images from 2 main sources: Images downloaded directly from the network (Network) and images available on the device (Local).

Method 1: Display Local images (from the assets folder)

You use the require() function to point to the file path. React Native will automatically calculate the image size for you.

<Image source={require('./assets/avatar.png')} />

Method 2: Display images from the Internet (Network)

You must pass an object containing the uri. Special note: For images fetched from the network, you MUST specify the width and height, otherwise the image will be completely invisible!

<Image
  source={{ uri: 'https://images.unsplash.com/photo-123456' }}
  style={{ width: 200, height: 200, borderRadius: 100 }}
/>

4. TextInput: Listening to the user

How do users log in, search, or send messages? That's when you need <TextInput>. It will automatically pop up the phone's virtual keyboard when the user taps on it.

To manage what the user is typing, we will combine <TextInput> with the useState Hook you learned in Article 4.

import React, { useState } from 'react'
import { View, TextInput, Text } from 'react-native'

export default function LoginScreen() {
  const [username, setUsername] = useState('')

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="Enter your username..."
        value={username}
        onChangeText={(text) => setUsername(text)} // Update state on every keystroke
        style={{ borderWidth: 1, borderColor: 'gray', padding: 10 }}
      />
      <Text>You are typing: {username}</Text>
    </View>
  )
}

5. ScrollView: "Rescuing" content from small screens

Imagine you have a very long article. In Web programming, the browser automatically adds a scroll bar when the content overflows the window.

But on Mobile, things are different! If your content is longer than the phone screen's height, the overflowing part will be "cut off" and disappear. Users can swipe all they want but won't be able to see the part below.

To solve this problem, you just need to replace the outer wrapping <View> tag with a <ScrollView> tag.

import { ScrollView, Text } from 'react-native'

export default function ArticleScreen() {
  return (
    <ScrollView style={{ padding: 15 }}>
      <Text style={{ fontSize: 24 }}>Article Title</Text>
      <Text style={{ marginTop: 20 }}>The first paragraph is very long... (Repeat 100 times to see the scrollbar)</Text>
    </ScrollView>
  )
}

Performance note: ScrollView is great for articles, settings pages, or content of moderate length. However, if you want to build a Newsfeed containing thousands of posts like Facebook, using ScrollView will cause memory overflow and app lag. In that case, we will need the "ultimate weapon" called FlatList (which will be revealed later in the series).

Conclusion: Just master the Core Components

An app interface is ultimately just a clever arrangement of Core Components:

• Use View as a container.
• Use Text to display words.
• Use Image to beautify with pictures.
• Use TextInput for input interaction.
• Use ScrollView so content can be swiped up and down.

At this point, you have enough bricks to build a house. But the current house still looks quite messy because the bricks are overlapping each other. To paint and arrange the layout so the app looks professional and beautiful like a design, we will move on to the next article.