Table of Contents

React Native differs from React, which is primarily used to create websites, whereas React Native is utilized to create mobile apps. However, there are still many similarities between those two. Since React Native is built on React, it’s a good idea to learn React first.

In this project, we are building a Little Lemon Restaurant app.

Set Up

Create new React Native projects:

npx create-expo-app <project-name>

Structure

<project-name>/
│
├─ app/               # Main app logic: screens, navigation, providers
├─ assets/            # All static files (images, fonts, icons)
│   └─ images/        # PNG/JPG assets for UI
├─ components/        # Reusable UI components (Button, Card, Header)
├─ constants/         # Reusable values: colors, routes, sizes
├─ hooks/             # Custom React hooks (useAuth, useFetch)
├─ scripts/           # Optional automation/dev scripts
├─ node_modules/      # Installed libraries (auto-generated)
│
├─ app.json           # Expo/React Native app configuration
├─ package.json       # Project dependencies + scripts
├─ tsconfig.json      # TypeScript settings (if using TS)
└─ [README.md](<http://readme.md/>)          # Project documentation

Run the program

Run the following command to view all the works:

npm statrt

Note that you need to install Simlator on a PC in order to preview. Or you can download the Expo app on your phone and scan that QR code to preview the work. Or run a specific goal directly:

npm run android
npm run ios
npm run web

Introduction to React Native

View and Text

View : Basic building block of the user interface.

Text : Basic core component that displays text.

We can first create a header and footer, and display something in the middle of the screen as a welcome screen.