Scribd
Upload
10 views8 pages

React Native

Uploaded by

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

React Native

Uploaded by

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

Explain react native Geolocation App

A React Native Geolocation App allows you to access and display the geographic location of a user's
device. React Native provides built-in support for geolocation through the react-native-geolocation-
service module or the Geolocation API, which is part of the Web APIs.

Steps to Create a Geolocation App in React Native


1. Setup React Native Project
Initialize a new React Native project using:
npx react-native init GeoLocationApp
cd GeoLocationApp
2. Install Required Libraries
Install the necessary libraries for geolocation and maps.
npm install react-native-geolocation-service react-native-maps
For iOS, add the following permissions to Info.plist:

<key>NSLocationWhenInUseUsageDescription</key>
<string>App requires your location to function.</string>
For Android, add these permissions to AndroidManifest.xml:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />


<uses-permission
android:name="android.permission.ACCESS_COARSE_LOCATION" />

Example Code:

javascript
Copy code
import React, { useState, useEffect } from 'react';
import {
SafeAreaView,
Text,
View,
Button,
PermissionsAndroid,
Platform,
} from 'react-native';
import Geolocation from 'react-native-geolocation-service';
import MapView, { Marker } from 'react-native-maps';

const GeoLocationApp = () => {


const [location, setLocation] = useState(null);

const requestPermission = async () => {


if (Platform.OS === 'android') {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
);
return granted === PermissionsAndroid.RESULTS.GRANTED;
}
return true;
};

const getLocation = () => {


Geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
setLocation({ latitude, longitude });
},
(error) => {
console.error(error);
},
{ enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
);
};

useEffect(() => {
(async () => {
const permissionGranted = await requestPermission();
if (permissionGranted) getLocation();
})();
}, []);

return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
{location ? (
<MapView
style={{ flex: 1 }}
initialRegion={{
...location,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
}}
>
<Marker coordinate={location} title="You are here" />
</MapView>
):(
<Text>Fetching location...</Text>
)}
</View>
<Button title="Refresh Location" onPress={getLocation} />
</SafeAreaView>
);
};

export default GeoLocationApp;


Explanation of the Code
Permissions:

PermissionsAndroid requests runtime permissions for Android devices.


iOS permissions are defined in Info.plist.
Fetching Location:

Geolocation.getCurrentPosition() fetches the current location.


Options like enableHighAccuracy ensure precise location data.
Map Rendering:

react-native-maps renders the map.


The Marker component indicates the user’s current position.
State Management:

useState stores the current latitude and longitude.


useEffect ensures the location is fetched when the app loads.
Write Alert Dialog Program in React native

import React from 'react';


import { View, Button, Alert, StyleSheet } from 'react-native';

const App = () => {


// Function to show the alert dialog
const showAlert = () => {
Alert.alert(
"Alert Title", // Title of the Alert
"This is a simple alert dialog.", // Message
[
{ text: "Cancel", onPress: () => console.log("Cancel Pressed") },
{ text: "OK", onPress: () => console.log("OK Pressed") }
]
);
};

return (
<View style={styles.container}>
<Button title="Show Alert" onPress={showAlert} />
</View>
);
};

const styles = StyleSheet.create({


container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#f5f5f5",
},
});

export default App;

 Alert Component:

 Alert.alert(title, message, buttons) creates a modal alert dialog with customizable


options.
 title is the title of the dialog.
 message is the content.
 buttons is an array of button objects, each having:
o text: Label for the button.
o onPress: Callback for button press.

 Button Component:

 Used to trigger the alert dialog when pressed.

 Styling:

 Center the button using Flexbox inside a styled container.


What is React Native? State the advantages of it.

React Native is an open-source framework developed by Facebook that allows developers to build
cross-platform mobile applications using JavaScript and React. With React Native, you can write code
once and deploy it on both iOS and Android platforms, ensuring a native-like user experience. It
combines the best parts of native development with React, a popular JavaScript library for building
user interfaces, enabling developers to use a single codebase to build apps for multiple platforms.

Advantages of React Native


1. Cross-Platform Compatibility
 Write one codebase that works for both iOS and Android, reducing development time and
effort.
 Ensures consistent user experiences across platforms.
2. Native-Like Performance
 Provides components that map to native UI elements, ensuring high performance and smooth
user interactions.
 Allows for writing some platform-specific code when needed to achieve native functionality.
3. Code Reusability
 Reuse up to 90% of the codebase across platforms, significantly cutting down development
costs and time.
 Allows integration with existing code, so developers don’t need to rebuild everything from
scratch.
4. Hot Reloading
 Enables developers to instantly see the changes they make in the code during development.
 Improves productivity by eliminating the need to rebuild the app for minor changes.
5. Large Community and Ecosystem
 Strong community support ensures access to a wide range of third-party libraries, tools, and
shared knowledge.
 Backed by Facebook and used in apps like Instagram, Uber Eats, and Airbnb.
6. Cost-Effective Development
 Reduces the need to hire separate teams for iOS and Android development.
 Open-source nature lowers overall software costs.
7. Easy Integration with Native Code
 Allows developers to include native code for features that require direct access to device
hardware.
 Provides flexibility to mix React Native components with native components.
8. Improved Developer Experience
 Uses React, a well-known library, making it easier for JavaScript developers to learn and use.
 Provides a flexible development environment that supports modern web and mobile app design
patterns.

You might also like