React Native — How To Start

Photo by Balázs Kétyi on Unsplash

Start with the project

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

Create a component

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

Overview —

--

--

Hey! I'm Arash Arora, currently pursuing my Btech in CSE with cybersecurity as a specialization.

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
Arash Arora

Hey! I'm Arash Arora, currently pursuing my Btech in CSE with cybersecurity as a specialization.