Scribd
Upload
12 views3 pages

Lab 4 MAD

Mobile Application Development

Uploaded by

uzair31531
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views3 pages

Lab 4 MAD

Mobile Application Development

Uploaded by

uzair31531
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Lab 04

Creating the first ReactNative and Expo Cli Application

Activity Outcomes:
The activities provide hands - on practice with the following topics

pplication

Activity 1:
Create an Expo cli app named “AwesomeProject”.

Solution:
Install Node v12 or greater
Run the command ( npm install -g expo-cli )
Followed by these commands,
expo init AwesomeProject
cd AwesomeProject
npm start # you can also use: expo start

Output
First Expo Application created successfully.

Activity 2:
Create a React Native cli application named “AwesomeProject”.

Development OS: windows


Target OS: android
Installting Dependencies: JDK and android studio
NDK, JDK:
We recommend installing Node via Chocolatey, a popular package manager for
Windows.
Open an Administrator Command Prompt (right click Command Prompt and
select "Run as Administrator"), then run the following command:
choco install -y nodejs-lts openjdk11
Android development environment:
Download and install Android Studio. While on Android Studio installation
wizard, make sure the boxes next to all of the following items are
checked:
Configure the ANDROID_HOME environment variable:
The React Native tools require some environment variables to be set up in
order to build apps with native code.

ent variables

to the path to your Android SDK:

Run this command for creating a new project:


npx react-native init AwesomeProject
Start your application:
npx react-native run-android

Output
theStealthWarrior

3) Graded Lab Tasks

Lab Task 1
Create an account on Snack and create the first expo cli application on it. Rename the application
as “FirstExpoApplication”. Run the application on built-in android and IOS emulators. Also,
scan the QR code and run the application on actual device (android/IOs). Lastly, remove the
unnecessary code from snack and application should only have two react native components
having view and text, having “Hello world” as output.

Solution:

1. Create a Snack Account

 Go to Snack.
 Click on Sign In in the top right corner.
 Sign in using your GitHub, Google, or create a new account with your email.

2. Create the First Expo CLI Application

 After signing in, click on Create New Snack to start your first project.
 Rename the application to "FirstExpoApplication" by clicking on the project name at
the top.

3. Run the Application on Built-in Android and iOS Emulators

 In the Snack editor, you'll see built-in iOS and Android simulators.
 Click on "Device" on the right sidebar and choose iOS or Android.
 The app will compile and run automatically in the simulators.
4. Run on Actual Device (Android/iOS)

 On the right-hand side of the Snack editor, you'll see a QR code.


 Scan this QR code using the Expo Go app (available on both Android and iOS).
 The app will open and run on your physical device.

5. Remove Unnecessary Code and Simplify

 Go back to the Snack editor, and clean up the default code. Here's the minimal version of
the app with two components:

import React from 'react';


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

export default function App() {


return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Hello World</Text>
</View>
);
}

Lab Task 2
Create a React Native Cli application after following the instructions from here
https://reactnative.dev/docs/set-up-your-environment Run the application on your android/IOs
environment.
Tool for coding: VS Code
(https://code.visualstudio.com/download)

LAB ASSIGNMENT # 02
Deadline Next LAB

You might also like