Getting started with React Native

React Native, also known as RN, is a widely used mobile app framework that relies on JavaScript and It enables developers to build natively-rendered apps for both iOS and Android platforms using the same codebase was introduced by Facebook as an open-source project in 2015 and quickly became one of the leading solutions for mobile app development. Major mobile apps such as Instagram, Facebook, and Skype are powered by React Native.

React Native's success can be attributed to several reasons. Firstly, React Native allows companies to write code once and use it for both their iOS and Android apps, saving significant time and resources, Secondly, React Native was built using React, a popular JavaScript library that was already well-established when the mobile framework was released and Thirdly, the framework empowered front-end developers, who previously could only work with web-based technologies, to create robust, production-ready apps for mobile platforms.

What is React Native?

React Native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms.

Getting Started with React Native

Building with React Native is extremely efficient and highly addictive but getting started can be a little tricky. React Native uses Node.js, a JavaScript runtime, to build your JavaScript code. If you don’t already have Node.js installed, it’s time to get it!

• Installation of Node JS on Windows.
• Installation of Node JS on Linux.

Installing dependencies for React Native

Here we will use the Expo CLI version which makes it much smoother to run your React Native applications. Follow the below steps one by one to set up your React native environment.

Expo: It is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase.

Step 1: Open your terminal and run the below command.

npm install -g expo-cli

Step 2: Now expo-cli is globally installed so you can create the project folder by running the below command.

expo init "projectName"

Step 3: Now go into the created folder and start the server by using the following command.

cd "projectName"
npm start web

Or to run it on simulator use the following command.

npx expo start

Then press ‘a’ or ‘i’ to open it in your android or ios emulator respectively.

First React Native App Example

This example demonstrates a simple react-native app.

// Filename - App.js

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>
        Your react-native project has been created
      </Text>
      <Text style={styles.subtitle}>Welcome</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    color: "green",
    fontSize: 18,
  },
  subtitle: {
    color: "red",
  },
});

Output:

Things to remember while starting React Native

1. Usage of && operator for conditional rendering

To conditionally render components, it is very common to use && operator in React. For example, let's say we want to show user details (using UserDetails component) when the user is logged in. We can do it as below

{isUserLoggedIn && <UserDetails />}

How this works is that if the value before the && operator is truthy, then the value to the right of && operator is rendered. However, you need to be extra careful when using && operator. Let's say inside the UserDetails component, we want to show the email address of the user only when it is present. So we can again use the same && operator as below

{emailAddress && <Text> {emailAddress}</Text>}

But wait, if emailAddress is a blank string, then your app would crash. Yes, it would really crash. This is because in react native every string (even empty string) needs to be in a tag to be rendered to the screen. So when the emailAddress is a blank string, it evaluates to falsy value and thus the tag to the right of && operator doesn't get displayed, instead the app tries to render the emailAddress string directly which has the value of "" and it crashes. Same is the case with conditional rendering based on integers. For example you want to show the price only when it isn't zero. You may do it as below

{product.price && <Text> {product.price} </Text>}

This again would crash the app if the product.price has the value 0, again because of the same reason. Okay, so how do we solve this problem ? Well, we have two simple ways

1. Ensure that the value to the left of && operator is a boolean value.
2. Use ternary operator

// emailAddress = ""
// Wrong Way - App Crashes
{emailAddress && <Text>{emailAddtess}</Text>}
// Correct Way 1 - Converting the values to left of && operator to boolean
{!!emailAddress && <Text>{emailAddress} </Text>}
// Correct Way 2 - Using ternary Operator
{emailAddress ? <Text> {emailAddress} </Text> : null}

2. Different behaviour on Android and iOS

Always keep in mind that although most the code that works on android would directly work on iOS and vice versa, however, there will be some things that would behave differently. For example, shadow and elevation behaves differently on android and iOS. Also native components may behave differently on Android and iOS. For example, 'Picker' component behaves differently on Android and iOS.  iOS.

3. Always try to break components into smaller components

There are times when we feel like there isn't a need to make a separate component for a small part of the screen. However, most of the time it is a good idea to move that to a separate component. It helps you in many ways in long term 1. Its easy to refactor code (if needed) at a later stage. 2. Moving/modifying a part of screen is easier since it is already independent 3. Your code is free from unnecessary tight coupling of different intents Refer to official docs at this for an example.

4. Try to have images load from CDN

This one is more of a general guideline to follow when working on mobile apps. The prime difference in Web App Development and Mobile App Development is the flexibility of updating/fixing your apps. In case of Web Apps, you are free to send updates whenever you want and people get them almost instantly. However, in case of Mobile Apps, once you update the app from your end, it is upto the users when they finally update their app and get the latest version. Also, sending updates very frequently might also piss off your users when they have to update your app frequently. Now coming back to the topic of loading image from CDN, it is considered a best practice to always load images from CDN because of following reasons.

1. Reduced APK size
2. Users on older app versions get updated icons/images instantly.