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/getting-started
 SNACK PLAYER
• It’s a handy tool created by Expo
• to embed and run React Native projects and share how they render in
platforms like Android and iOS.
• The code is live and editable, so you can play directly with it in your
browser.
• Go ahead and try changing the "Try editing me!" text above to "Hello,
world!“
• https://snack.expo.dev/
 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 docs:
• Options to run app:
• 1. android studio device
• 2. expo go app
 MANAGING MULTIPLE NODE
VERSIONS
• To manage different versions of node js in one OS
• Use NVM : node version manager
• Install a specific version of node js using cmd
• Switch to a particular version of node js in terminal
• Use that
 RUNNING APP ON ANDOIRD
STUDIO DEVICS
• Choose –a to run app on a connected android device
• First expo go app will be installed in that device
• Then it will be excuted
 FOLDER STRUCTURE
• You can see many files and folders in the app
• Index . File : This is the entry point for a React Native app using Expo
• App.js : out actual app code that will run first
• Package.json : all details regarding packges used in the app ,
script etc
• Node-modules: all packages installed here : very heavy
• Assets: mostly contain images and public data
Core Components and Native
Components
 REACT COMPONENT
• Components are building blocks of React
• 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 used 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 community
• 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.js