React Native-that's all.

Hi there! 👋
In this three-part series, I’ll walk you through creating a simple React Native + Expo mobile app for Android and publishing it on the Google Play Console.

This first article will give you a solid foundation: we'll cover what React Native is, explain core components, and break down some key concepts to help you get started.

ARTICLE #1

Table of Contents:

1. Introduction- what is React Native?
2. Basics:

• React Native CLI vs Framework
• React Navigation vs File-based routing

1. 📱 What is React Native (a.k.a RN)?
Learn once, write anywhere.

React Native is a mobile development framework created by Facebook (Meta) in 2015. It was developed after Facebook’s struggles with HTML5 for mobile apps resulted in poor performance and instability.

React Native enables developers to build mobile apps using JavaScript (JSX and TSX) and React, but instead of rendering web elements, it translates your code into native mobile components which are available in "react-native" library.

As you can see, I imported a few components so let’s break them down:

• StyleSheet – A way to define component styles (similar to CSS, but not quite CSS).

• Text – Similiar to p in HTML

• View – Similiar to div in HTML. It acts as a main container for layout

• SafeAreaView – Ensures UI stays within visible bounds (not above the status bar)

• TextInput – Input field for user text

• TouchableOpacity / Pressable / Button – Different ways to handle button UI and interaction

• StatusBar – Refers to the top status bar (battery, time, network status etc.)

• KeyboardAvoidingView – Prevents the keyboard from covering inputs (especially on iOS)

2. React Native Basics
2.1 React Native CLI vs Expo
Today, most developers choose to use the Expo Framework instead of the raw React Native CLI — and for good reason.

📚 Even the official docs recommend Expo:

Expo gives you out-of-the-box access to device APIs like camera, notifications, and more. Event the deployment is much smoother and easier with Expo.

Sooo what is Expo, again?
Expo is an open-source platform for making mobile native apps that run on Android, iOS, and even the web (damn!) using a single codebase.

It includes:

• Expo CLI – Command-line tool to create and manage projects.

• Expo Go – A mobile app for instantly previewing your code on a real mobile device.

• Expo Snack – A web-based environment for running React Native code.

In short, Expo simplifies development and eliminates a lot of native configuration headaches.

2.2. Routing
Routing refers to moving between screens in your app — like clicking a button to go from a login screen to a profile page.

There are two ways to handle routing:

Option 1: Using react-navigation

It is component-driven routing which requires boilerplate configuration. It uses component names for routes.

Option 2: File-based Routing with expo-router

It is file-based routing with **almost **zero configuration which comes with Expo. It uses file and folder structure for routes.

🧩 That's all folks for this first article! If you didn't understand well (which is pretty obvious when you are getting in touch with all of these for the very first time!) don't worry cause in the third article I'm gonna show you how to prepare environment, start your app, navigate between screens using both of those options, change UI and communicate with native mobile APIs! 🧩

📝 ARTICLE #2- Deploy an app with EAS and Google Play Console
📱 ARTICLE #3- ‘DoorDelivery’ application development

❗️NOTICE: ‘DoorDelivery’ application stack will be:

• React Native with Expo
• Express and MongoDB
• Expo SDK for maps and geolocation tracking + Google Maps API

❓ Why Express and MongoDB
I usually work with .NET as my backend solution and MSSQL for database but this is a beginner-friendly tutorial and guidance so I don’t want to complicate things.
❓ Why geolocation and Google Maps
I want to show you how to communicate with native APIs and use Expo SDKs in a more interesting way