Lecture 4 A

MOBILE APPLICATION
DEVELOPMENT
BCS/BSE – 6
Instructor Name:Aatiqa Bint e Ghazali
CREATING AN APP IN REACT NATIVE
OFFICIAL DOCS
• Always refer to the official documentation
• https://reactnative.dev/docs
WORK USING FRAMEWORK:EXPO
• The best way to work with React Native is by using a framework
• It provides all the necessary tools and APIs for building production-ready
apps.
• It’s still possible to use React Native without a dedicated framework
• However, developers find it beneficial to use a framework like Expo.
• Expo simplifies the development process
• you’ll be able to spend time writing your app instead of writing an entire
Framework
• You can always jump back when you become comfortable with using
React native
EXPO
• Expo is a framework and a platform for universal React applications.
• It is a set of tools and services built around React Native that helps you
develop, build, and deploy React Native applications more quickly and
easily.
START A NEW REACT NATIVE PROJECT
WITH EXPO
• Documentation :
https://docs.expo.dev/get-started/set-up-your-environment/
• To create a new Expo project, run the following in your terminal:
• npx create-expo-app@latest (with TS)
• npx create-expo-app@latest --template(with JS) choose blank
• For now we will go with javascript
npx is a tool that comes with Node.js and is used to run

Node packages without needing to install them globally
on your system.
SOME BASICS ABOUT NPM
• npm is a package manager for JavaScript.
• default package manager for Node.js
• used to manage and share reusable code packages (modules).
• npm allows you to install packages from the npm registry into your
project.
• These packages can be libraries, frameworks, tools, or any reusable
code.
NOTE
• Create a new branch and save your work there
EXPO APP
• Once your enter the command to install expo app
• It will ask you about app name and other options
• For professional projects fill-in the asked information
• You can use command prompt or VS Code terminal
DEVELOPMENT ENVIRONMENT
• To start the development server, run the following command:
• npx expo start
• Follow the instructions given in
FOLDER STRUCTURE
• You can see many files and folders in the app
INSTALLING DEPENDENCES
• The below command will install versions of these libraries that are
compatible with the Expo SDK version your project is using.
• npx expo install expo-router react-native-safe-area-context react-native-
screens expo-linking expo-constants expo-status-bar
Core Components and Native
Components
REACT COMPONENT
• Components are building blocks of React native app
• These are reusable blocks of code for UI
• Several UI components together make a full app
• These components can be:
• Header
• Footer
• Navbar
• Images
• etc
• Types of react native components
VIEWS AND MOBILE
DEVELOPMENT
• a view is the basic building block of UI in android and Ios
• a small rectangular element on the screen used to display text, images,
or respond to user input
• a line of text or a button, are kinds of views
• Some kinds of views can contain other views
NOTE
• Now open the project that you have create in react native and check if
contains view
• If it does what kind of view is it?
CORE COMPONENTS
• Ready to use components
• built-in components provided by the React Native framework
• They don’t not require any additional packages
• maintained by the React Native team and are part of the core library
• Commonly uses core component in RN are shown in next slides…
COMMUNITY COMPONENTS
• React native community is growing stronger day by day after it being
open sourced
• Made by community for the comunity
• third-party libraries or components developed and maintained by the
React Native community.
• not a part of the core library but are often used to extend functionality or
provide more specialized features.
• E.g. react-native-screens , react-native navigation , react native maps
NATIVE COMPONENTS
• custom components that are written in native code (Java/Kotlin for
Android, Objective-C/Swift for iOS) and integrated into a React Native
project.
• They are typically used when a specific feature or performance
optimization cannot be achieved with JavaScript.
• React Native also lets you build your own Native Components for Android
and iOS to suit your app’s unique needs.
• They are usually build by developer expert in native app developement
• Check out Native Directory to find what the community has been
creating.
• https://reactnative.directory/
• Back towards coding
TEXT COMPONENT
• Juts like <p> tag of html
• It is used to display text on screen
• You can use the style prop to give styles to text
STYLESHEET
• React native gives you stylesheet opportunity to add styles in a single JS
object
• All of the core components accept a prop named style.
• As a component grows in complexity, it is often cleaner to
use StyleSheet.create to define several styles in one place
TWO WAYS TO ADD STYLES
VIEW COMPONENT
• A box or container that holds other components
• Similar to div but with some added functionality specific to mobile apps
• It has many props to control its behavior and appearance
• It used flex-box property to set the layout of its children
• That means we can add properties like align-item, justify content etc
CLASS TASK
• Create a header components and use it in app.j
• Pass props to header and display different product names

Lecture 4 A

Uploaded by

Copyright:

Available Formats

Lecture 4 A

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 4 A

Uploaded by

Copyright:

Available Formats

MOBILE APPLICATION

npx is a tool that comes with Node.js and is used to run

You might also like