Introduction to Basic Components

Basic components are the ones that the majority of applications employ as their most prevalent elements. These components are required for application development independent of the type and nature of the application. Let’s briefly summarize each of the basic components provided by React Native before we move on. We’ll learn about each one later in detail.

View

React Native does not use HTML elements like <span>, <div>, <p>, and so on. It uses components to build the UI, and View is the most basic component for UI designing. It is like a <div> and acts like a container component that can group the children components.

Text

The Text component is another fundamental component of React Native. It can be used anywhere inside the application to display textual data.

Image

The Image component renders and displays images. It can be used to display both static and nonstatic images. Furthermore, it can also be used to display nonimage resources, such as .mp3, .wav, .mp4, and .pdf files.

TextInput

Next up is the TextInput component. It handles user input, a crucial part of building an interactive application. It is one of the ways through which the user can interact with an application.

ScrollView

Most applications have abundant content, such as textual data, images, and videos. For example, Twitter has a never-ending list of tweets, and Facebook has a never-ending list of posts, images, and videos. Displaying all of the content on a single screen can be challenging. This is where the ScrollView component comes in. It helps us to scroll horizontally and vertically to see all of the data rendered by the application.

StyleSheet

Last, but not least, is the StyleSheet component. As the name suggests, this component is used to style applications in React Native. It can be used to improve the aesthetics and look of the application by using various style formats such as fontSize, color, flex, and backgroundColor.