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

12 Things That’s Weird To People But Normal For Programmers

Jackson 2.11 features

Longest Common Prefix Problem

An Incremental Approach to Clean React-Redux Development

When to use Render Props pattern?

Polymorph & React (React + BEM + JavaScript Styles)

Leetcode: Meeting Rooms II

JavaScript Debouncing Vs Throttling

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

Use of Higher Order Component (Hoc) in React

Play Dacast Video on React Native

React Native

Disabling Bottom Navigation Tabs in React-Native