UNIT 3

MAP VIEW AND GEOLOCATION:

3 Marks Answer (Key Points Only)
1. MapView: Used to display maps in React Native using react-
native-maps.
2. GeoLocation: Retrieves the user's current location using
[Link].
3. Annotations (Markers): Used to highlight specific points on
the map.
4. showsUserLocation: Enables showing the user's location on
the map.
5. watchPosition: Tracks user movement in real-time

6 Marks Answer (Brief Explanation + Code Snippet)

• MapView Setup: Install and use react-native-maps to
display maps.
• Adding Markers: Use <Marker> to highlight specific
coordinates.
• Showing User Location: Enable
showsUserLocation={true}.
• Fetching Live Location: Use
[Link]().

Code Snippet (Basic MapView with User Location):

<MapView
style={{ flex: 1 }}
 provider="google"
showsUserLocation={true}
initialRegion={{
latitude: 37.3230,
longitude: -122.0322,
latitudeDelta: 0.0922,
longitudeDelta: 0.0922,
}}
>
<Marker coordinate={{ latitude: 37.3230, longitude: -122.0322
}} />
</MapView>

10 Marks Answer (Detailed Explanation + Key Code

Sections)
1. Install Dependencies and Setup Project:

expo init GeoLocationMaps

yarn add react-native-maps

2. Displaying MapView with a Marker:

import React from 'react';
import { StyleSheet, View } from 'react-native';
import MapView, { Marker } from 'react-native-maps';

export default class App extends [Link] {

constructor(props) {
 super(props);
[Link] = {
region: {
latitude: 37.3230,
longitude: -122.0322,
latitudeDelta: 0.0922,
longitudeDelta: 0.0922,
},
coordinate: {
latitude: 37.3230,
longitude: -122.0322,
}
};
}

render() {
return (
<MapView
style={[Link]}
provider="google"
showsUserLocation={true}
initialRegion={[Link]}
>
<Marker coordinate={[Link]} />
</MapView>
 );
}
}

const styles = [Link]({

container: { flex: 1 },
});

Output:
Key Features in This Code
Google Maps Integration using react-native-maps.
Shows User Location with showsUserLocation={true}.
Tracks Live Movement using
[Link]().
Asks for Location Permission (for Android).
Places a Marker at the user’s current location.

ASYNCSTORAGE:
3 Marks Answer: Key Points on AsyncStorage
1. AsyncStorage is a simple, key-value-based storage system in
React Native.
2. It allows persistent storage of data locally on the device.
3. It is asynchronous, meaning it does not block the main
thread.
4. Commonly used methods:
o setItem(key, value): Saves data.
o getItem(key): Retrieves saved data.
o removeItem(key): Deletes stored data.
5. Used for storing user preferences, authentication tokens, and
small app data.

6 Marks Answer: Detailed Explanation of AsyncStorage

1. Definition:
o AsyncStorage is a local storage system for React Native
apps that enables key-value storage.
 o It is part of React Native but has been moved to a
separate package (@react-native-async-storage/async-
storage).
2. How It Works:
o Stores data persistently even after the app is closed.
o Uses a promise-based API for storing and retrieving
data.
3. Steps to Implement AsyncStorage:
o Install AsyncStorage in an Expo project using:
npx expo install @react-native-async-storage/async-storage
Import it in your React Native app:
import AsyncStorage from '@react-native-async-storage/async-
storage';

Use the AsyncStorage methods:

// Storing data
await [Link]('key', 'value');
// Retrieving data
const value = await [Link]('key');
// Removing data
await [Link]('key');

4. Limitations of AsyncStorage:
o Not suitable for large databases (use SQLite for that).
o Can be slow for complex queries.
10 Marks Answer: AsyncStorage Implementation
Coding:
import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-
native';
import AsyncStorage from '@react-native-async-storage/async-
storage';

const App = () => {

const [storedText, setStoredText] = useState('');
const [inputBoxText, setInputBoxText] = useState('');

// Function to save data in AsyncStorage

const onPressSave = async () => {
try {
await [Link]('@storage_key', inputBoxText);
setStoredText(inputBoxText); // Update UI after saving
} catch (error) {
[Link]('Error saving data', error);
}
};

// Function to retrieve data from AsyncStorage

const retrieveData = async () => {
try {
 const value = await [Link]('@storage_key');
if (value !== null) {
setStoredText(value);
}
} catch (error) {
[Link]('Error fetching data', error);
}
};

// Load stored data when app starts

useEffect(() => {
retrieveData();
}, []);

return (
<View style={[Link]}>
<Text style={[Link]}>AsyncStorage Example</Text>
<TextInput
style={[Link]}
placeholder="Type something here..."
onChangeText={setInputBoxText}
value={inputBoxText}
/>
 <Button title="Save Data" onPress={onPressSave}
color="blue" />
<Text style={[Link]}>Stored Text:</Text>
<Text style={[Link]}>{storedText}</Text>
</View>
);
};

const styles = [Link]({

container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
padding: 20,
},
header: {
fontSize: 22,
fontWeight: 'bold',
marginBottom: 20,
},
textField: {
height: 40,
width: '80%',
borderColor: '#000',
 borderWidth: 1,
marginBottom: 10,
paddingLeft: 10,
},
text: {
fontSize: 18,
marginTop: 20,
},
storedText: {
fontSize: 20,
fontWeight: 'bold',
color: 'blue',
},
});
export default App;
Key Takeaways for AsyncStorage (Exam Revision)
1. What is AsyncStorage?
o A simple, persistent storage system in React Native.
2. Why use AsyncStorage?
o Saves small data like user settings, tokens, or
preferences.
3. How to use it?
o setItem(key, value) → Saves data.
o getItem(key) → Retrieves data.
o removeItem(key) → Deletes data.
 4. Limitations:
o Not suitable for large datasets (use SQLite for that).
Output:

NATIVE ALERT:
3 Marks Answer: Key Points on Native Alert
1. What is a Native Alert?
o A built-in alert dialog box in React Native for both iOS
and Android.
o Provides important information to users or asks for
confirmation.
2. How to Use It?
o Import Alert from React Native:
import { Alert } from 'react-native';
o Create a simple alert:
[Link]('Title', 'Message');
o Buttons can be added to make decisions.
3. Main Features:
o Displays title, message, and buttons.
o Supports multiple buttons for user choices.
o Available using [Link]() or [Link]
6 Marks Answer: Detailed Explanation of Native Alert
1. What is a Native Alert?
• A simple pop-up dialog box that provides feedback to the
user.
• Available in React Native's core components and supports
multiple buttons.
2. How to Use Alert in React Native?
• Basic Alert:
[Link]('Alert Title', 'This is a simple alert!');
• Alert with Buttons:
[Link](
'Alert Title',
'This is an alert with buttons!',
{ text: 'OK', onPress: () => [Link]('OK Pressed') },
{ text: 'Cancel', onPress: () => [Link]('Cancel Pressed'),
style: 'cancel' },
]
);
10 Marks Answer: Full Working Code for Native Alert
This code creates a React Native app with two buttons:
• Button 1: Shows a simple alert.
• Button 2: Shows an alert with multiple buttons.
Full Code: [Link]
import React from 'react';
import { View, Button, Alert, StyleSheet } from 'react-native';
const App = () => {
// Function to show a basic alert
const showAlert1 = () => {
[Link]('Simple Alert', 'This is a basic alert message.');
};
// Function to show an alert with multiple buttons
const showAlert2 = () => {
[Link](
'Multiple Buttons Alert',
'Choose an option:',
[
{ text: 'Button 1', onPress: () => [Link]('Button 1
Pressed') },
{ text: 'Button 2', onPress: () => [Link]('Button 2
Pressed') },
{ text: 'Cancel', onPress: () => [Link]('Cancel
Pressed'), style: 'cancel' },
]
);
 };
return (
<View style={[Link]}>
<Button title="Show Alert 1" onPress={showAlert1}
color="#841584" />
<Button title="Show Alert 2" onPress={showAlert2}
color="#841584" />
</View>
);
};

const styles = [Link]({

container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f8f8f8',
},
});
export default App;
Expected Output
1. Tap "Show Alert 1" → A simple alert appears.
2. Tap "Show Alert 2" → An alert appears with three buttons
(Button 1, Button 2, and Cancel).
3. Tap any button → It prints a log in the console.
 Key Takeaways for Native Alert
1. What is a Native Alert?
o A dialog box in React Native that provides feedback to
users.
2. Why use Native Alert?
o Helps show important messages or ask for user
decisions.
3. How to use it?
o [Link]('Title', 'Message') → Basic alert.
o [Link]('Title', 'Message', [buttons]) → Alert with
multiple buttons.
4. Use Cases:
o Confirmations, warnings, user choices, etc
Output:
WEBVIEW:
3 Marks Answer: Key Points on WebView
1. What is WebView?
o WebView is a component in React Native used to display
web content inside an app.
o It works as a mini-browser but lacks full browser
features.
2. How to Install WebView?
yarn add react-native-webview
3. How to Use WebView?
o Import WebView and display a webpage inside the app:
import { WebView } from 'react-native-webview';
<WebView source={{ uri: "[Link] }} />

6 Marks Answer: Detailed Explanation of WebView

1. What is WebView?
• A React Native component that allows developers to embed
web content inside mobile applications.
• Can load web URLs or local HTML files within the app.
2. Why Use WebView?
• Enables apps to integrate web-based features without
switching to a browser.
• Useful for displaying blogs, help pages, or third-party
content.
3. How to Install and Use WebView in React Native?
Step 1: Install WebView
yarn add react-native-webview
Step 2: Import and Use WebView
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';
const App = () => {
return (
<View style={[Link]}>
<WebView source={{ uri: "[Link] }} />
</View>
);
};
const styles = [Link]({
container: {
flex: 1,
},
});
export default App;

10 Marks Answer: Full Working Code for WebView App

This code creates a React Native app that embeds Wikipedia
inside a WebView.
Full Code: [Link]
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';
const App = () => {
return (
<View style={[Link]}>
<WebView
source={{ uri: "[Link] }}
style={[Link]}
/>
</View>
);
};
const styles = [Link]({
container: {
flex: 1,
},
webview: {
marginTop: 20, // Adds space from the top
},
});
export default App;
Expected Output
• The app will display the Wikipedia homepage inside a
mobile view.
• Users can scroll, click links, and navigate like in a normal
browser.
 Key Takeaways for WebView
1. What is WebView?
o A React Native component to embed web pages inside
an app.
2. Why use WebView?
o To display external websites, blogs, or help pages
within an app.
3. How to install WebView?
o yarn add react-native-webview
4. How to use WebView?
o Import it and pass a URL as a source to display the
webpage.
5. Example of a basic WebView:
<WebView source={{ uri: "[Link] }} />
Output:
DEEPLINKING:
3 Marks Answer: Key Points on Deep Linking
1. What is Deep Linking?
o A technique to open a specific page inside an app
from an external link.
o Example: Clicking myapp://article/4 should open Article
4 inside the app.
2. Types of Deep Linking:
o URL Schemes: myapp://article/4
o Universal Links: Apple’s method to link a web page
with an app.
3. Basic Deep Link Code (Navigation Setup)
const AppNavigator = createStackNavigator({
Home: { screen: Home },
Article: { screen: Article, path: 'article/:id' },
});

6 Marks Answer: Explanation with Key Steps

1. What is Deep Linking?
• A way to navigate to a specific screen inside an app from
an external event.
• Used for push notifications, emails, and web links to
improve user experience.
2. How to Implement Deep Linking in React Native?
Step 1: Install Required Packages
yarn add react-navigation
react-native link react-native-gesture-handler
Step 2: Create [Link] and [Link] Components

[Link]
import React from 'react';
import { Text } from 'react-native';
class Home extends [Link] {
static navigationOptions = { title: 'Home' };
render() {
return <Text>Hello from Home!</Text>;
}
}
export default Home;
[Link]
import React from 'react';
import { Text } from 'react-native';
class Article extends [Link] {
static navigationOptions = { title: 'Article' };
render() {
const { id } = [Link];
return <Text>Hello from Article {id}!</Text>;
}
}
export default Article;
Step 3: Add Deep Linking Support in [Link]
import React from 'react';
import { Platform } from 'react-native';
import { createAppContainer, createStackNavigator } from "react-
navigation";
import Home from './src/Home';
import Article from './src/Article';
const AppNavigator = createStackNavigator({
Home: { screen: Home },
Article: { screen: Article, path: 'article/:id' },
});
const prefix = [Link] === 'android' ? 'myapp://myapp/' :
'myapp://';
const App = createAppContainer(AppNavigator);
const MainApp = () => <App uriPrefix={prefix} />;
export default MainApp;

10 Marks Answer: Full Working Code for Deep Linking

Full Code (with iOS & Android Support)

Step 1: Install Dependencies

npx react-native init DeepLinkApp
cd DeepLinkApp
yarn add react-navigation
react-native link react-native-gesture-handler
Step 2: Create src/[Link] (Home Screen)
import React from 'react';
import { Text } from 'react-native';
class Home extends [Link] {
static navigationOptions = { title: 'Home' };
render() {
return <Text>Hello from Home!</Text>;
}
}
export default Home;
Step 3: Create src/[Link] (Article Screen)
import React from 'react';
import { Text } from 'react-native';
class Article extends [Link] {
static navigationOptions = { title: 'Article' };
render() {
const { id } = [Link];
return <Text>Hello from Article {id}!</Text>;
}
}
export default Article;
Step 4: Configure Navigation in [Link]
import React from 'react';
import { Platform } from 'react-native';
import { createAppContainer, createStackNavigator } from "react-
navigation";
import Home from './src/Home';
import Article from './src/Article';
const AppNavigator = createStackNavigator({
Home: { screen: Home },
Article: { screen: Article, path: 'article/:id' },
});
const prefix = [Link] === 'android' ? 'myapp://myapp/' :
'myapp://';
const App = createAppContainer(AppNavigator);
const MainApp = () => <App uriPrefix={prefix} />;
export default MainApp;

Step 5: Configure iOS Deep Linking

(ios/[Link])
1. Open Xcode and navigate to the Info tab.
2. Scroll to URL Types and add:
o Identifier: mychat
o URL Scheme: mychat
3. Modify AppDelegate.m
Open AppDelegate.m and add the following code before
@end:
objective
- (BOOL)application:(UIApplication *)application openURL:(NSURL
*)url
sourceApplication:(NSString *)sourceApplication
annotation:(id)annotation
{
 return [RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
}
Step 6: Configure Android Deep Linking
([Link])
Open android/app/src/main/[Link] and add the
following code inside <activity>:
<intent-filter>
<action android:name="[Link]" />
<category android:name="[Link]" />
<category android:name="[Link]"
/>
<data android:scheme="myapp" android:host="myapp" />
</intent-filter>
Step 7: Run the App and Test Deep Linking
Run on iOS
npx react-native run-ios
• Open Safari and enter:
myapp://article/4
• It should open the app and navigate to Article 4.
Run on Android
npx react-native run-android
• Open Chrome and enter:
myapp://article/4
• The app should launch Article 4.
 Expected Output
• When opening myapp://article/4, the app should display:
Hello from Article 4!
Key Takeaways for Deep Linking (Exam Revision)
1. What is Deep Linking?
o A way to open specific app screens from external
links.
2. Types of Deep Linking:
o URL Scheme: myapp://article/4
o Universal Links: Apple’s advanced method for linking
web and app content.
3. How to Implement Deep Linking?
o Set up React Navigation with path.
o Configure iOS (AppDelegate.m) and Android
([Link]) for external link handling.
Output:
3 Marks:
Role of Compass in a Web Application:
A compass in a web application is typically used for navigation or
orientation. It can refer to a directional tool, either physical or
virtual, to guide users through the application. In web
development, it’s more metaphorical, guiding users or helping the
system determine directions (e.g., maps, GPS).

Need for a Schema:

A schema is needed in a web application to define the structure of
data, whether in a database or API responses. It ensures data
consistency, validation, and the proper organization of information.
Schemas make sure that the data adheres to a specific format or
structure, preventing errors and ensuring integrity.

What is Deep Linking?

Deep linking refers to the practice of linking directly to a specific
page or content within an app or website, bypassing the home
page or general entry points. It allows users to access specific
content or functionality directly, improving user experience.

In the code [Link]('ONE', 'TWO'), 'ONE' is the title of the alert

dialog, and 'TWO' is the message displayed in the alert. It’s a
simple alert pop-up that will show "ONE" as the header and "TWO"
as the body text.

Role of the Tool 'Postman':

Postman is a popular API testing tool that allows developers to
send HTTP requests, test APIs, and inspect responses. It helps in
debugging, development, and integration by providing a user-
friendly interface to interact with APIs.
6 Marks:

Code Explanation:
The given code defines an asynchronous function, onPressSave,
which is executed when a button or other component is pressed.
1. AsyncStorage: It uses [Link]() to store the
value of [Link] (the user's input) under the
key 'dno'. This is done asynchronously with the await
keyword to ensure that the value is saved before proceeding.
2. Error Handling: If an error occurs during the save
operation, the code catches it inside the catch block. It
updates the state with the entered input
([Link]) using [Link]({ storedText:
[Link] }), and logs an error message with
[Link]("Error").
3. State Update: The state is updated with the input value to
ensure that the app's UI reflects the most recent user input,
even if an error occurred.
Purpose:
The purpose of this code is to save the user input in persistent
storage (AsyncStorage) and handle any errors that might occur. It
ensures the input is stored properly and updates the UI with the
latest input, even in the event of a failure.
Code Explanation:
This code uses the interpolate() function of an [Link] to
map its value to an opacity effect.
1. [Link]({...}):
o interpolate() maps the animatedValue to a new output
range.
2. inputRange: [0, 0.5, 1]:
o This defines the range of the animatedValue (from 0 to
1).
3. outputRange: [0, 1, 0]:
o This defines how the opacity changes:
▪ When animatedValue is 0, opacity is 0 (fully
transparent).
▪ When animatedValue is 0.5, opacity is 1 (fully
visible).
▪ When animatedValue is 1, opacity goes back to 0
(fully transparent).
4. Purpose:
This code creates an animation where the opacity of a
component fades in and out. As animatedValue changes, the
component’s opacity smoothly transitions between
transparent and visible.