React Native for Beginners: Getting Started with React Native; Understanding the Basic Core Components and how to use them for your applications.

In the last article on React Native, we created a new application, but we have nothing on it. In this article, I will introduce you to the Basic Core Components of React Native and how to use them.

React Native for Beginners

Basic Core Components of React Native

1. View

If you are familiar with HTML tags in Web Development, you would know the use of the div tag. Div is a container that houses other components. In React Native, View is that container. The View component is to support layout, style, and some accessibility controls. You cannot run an application without the View Component because it houses others on each screen of an application.

Using the View Component.

2. Text

The Text UI Component in React Native is used to help display strings and styles and even handle touch events. In Web Development, this is the <p> tag.

The Text Component

3. Image

The Image UI Component in React Native displays different types of images in Apps. In React Native, the supported image file formats are png, jpg, jpeg, bmp, gif, webp, and PSD(iOS only). The source(prop) of the image can either be from an online source (remote URL) or your local device. Note: the dimensions of the images must be specified in the code for display.

Local Storage and Network Images

4. ScrollView

The ScrollView UI Component in React Native is a scrollable container that works like the div tag and can contain several other components and Views. Note that ScrollViews need height to work. You can either apply the height directly to it or attach it to a parent View.

ScrollView Component

5. TextInput

The TextInput UI Component in React Native allows users to input text into a created App through the Keyboard. It has several props such as Auto-Correct, Auto-Complete, Keyboard Type, SecureTextEntry, Auto-Capitalization, Placeholder Text, and others. Note, the TextInput Component is a self-closing component.

TextInput Component with Placeholder Prop.

In addition to the above, there are components to choose from for your UI Design in React Native: Pressable, Touchable Opacity, StyleSheet, FlatList, ImageBackground, Button, and others.

If you would also like to learn more about React Native, you can click here to get my complete course (with backend development) on React Native Mobile App Development.

Good Luck!