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

See more

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. 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. 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. 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. 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. 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. 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. 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. 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. 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

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo