Frequently Used React Native Components

Photo by Christina @ wocintechchat.com on Unsplash

***Disclaimer: If you are just getting started with React Native and have not set up your first React Native project yet, read my blog on how to getting started***

React Native has built-in components for us to use when making our apps. They can be found in the React Native documentation here. Don’t feel limited to these built-in components, we also have access to component libraries that have been created by the community of developers that we can access here.

To use one of the built-in components, you must import it from the react-native library at the top with the rest of your imports, the same way you would import React from the react library.

Like React, we write functional components where we can use Hooks for state or class components where we can use the normal state.

View

This is the most commonly used component for building a user interface. View is a container component that helps layout for styling or manipulating with Javascript. This is equivalent to a <div> HTML tag. The styling can also be made inline with the style prop.

View functional component example from reactnative.dev

Image

Image is a component used to show images, like from the web and including those from a local disk such as a phone’s camera roll. This is equivalent to a <img> HTML tag.

Image functional component example from reactnative.dev

Text

Text is a component used to display text. It will raise an exception if you don’t. There are multiple props you can use in the Text component, including style and onPress. Unlike HTML where you can write your text in between some <div> tags and it will still display, we MUST wrap all of our texts inside of a Text component in React Native

Text functional component example from reactnative.dev

TextInput

TextInput is a component used for inputting text via the native keyboard. This is similar to the <input> HTML tag. We can change the input type we want the user to give us by using one of the props called keyboardType. We can even make controlled inputs by adding a prop called onChangeText.

TextInput functional component example from reactnative.dev

StyleSheet

StyleSheet is similar to external CSS style sheets. We aren’t able to use CSS style sheets to style our UI with React Native so this is an abstracted version with similar verbiage.

StyleSheet is a style object that we create outside of the functional or class component. It allows us to be able to refer to a specific style by the style object’s key name instead of having to create a new style object every time in the props. This is like the way we used ID and class when making CSS style sheets. It’s best to be descriptive for each object key when making your style object.

StyleSheet component example from reactnative.dev

Happy Coding!!

Photo by Karsten Winegeart on Unsplash

--

--

--

Software Engineering Student at Flatiron NYC. Learning day by day 💻

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Introducing the Offen Consent Tool

Auto Effect Pattern with Redux and React Hooks

10 important Javascript interview questions.

Top 5 In-Demand Web Development Frameworks in 2021 and Beyond

map vs. for loop

React-Rails User Authentication(Part 2- React Frontend)

Webpack — Complete Beginners Guide

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ajak Cyer

Ajak Cyer

Software Engineering Student at Flatiron NYC. Learning day by day 💻

More from Medium

React Native

Theming React Native Applications with Styled Components

Send Direct SMS from React Native App using React Native Bridge

Difference Between React and React Native — Geekstrick