What are Components?

The picture divides one screen into such pieces. Toy building blocks are a fair comparison. Each block has a shape of its own, and you make a larger structure by joining blocks together. In the same way, some components do one small task, such as showing a text label, and others are larger, such as a navigation menu or a list of items.

Why You Need Components

If you wrote a whole app in one file, every change would mean searching through one long block of code. A small edit could break an unrelated part of the screen, and finding the cause would take a long time.

Components divide that code by responsibility. One component renders the user profile, and another handles a button press. When the button needs to change, you open the button component and nothing else. Once a component exists, you can also use it in another place without writing its code again.

Your First Component

Here is a small component. To try it, replace the contents of App.js in the project you created earlier, then save the file.

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

const Greeting = () => {
  return (
    <View>
      <Text>Hello, welcome to React Native!</Text>
    </View>
  );
};

export default Greeting;

Greeting is an ordinary JavaScript function that returns JSX. View is a container that groups other elements, and Text shows the string on the screen. The last line makes the component available to other files, which is the subject of a lesson later in this chapter.

The name of a component must start with a capital letter. JSX treats a lowercase tag as the name of a built-in element, so <greeting /> does not call your greeting function at all. On a device, React Native then stops with an error about a component named greeting, which ends with Make sure to start component names with a capital letter.

Built-in Components and Custom Components

View and Text came from React Native, while you wrote Greeting yourself. That is the first useful way to sort components: built-in components come with React Native, and custom components are the ones you write.

Built-in components

React Native provides ready-made components for common jobs, so you do not have to write the low-level code for each platform. These are the ones you will meet first:

• Text displays text.
• View groups other components and lays them out.
• Button is a simple button that responds to a press.
• Image displays a picture.
• TextInput lets the user type text.
• ScrollView makes its content scrollable.

You combine them to form larger pieces of UI, and you can style them with JavaScript objects, as the Styling chapter explains. The next example adds a Button below the greeting. onPress names the function to run when the user taps, and Alert.alert shows a native dialog with a title and a message. The Handling Events chapter covers both in detail.

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

const Greeting = () => {
  return (
    <View>
      <Text>Hello, welcome to React Native!</Text>
    </View>
  );
};

const WelcomeScreen = () => {
  return (
    <View>
      <Greeting />
      <Button title="Say Hello" onPress={() => Alert.alert('Hello', 'You pressed the button.')} />
    </View>
  );
};

export default WelcomeScreen;

Pressing the button in a test run produced exactly one call, with these two arguments:

Alert.alert('Hello', 'You pressed the button.')

Notice that <Greeting /> is used in the same way as <Button />. JSX makes no difference between a component you wrote and one that React Native provides.

Custom components

A custom component combines other components into a piece that fits your app. A user profile card, for example, needs a picture, a name and a layout that holds them together. You write that once as ProfileCard, and the part that changes between uses comes in through values called props, which the next chapter explains. For now, read { name, image } as "the values this card was given".

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

const ProfileCard = ({ name, image }) => {
  return (
    <View>
      <Image source={{ uri: image }} style={{ width: 80, height: 80 }} />
      <Text>{name}</Text>
    </View>
  );
};

const ProfilesScreen = () => {
  return (
    <View>
      <ProfileCard name="John Doe" image="https://example.com/john.jpg" />
      <ProfileCard name="Jane Smith" image="https://example.com/jane.jpg" />
    </View>
  );
};

export default ProfilesScreen;

The style on Image is not decoration. React Native cannot know the size of an image that comes from the network, so its documentation requires you to set the width and height yourself. Without them, the picture does not take up any space on the screen. The two addresses here are placeholders that lead to no real picture, so you will see only the names until you use the address of a real image.