Lesson 3

BUIDLING MOBILE
APPS WITH
REACT NATIVE

04/21/25 1
 Lesson 4

PART 1

04/21/25 2
 What is REACT NATIVE?
• React Native is an open source framework for building
native Android and iOS applications using React and the
app platform’s native capabilities.

• With React Native, you use JavaScript to access your

platform’s APIs such as Camera and push notifications.
• We shall also use React Components to define the
appearance and behavior of your UI

04/21/25 3
 What is REACT
• React, sometimes referred to as a
frontend JavaScript framework, is a
JavaScript library created by Facebook
and used for building UI components.

04/21/25 4
 REACT-DOM vs REACT-NATIVE
• REACT uses REACT-DOM, while REACT
NATIVE uses REACT-NATIVE libraries
• React DOM uses HTML, CSS, and
JavaScript for layout and styling of Web
Apps.

• React Native, on the other hand, uses

native UI components and APIs to
create cross-platform Mobile
applications.
04/21/25 5
 Why REACT-NATIVE?
• IOS apps require swift or objective-C
• Android apps require java or kotlin
• Global distribution of users is approx.:31%
on IOS and 68% on Android

• Need to develop two separate Apps using

different technologies
• With REACT-NATIVE, you can create one
App that seamlessly works on both
platforms

04/21/25 6
 PRE-REQUISITES
• JavaScript:(https://www.w3schools.com/js/
default.asp)
• REACT
fundamentals(https://www.w3schools.com/R
EACT/DEFAULT.ASP)

04/21/25 7
 WHAT IS EXPO?
• Expo is a set of tools and services built around
React Native apps with consolidated logic for
both iOS and Android..

• The alternative tool is the React Native CLI

which is the traditional approach for building
React Native apps.

04/21/25 8
 ADVANTAGES of Expo vs REACT-NATIVE CLI
• Access to Pre-built Libraries: provides a wide range of pre-
built libraries and APIs.
• Simplified Build Process: handles the build process for you,
abstracting away the need to configure build tools and deal with
native code compilation.
• Native Physical Device: you can have the Expo Go app
installed in your mobile and connect over the same network and
get your app tested on any physical device [both Android and
iOS].
• No need for a mac to build an iOS App. Code can be built and
deployed to the cloud. From there you can directly deploy it to
the store.
Disadvantage:
• Limited Native Modules: Expo restricts access to certain native
modules, which means you may encounter limitations when
trying to integrate certain third-party libraries or accessing low-
level device features.

04/21/25 9
 PART TWO
PROJECT
STRUCTURE

04/21/25 10
 INTRODUCTION

• When you create a new Expo

project, a few files and folders are
provided by default.

• Lets list out the essential files and

folders that are necessary for you to
understand when developing your
app.
04/21/25 11
React native App in Sublime Text
Editor

04/21/25 12
 App.js
• The App.js file is the default screen
of your project.
• It is the root file that you'll load after
running the development server
with npx expo start.
• You can edit this file to see the
project update instantly.
• Generally, this file will contain root-
level React Contexts and navigation.
04/21/25 13
 app.json
• The app.json file contains
configuration options for the
project.

• These options change the behavior

of your project while developing, in
addition to while building,
submitting, and updating our app.

04/21/25 14
 Assets folder
• The assets folder contains adaptive-icon.png
used for Android and an icon.png used for iOS
as an app icon.

• It also contains splash.png which is an image

for the project's splash screen and a
favicon.png if the app runs in a browser.

• The assets directory is not special-cased, and

our project can have images and other assets
placed anywhere in our project structure.

04/21/25 15
 Components folder
• The components directory is where you should
put all your reusable components.

• Each component should have its own directory

with the following files (it is similar to the screen
folder structure)

04/21/25 16
 Other standard files
• The standard files listed below are
part of every project created with
Expo CLI.
• You can edit them to customize your
project.

04/21/25 17
 .gitignore
• A .gitignore allows you to list files
and folders that you don't want to
be tracked by Git.
• You can modify the files to list other
files and folders in your project.

• Generally, the default list is

sufficient for most projects.

04/21/25 18
 babel.config.js
• Applies the babel-preset-expo preset that
extends the default React Native preset
and adds support for decorators, tree-
shaking web packages, and loading font
icons with optional native dependencies if
they're installed.

• You can also modify this file to add

additional Babel plugins or presets.

04/21/25 19
 package.json
• The package.json file contains the project's
dependencies, scripts and metadata.
• Anytime a new dependency is added to your
project, it will be added to this file.

• You can also modify the scripts to add or remove

them.
• Four default scripts are provided to trigger the
development server of your project such as
expo start, expo start --android, expo start
--ios, and expo start --web.

04/21/25 20
 Devices For Running
Expo App(Mobile App)

1.IOS Device
2.Android Device(using expo)
3.IOS simulator
4.Android Emulator

04/21/25 21
 END OF PART
TWO
THANK YOU

04/21/25 22
 PART 3
SETTING UP THE
DEVELOPMENT
ENVIRONMENT
04/21/25 23
 SETTING UP THE DEVELOPMENT
ENVIRONMENT
1.Install Node.js on your computer
2.Install Vs Code
3.Install Expo Go on your smartphone from
Google Play store
4.Create your project Folder called React-Native
on your Desktop
5.Open the folder in VsCode
6.Install REACT NATIVE using Expo as follows

04/21/25 24
 Installing Steps: React Native
• Run the following command to create a new React
Native project called “bmcsApp":

1.npx create-expo-app BMCSapp1 or npx create-expo-app@latest

BMCSapp1Cd to: mscApp1
2.Run:npx expo start to generate the QR code
3.Ensure both your computer and phone device are connected to
same network
4.Open the Expo Go app and use to scan the QR code
5.The Expo mscApp installed in computer now runs in your
device
6.Incase it takes very long to run or there are errors, do the
following

04/21/25 25
 Incase of errors, set default
`CONNECTION` to `tunnel` as
shown

• Change the "start" script in package.json to "expo start --

tunnel".
• "scripts": {
• "start": "expo start --tunnel",
• "android": "expo start --android",
• "ios": "expo start --ios",
• "web": "expo start --web",
• "eject": "expo eject"
• },

Then, you need to run the command directly:

npx expo start --tunnel

04/21/25 26
Connection Gives error on 1st
attempt but connects on 2nd
Attempt

• Starting Metro Bundler

• CommandError: ngrok tunnel took too long to
connect.
• PS C:\Users\HP\Desktop\MSCIT-MOBILE\RN2\
hadullo> npx expo start --tunnel
• Starting project at C:\Users\HP\Desktop\MSCIT-
MOBILE\RN2\hadullo
• Starting Metro Bundler
• Tunnel connected.

04/21/25 27
 END OF PART 3
THANK YOU

04/21/25 28
 PART 4
DEVELOPMENT
WITH REACT
NATIVE
COMPONENTS
04/21/25 29
 INTRODUCTION
• Components are independent and reusable bits
of code.
• They serve the same purpose as JavaScript
functions, but work in isolation and return HTML.
• Two types, Class components and Function
components,

• REACT is used to create web user interface via

HTML tags such as div, span and paragraph

04/21/25 30
 CLASS COMPONENT
• A class component must include the extends
React.Component statement.
• This statement creates an inheritance to
React.Component, and gives your component access to
React.Component's functions.
• The component also requires a render() method, this
method returns HTML.

• Create a Class component called Car

• class Car extends React.Component {
• render() {
• return <h2>Hi, I am a Car!</h2>;
• }
• }

04/21/25 31
 FUNCTION COMPONENT
• Here is the same example as above, but created using a
Function component instead.
• A Function component also returns HTML, and behaves
much the same way as a Class component, but Function
components can be written using much less code.

• Create a Function component called Car

• function Car() {
• return <h2>Hi, I am a Car!</h2>;
• }

04/21/25 32
 REACT NATIVE COMPONENTS
• React uses the virtual DOM (Document
Object Model) to render code in a web
browser.
• React Native uses native APIs to
render UIs on mobile devices.
• In Android development, you write views
in Kotlin or Java;
• in iOS development, you use Swift or
Objective-C.

04/21/25 33
 REACT NATIVE
COMPONENTS(cont.)
• With React Native, you can invoke these
views with JavaScript using React
components.

• At runtime, React Native creates the

corresponding Android and iOS views for
those components.
•

04/21/25 34
 REACT NATIVE
COMPONENTS(cont.)
• Because React Native components are
backed by the same views as Android and
iOS, React Native apps look, feel, and
perform like any other apps.

• We call these platform-backed

components Native Components.

04/21/25 35
 THE CORE COMPONENTS
REACT NATIVE UI
ANDROID VIEW IOS VIEW WEB ANALOG DESCRIPTION
COMPONENT

A container that
A non- supports layout with
<View> <ViewGroup> <UIView> scrolling <div flexbox, style, some
touch handling, and
> accessibility controls

Displays, styles, and

nests strings of text
<Text> <TextView> <UITextView> <p> and even handles
touch events

<UIImageVie Displays different types

<Image> <ImageView> <img> of images
w>
A generic scrolling
<UIScrollView container that can
<ScrollView> <ScrollView> <div> contain multiple
> components and views

<input Allows the user to

<TextInput> <EditText> <UITextField> enter text
type="text">
04/21/25 36
 VIEWS
• View in Android is like Div in Web
• In Android and iOS development, a view is the
basic building block of UI:
• a small rectangular element on the screen which
can be used to display text, images, or respond
to user input.
• Even the smallest visual elements of an app, like
a line of text or a button, are kinds of views.

• Some kinds of views can contain other views. It’s

views all the way down!

04/21/25 37
 Creating a Blank Project
• npx create-expo-app@latest CoreComponents --
template blank@sdk-49

04/21/25 38
 Starting the Project
• npx npm start

04/21/25 39
 Mobile Screen on Expo

04/21/25 40
 Mobile Screen on Expo(cont.)

04/21/25 41
 Viewing Options
• Click w to open on web view

04/21/25 42
 After Pressing w for web view
• It looks like you're trying to use web support
but don't have the required dependencies
installed.

• Please install react-native-web@~0.19.6,

[email protected], @expo/webpack-
config@^19.0.0 by running:

• npx expo install react-native-web@~0.19.6 [email protected]

@expo/webpack-config@^19.0.0

04/21/25 43
 Installing web pack

04/21/25 44
 App showing in Web Browser

04/21/25 45
 VIEWS AND VIEW NESTING
• Delete everting in app.js and Create this Code in app.js

import {View } from 'react-native'

export default function App(){
return (
<View style = {{ flex:1, backgroundColor:"red" }}>
<View style = {{width:200, height:200,
backgroundColor:"blue" }}>

</View>

<View style = {{width:200, height:200,

backgroundColor:"green" }}>

</View>
</View>

);
}

04/21/25 46
VIEWS AND VIEW NESTING(cont.)
• Output on web Pack

04/21/25 47
 TEXT
• A React component for displaying
text.
• Text supports nesting, styling,
and touch handling.
• Depending on the target platform,
React-Native will translate this
component to either a UI
TextView(iOS), a
TextView(android) or a ‘p’ (web)
04/21/25 48
 CREATING TEXT
• Import a Text View and Wrap Text in Text
Component

import {View, Text } from 'react-

native'
export default function App(){
return (
<View style = {{ flex:1,
backgroundColor:"red" }}>
<Text>HellO MSC IT TUM</Text>
</View>

);
04/21/25 49
}
 TEXT OUTPUT ON WEB
• Text positioning not proper

04/21/25 50
 TEXT PADDING OF 100
Adding a Padding in the View

import {View, Text } from 'react-native'

export default function App(){
return (

<View style = {{ flex:1,

backgroundColor:"red“,
padding:100 }}>
<Text>HellO MSC IT TUM</Text>
</View>

);
}
04/21/25 51
 TEXT OUTPUT ON WEB
• Text positioning with a padding of 100
improves

04/21/25 52
 TEXT FORMATTING
Adding a Padding in the View
import {View, Text } from 'react-native'
export default function App(){
return (
<View style = {{ flex:1,
backgroundColor:"red", padding:100}}>
<Text>
<Text style = {{ fontSize:30, color:
'white' }}>Hello</Text> MSC IT TUM
</Text>
</View>

);
}
04/21/25 53
 TEXT FORMATTING OUTPUT
• Text Formatting

04/21/25 54
 IMAGE
• A React component for displaying
different types of images, including
network images, static resources,
temporary local images, and images from
local disk, such as the camera roll.

• This example shows fetching and

displaying an image from local storage as
well as one from network and even from
data provided in the 'data:' uri scheme.

04/21/25 55
 THE END
Thank you!

04/21/25 56