Are you familiar with components in React Native? In case your answer is negative, continue reading this post, in which you can find out what they are, what are some of the components that we can use in this framework and how you can install them.
If you don’t know this frameworkwe recommend that you take a look at our post on what React Native is, where we define it in more depth and explain what some of its fundamental characteristics consist of.
What are components in React Native?
Simply put, components in React Native refer to some elements that we can create in this librarywhich give us the possibility of separating the interface into different parts that, in the end, turn out to be reusable.
These are represented by the keyword componentswhich is the class that all our classes are going to extend from.
Something that we must always keep in mind is that, since React Native uses React, our components It is imported from the React library. So, to import it, we must add the following: import React, { Component } from ‘react’.
Types of components in React Native
Broadly speaking, we must highlight that there are two types of components in React Native, which are:
Class components. Function components.
Basic components in React Native
In this framework We can find various components, which have a specific function. The most used components that, in fact, are considered basic are the following:
StyleSheet– This is the component where we will add the component styles.
View– This is the most basic component upon which most other components inherit. We could equate it to an HTML
text: This component is where we will display texts.
Image: This component is used to display images
TextInput: The function of this component is to provide a space for the user to enter text using their device’s keyboard.
ScrollView: This component allows you to establish a container in which various components that can be moved on the screen can be stored.
How can we install the components in React Native?
Another very important aspect related to the topic of components in React Native is how these elements are imported. In general, to import the components of this library we can do it in the following way: import { StyleSheet, Text, View } from ‘react-native’.
In fact, in the following image you can see a representation of how the components would be imported in React Native:
Keep in mind that React Native is very focused on reusing components, whether made by us or by a third party. This is an aspect that allows us to greatly speed up the development of our project.
To install components for the purpose of integrating them into our user interface, we must perform one of the following steps:
To install third-party React components we use npm, the package manager for node. To install a component just put npm install –save {component name}.
On the other hand, in case we create our own component that can be useful to more programmers, we can publish it in npm so anyone can use it.
Learn more about mobile app development
Now that you know what components are in React Native or react-native componentswhat are some of them and how can you install them, You are probably interested in knowing much more information about this library, for example about React Native tags. For this reason, we tell you that at we have Full Stack Bootcamp Mobile App Development.
With this bootcamp, you will be able to access intensive, comprehensive, high-quality training that will be perfect for your learning process. Our agenda includes topics such as the development and design processes of multiplatform apps, as well as the fundamentals of iOS and Android and different frameworksamong many other things. Start your development training process mobile with us and boost your professional future!
