Introduction To Student
Introduction To Student
Introduction To Student
• Career in Android
• Exam Process
• Using Lab
• Assign Project
Module -1
React Native Fundamentals
Introduction to React Native
● Based on Java script library React
● Build Cross platform application using Java script
● Java script framework for building IOS and android mobile applications
● Created by Facebook, first released iOS version on March 2015 and Android version on
September 2015
● Writing the app by using JSX
React Native Features
Following are the features of React Native −
● React − This is a Framework for building web and mobile apps using JavaScript.
● Native − You can use native components controlled by JavaScript.
● Platforms − React Native supports IOS and Android platform.
React Native Advantages
Follow are the advantages of React Native −
● JavaScript − You can use the existing JavaScript knowledge to build native mobile apps.
● Code sharing − You can share most of your code on different platforms.
● Community − The community around React and React Native is large, and you will be able
to find any answer you need.
React Native Limitation
Following are the limitations of React Native −
● Native Components − If you want to create native functionality which is not created yet,
you will need to write some platform specific code.
Hybrid framework vs Native
Hybrid framework vs Native
Hybrid Framework vs Native
Hybrid apps are built using web technologies like HTML, CSS and JavaScript whereas Native
apps built with specific technology and language for specific platform like Java for Android, Swift
for iOS.
Hybrid app can be built for any platform from single code base.
Unlike hybrid apps, native apps are built especially for the platform they're to be used on
(iOS, Android etc).
React Native allows a proportion of the code to be shared between platforms and empowers
developers to create apps which feel less clunky and perform better than hybrid apps.
HTML 5
HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0,
and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide
Web.
HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web
Hypertext Application Technology Working Group (WHATWG).
The new standard incorporates features like video playback and drag-and-drop that have
been previously dependent on third-party browser plugins such as Adobe Flash, Microsoft
Silverlight, and Google Gears.
Example: HTML(5)
CSS3
CSS is used to control the style of a web document in a simple and easy way.
CSS is the acronym for "Cascading Style Sheet".
Example: CSS(SE)
Example: CSS3(SE)
Java Script
JavaScript is a lightweight, interpreted programming language.
What is JSON?
JSON stands for JavaScript Object Notation
JSON is a lightweight data interchange format
JSON is language independent *
JSON is "self-describing" and easy to understand
ES6 JavaScript
New Features
Let, var, const keyword
Destructure
Arrow Function
High Order Function
Class,
Inheritance
Destructuring
Destructuring is a feature introduced with ES6.
A feature that enables you to break down a structure, like an array or object, and store its
components in variables.
Example:(Link Array)
Example:(Link Object)
Arrow Function
Example:(Link)
Higher Order Function
Higher order functions can help you to step up your JavaScript game by making your code
more declarative. That is, short, simple, and readable.
A Higher Order Function is any function that returns a function when executed, takes a
function as one or more of its arguments, or both.
1. Map - Example
2. Filter - Example
3. Reduce - Example
4. Combining All - Example
Environment Setup
Tools Installation (Required)
There are a couple of things you need to install to set up the environment for React Native.
VS Code, Node Js
Environment Setup
install create-react-native-app globally
npm install -g create-react-native-app
Create Project
create-react-native-app MyReactNative
Make sure Python Node Js and JDK 8 installed with your
system
Install React Native CLI
npm install -g react-native-cli
Start react-native
npm start
Install Android Studio
Configure AVD Manager
Start Virtual Device then you can test your application with that device
Hot Reloading : - modify App.js save the file it automatically updated in android device
If not then select android virtual device then press ctrl + M then select enable hot reloading
option
React Native CLI Structure
1. Step 1: Install Expo CLI or React Native CLI
2. Step 2: Install Xcode (for Mac OS)
React has been designed from the start for gradual adoption, and you can use as little or
as much React as you need.
Whether you want to get a taste of React, add some interactivity to a simple HTML page,
or start a complex React-powered app.
What is JSX?
JSX allows us to write HTML elements in JavaScript and place them in the DOM without
any createElement() and/or appendChild() methods.
Note : You are not required to use JSX, but JSX makes it easier to write
React applications.
Why JSX?
JSX makes it easier to write or add HTML in React.
As JSX is an expression, we can use it inside of if statements and for loops, assign it to
variables, accept it as arguments, or return it from functions
Example:(Link)
Components
Components are like functions that return HTML elements
They serve the same purpose as Javascript functions, but work in isolation and returns HTML
It's the fruits that are used for the perfect smoothie.
And it's the internals of a function in programming that need to be arranged in a way to
get the desired output.
Function Components
A Function component also returns HTML, and behaves pretty much the
same way as a Class component, but Class components have some additions.
Example:(Link)
Class Components
The component's name must start with an uppercase letter.
Example:(Link)
Props
Props Basics
Example:(Link)
Note: React Props are read-only! You will get an error if you try to change their value.
Introducing States
States introduction
Anything that changes over time is known as state.
Types of Hooks:
1. Basics
2. Additional
Types of Hooks
Basics Hooks
1. useState
2. useEffect
3. useContext
Advanced Hooks
1. useReducer
2. useCallback
3. useMemo
4. useRef
Rules of Hooks
Only Call Hooks at the Top Level
Only Call Hooks from React Functions
Don’t call Hooks from regular JavaScript functions. Instead, you can:
Call Hooks from React function components.
Call Hooks from custom Hooks.
Mounting — an instance of a component is being created and inserted into the DOM.
Updating — when the React component is born in the browser and grows by receiving
new updates.
Touchables - Example
a. TouchableHighlight
b. TouchableNativeFeedback
c. TouchableOpacity
d. TouchableWithoutFeedback
e. Touchable with Long Press
Create Login Registration - Example
Using State
Set background
Color Dynamically
Using State
Find
Fibonacci Series of
given Number
Props
Props
Text Props
a. Practice
TextInput Props
a. Practice
Button Props
a. Practice
Image Props
a. Practice
Switch
a. Practice
Props
Modal
a. Practice
Picker
a. Practice
Slider
a. Practice
WebView - Example(Link)
Create Custom
Components
Example
1. Custom TextInput
2. Custom TextView
3. Custom SnackBar
4. Custom CheckBox
Module - 3
React Native Navigation
Navigating Between Screens
Mobile apps are rarely made up of a single screen.
Managing the presentation of, and transition between, multiple screens is typically handled
by what is known as a navigator.
If you are getting started with navigation, you will probably want to use React Navigation.
React Navigation provides a straightforward navigation solution, with the ability to present
common stack navigation and tabbed navigation patterns on both Android and iOS.
If you'd like to achieve a native look and feel on both Android and iOS, or you're integrating
React Native into an app that already manages navigation natively, the following library provides
native navigation on both platforms: react-native-navigation.
Example Navigation Scene
Stack Navigator Example
Drawer Navigator Example
Top Tab Navigator Example
Bottom Tab Navigator Example
Splash Screen Example
Module - 4
React Native OS
Working with Music
and Video
1. Music
1. Video
Text to Speech and
Speech to Text
Example
Working With
Camera
Example
Pickers
Examples:
1. Date
2. Time
3. Calendar
4. File
Module - 5
React Native Database
Async Storage
Example
SQLite(CRUD)
Example
Realm(CRUD)
Example
Fetch Data
Example
Using Axios
Example
Module - 6
React Native Advance Development
What is State..?
Redux can be broken down into few sections while building the application which are listed
below.
Redux Basics
1. Actions: “are payloads of information that send data from your application to your store.
They are the only source of information for the store.” this means if any state change
necessary the change required will be dispatched through the actions.
2. Reducers: “Actions describe the fact that something happened, but don’t specify how
the application’s state changes in response. This is the job of reducers.” when an action is
dispatched for state change its the reducers duty to make the necessary changes to the
state and return the new state of the application.
3. Store: with help of reducers a store can be created which holds the entire state of the
application it is recommended to use a single store for the entire application than having
multiple stores which will violate the use of redux which only has a single store.
4. Components: this is where the UI of the application is kept.
Redux Principles
Redux can be described in three fundamental principles:
Example React-Redux
Integrating Map
API
React Native Map
React Native Map Example is to integrate the Google Map into your React Native Application.
To integrate the Map in our example we will use a very good library called react-native-
maps.
Which provides MapView component which is very easy to use.
Example ReactNativeMap
Integrating Data
Using API
Install the Expo client app on your iOS or Android phone and connect to the same wireless
network as your computer.
On Android, use the Expo app to scan the QR code from your terminal to open your project.
On iOS, use the built-in QR code scanner of the Camera app.
Running your app on Android devices
1. Enable Debugging over USB
To enable USB debugging on your device, you will first need to enable the "Developer options"
menu by going to Settings → About phone → Software information and then tapping the Build
number row at the bottom seven times. You can then go back to Settings → Developer options
to enable "USB debugging".
2. Plug in your device via USB
Now check that your device is properly connecting to ADB, the Android Debug Bridge, by
running adb devices.
3. Run your app
$ npx react-native run-android
Performance
A compelling reason for using React Native instead of WebView-based tools is to achieve 60
frames per second and a native look and feel to your apps.
Where possible, we would like for React Native to do the right thing and help you to focus on
your app instead of performance optimization, but there are areas where we're not quite there
yet, and others where React Native (similar to writing native code directly) cannot possibly
determine the best way to optimize for you and so manual intervention will be necessary. We
try our best to deliver buttery-smooth UI performance by default, but sometimes that isn't
possible.
Deploying React Native Apps to App Store
and Play Market
Gather a required information for both Apps Store and Play Market
Here is the main information you need to deploy React Native app.
will need it for all the following steps whenever Apple asks you to sign in.
3. Create an application at “Identifiers” > “App IDs” section. Forms should be easy to
understand. One thing to note is the bundle id and make sure your bundle id in RN is the
*TIP: if for some reason, the below steps don’t seem to work, try to reset all the project
dependencies
1. deleting the package-lock.json file and node-modules folder;
2. then re-install node modules using `npm install`.
1. In android/app/build.gradle (Module: app) in defaultConfig object increment
2. After build version is changed you need to sync build.gradle file with project:
the device.
6. go to Release management > App releases > Alpha or Beta or Production section, press
`create release/edit release`.
7. Upload the app-release.apk from the correct folder (react-native generates one, android
studio generates one as well, but in a different locations, see step 6) choose Alpha, Beta or
Production sections. You can always ‘upgrade’ alpha into Beta, into Production.
8. give reason for release of new version description between the <en-GB> </en-GB> tags at
the bottom of page.
10. Fill out store presence, copyright and other tabs with grey circles until the sections reach
publishable (green circle) status.
Thank You