Key Concepts

Review core concepts you need to learn to master this subject

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
    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…
  2. 2
    One of the most fundamental core components is the View component. With View, you can create responsive layouts using [flexbox](https://re…
  3. 3
    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…
  4. 4
    Almost every app displays images. This content can be rendered in React Native using the Image component. It’s similar to the [ HTML ele…
  5. 5
    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 …
  6. 6
    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…
  7. 7
    Most apps require users to provide content, like writing tweets on Twitter. The TextInput component is created to capture textual and…
  8. 8
    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…
  9. 9
    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…

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