Core Components

Learn the basic building blocks of React Native apps: core components

Start

Key Concepts

Review core concepts you need to learn to master this subject

Core Components

Importing Core Components

Core Components Optional Functionality

<View> Component

<ScrollView> Component

<Text> Component

<Image> Component

<TextInput> Component

Core Components

<ScrollView>
  <Text>Some text</Text>
  <View>
    <Text>Some more text</Text>
    <Image
      source={{
        uri: 'https://picsum.photos/64/64',
      }}
    />
  </View>
  <TextInput
    defaultValue="You can type here"
  />
  <Button
    onPress={() => {
      alert('You tapped the button!');
    }}
    title="Press Me"
  />
</ScrollView>

Core components are ready-to-use components available from React Native, which include <View>, <Text>, <Image>, <ScrollView>, <Button>, and <TextInput>.

Core Components

Lesson 1 of 1

1
What is a core component?
In Expo and React Native, components are translated to native components for the platform it’s running on. To help you get started, React Native provides a set of ready-to-use components for your a…
Start
2
View component
One of the most fundamental core components is the View component. With View, you can create responsive layouts using [flexbox](https://re…
Start
3
Text component
Because Expo and React Native translate components to their native counterpart, they aren’t exactly similar to plain React. With web, you can render text anywhere in the document without adding par…
Start
4
Image component
Almost every app displays images. This content can be rendered in React Native using the Image component. It’s similar to the [ HTML ele…
Start
5
ScrollView component
Creating scrollable content on web is fairly straightforward. You only have to apply a fixed width and height to a container to make out-of-bounds content scrollable. With native development, this …
Start
6
Button component
Besides all visual components, every app requires interactive components. One of the most frequent interactions is a “click” or “press” interaction. Most of the core components have support for pre…
Start
7
TextInput component
Most apps require users to provide content, like writing tweets on Twitter. The TextInput component is created to capture textual and…
Start
8
Combining components
When creating an app, you often need to reuse certain UI elements. Adding styling to the components directly without grouping these elements into components can lead to inconsistencies. It’s a good…
Start
9
Review
Well done! You’ve covered some of React Native’s most common core components. Let’s review: * The View component can be used to create responsive layouts using flexbox, or add basic styling to nes…
Start