Core Components
Learn the basic building blocks of React Native apps: core components
StartKey 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
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
- 1In 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…
- 2One of the most fundamental core components is the View component. With View, you can create responsive layouts using [flexbox](https://re…
- 3Because 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…
- 4Almost every app displays images. This content can be rendered in React Native using the Image component. It’s similar to the [ HTML ele…
- 5Creating 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 …
- 6Besides 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…
- 7Most apps require users to provide content, like writing tweets on Twitter. The TextInput component is created to capture textual and…
- 8When 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…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory