***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.
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.
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
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.
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.
