How to show full world map in view react native?

Viewed 687
1 Answers

In map view we can achieve this goal by mapView prop initial region

initialRegion=
    {{
        latitude: 0, // This the position data
        longitude: 0, // This is also position data
        latitudeDelta: 200,
        longitudeDelta: 1,
    }}

Now to change the Zoom view of the map you should have any location latitude and longitude data, then to zoom in or zoom out view you can alter the values of latitudeDelta and longitudeDelta with that you have to match the height & width of the screen too.

Here have managed the view for world map and added the expo working link & code below, so you can check that it might help you.

import * as React from 'react';
import MapView from 'react-native-maps';
import { StyleSheet, Text, View, Dimensions } from 'react-native'
export default function App() {
return (
 <View style={styles.container}>
  <MapView initialRegion={{
        latitude: 0,
        longitude: 0,
        latitudeDelta: 200,
        longitudeDelta: 1,
  }}
    style={styles.map} />
  </View>
  );
 }

const styles = StyleSheet.create({
container: {
  flex: 1,
  backgroundColor: ‘white’,
  alignItems: 'center',
  justifyContent: 'center',
},
map: {
  width: Dimensions.get('window').width,
  height: 500,
  },
 });

https://snack.expo.dev/P-E7jWAx4

Related