React Native — How To Start

Photo by Balázs Kétyi on Unsplash

Start with the project

1. Build a starter project
2. npm install
3. npm start — will interface the react native bundler or the metro bundler
4. Install expo go app in your mobile phone
5. Scan the QR code
6. Wait for JS bundle to install
7. Boom! the react native app is up and running

Create a component

1. import React from “react” → how different components work together
2. import {Text, StyleSheet} from “react-native” → take information from those components and use that in the mobile devices

• Text — it is a primitive react native element that shows some very basic text to the user
• View — allow us the general grouping of elements that can assemble different elements together and provide some styling to them
• Image — to show an image to a user
• Button — shows a button
• StyleSheet — it is used to define the styles for a specific web page

import React from "react"
import {Text, StyleSheet} from "react-native"

1. Create a function ⇒

const ComponentsScreen = () => {
	return <Text style={styles.textStyles}>Hi there!</Text>
}

This is not JS but JSX, but when you pass it to react native bundler, it converts to plain JS using babbel

1. Adding a stylesheet

const styles = StyleSheet.create({
	textStyles : {
		fontSize: 30
	}
})

1. Export the function

export default ComponentsScreen;

React Native Navigation — a tool used to show different screens to the user

• We cannot show JS object inside of the text element

Overview —

1. Curly braces in import {} → it symbolizes the very small pieces or function of the react native library