Scribd
Upload
10 views

React Native

Uploaded by

tejaswinibambole
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views

React Native

Uploaded by

tejaswinibambole
Copyright
© © All Rights Reserved
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