WebView and Maps

🌐 WebView & Maps: Your App’s Magic Windows

Imagine your app is a house. Sometimes you want to peek outside through a window (WebView), and sometimes you need a treasure map to find places (Maps). Let’s learn how to add these magic windows to your React Native app!

🪟 The Window Analogy

Think of your phone screen as a room. Most of the time, you build furniture (buttons, text, images) inside the room. But what if you want to:

• Look outside? → Use a WebView (a window to the internet!)
• Find your way? → Use a Map (a magic treasure map!)

Both are special components that show content from “outside” your app.

📺 WebView Component

What is a WebView?

A WebView is like putting a tiny web browser inside your app. It’s a window that shows websites!

Simple Example:

• You know how you open Chrome or Safari to see websites?
• WebView does the same thing, but INSIDE your app!
• Users never leave your app, but they can still see web pages.

Setting Up WebView

First, install the package:

npm install react-native-webview

Then use it like this:

import { WebView } from 'react-native-webview';

function MyWebPage() {
  return (
    <WebView
      source={{ uri: 'https://google.com' }}
      style={{ flex: 1 }}
    />
  );
}

What’s happening?

• source={{ uri: '...' }} → The website address (like typing in a browser)
• style={{ flex: 1 }} → Fill the whole screen

Loading Local HTML

You can also show your own HTML, not just websites!

<WebView
  source={{
    html: '<h1>Hello from inside!</h1>'
  }}
/>

📨 WebView Communication

The Problem

Your app and the web page are like two people in different rooms. How do they talk?

graph TD
    A["Your React Native App"] -->|Sends Message| B["WebView"]
    B -->|Sends Reply| A

Sending Messages TO WebView

Use injectedJavaScript to run code inside the web page:

<WebView
  source={{ uri: 'https://example.com' }}
  injectedJavaScript={`
    document.body.style.backgroundColor = 'yellow';
    true;
  `}
/>

This changes the web page’s background to yellow!

Receiving Messages FROM WebView

The web page can send messages back using window.ReactNativeWebView.postMessage():

<WebView
  source={{
    html: `
      <button onclick="sendToApp()">
        Click Me!
      </button>
      <script>
        function sendToApp() {
          window.ReactNativeWebView
            .postMessage('Hello from web!');
        }
      </script>
    `
  }}
  onMessage={(event) => {
    console.log(event.nativeEvent.data);
    // Prints: "Hello from web!"
  }}
/>

Two-Way Communication

const webViewRef = useRef(null);

// Send to WebView anytime
const sendMessage = () => {
  webViewRef.current.injectJavaScript(`
    alert('Message from app!');
    true;
  `);
};

return (
  <WebView
    ref={webViewRef}
    onMessage={(e) => console.log(e.nativeEvent.data)}
    source={{ uri: 'https://example.com' }}
  />
);

🗺️ Map Component

What is a Map Component?

It’s like Google Maps inside your app! Users can see roads, buildings, and locations.

Setting Up Maps

Install the package:

npm install react-native-maps

For iOS, add to Podfile:

pod 'react-native-google-maps', :path => '../node_modules/react-native-maps'

Basic Map Usage

import MapView from 'react-native-maps';

function MyMap() {
  return (
    <MapView
      style={{ flex: 1 }}
      initialRegion={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    />
  );
}

What do these numbers mean?

• latitude & longitude → The exact spot on Earth (like GPS coordinates)
• latitudeDelta & longitudeDelta → How zoomed in the map is (smaller = more zoomed)

📍 Map Markers

What are Markers?

Markers are the little pins you see on maps! They point to specific places.

graph TD
    A["Map"] --> B["Marker 1: Pizza Shop"]
    A --> C["Marker 2: School"]
    A --> D["Marker 3: Home"]

Adding a Simple Marker

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

<MapView style={{ flex: 1 }}>
  <Marker
    coordinate={{
      latitude: 37.78825,
      longitude: -122.4324,
    }}
    title="Pizza Shop"
    description="Best pizza in town!"
  />
</MapView>

Multiple Markers

const places = [
  { id: 1, lat: 37.78, lng: -122.43, name: 'Home' },
  { id: 2, lat: 37.79, lng: -122.42, name: 'School' },
  { id: 3, lat: 37.77, lng: -122.41, name: 'Park' },
];

<MapView style={{ flex: 1 }}>
  {places.map(place => (
    <Marker
      key={place.id}
      coordinate={{
        latitude: place.lat,
        longitude: place.lng
      }}
      title={place.name}
    />
  ))}
</MapView>

Custom Marker Icons

<Marker coordinate={coords}>
  <View style={styles.customMarker}>
    <Text>🍕</Text>
  </View>
</Marker>

🎨 Map Overlays

What are Overlays?

Overlays are shapes you draw ON TOP of the map. Like drawing on a transparent sheet over a real map!

Types of Overlays:

• 🔵 Circle → Draw a circle around a point
• 📐 Polygon → Draw any shape (triangle, square, custom)
• 📏 Polyline → Draw a line connecting points

Drawing a Circle

import { Circle } from 'react-native-maps';

<MapView style={{ flex: 1 }}>
  <Circle
    center={{ latitude: 37.78, longitude: -122.43 }}
    radius={1000}
    fillColor="rgba(0, 150, 255, 0.3)"
    strokeColor="blue"
  />
</MapView>

This draws a blue circle with 1000 meter radius!

Drawing a Polygon

import { Polygon } from 'react-native-maps';

<MapView style={{ flex: 1 }}>
  <Polygon
    coordinates={[
      { latitude: 37.8, longitude: -122.4 },
      { latitude: 37.7, longitude: -122.5 },
      { latitude: 37.7, longitude: -122.3 },
    ]}
    fillColor="rgba(255, 0, 0, 0.3)"
    strokeColor="red"
  />
</MapView>

Drawing a Polyline (Path)

import { Polyline } from 'react-native-maps';

<MapView style={{ flex: 1 }}>
  <Polyline
    coordinates={[
      { latitude: 37.8, longitude: -122.4 },
      { latitude: 37.75, longitude: -122.42 },
      { latitude: 37.7, longitude: -122.43 },
    ]}
    strokeColor="green"
    strokeWidth={4}
  />
</MapView>

🎮 Map Region Control

What is a Region?

The “region” is what part of the map you’re looking at. Think of it as where the camera is pointing!

Controlled vs Uncontrolled

Uncontrolled (user can move freely):

<MapView
  initialRegion={myRegion}
/>

Controlled (you control the view):

<MapView
  region={currentRegion}
  onRegionChangeComplete={setCurrentRegion}
/>

Animating to a Location

const mapRef = useRef(null);

const goToPlace = () => {
  mapRef.current.animateToRegion({
    latitude: 40.7128,
    longitude: -74.0060,
    latitudeDelta: 0.05,
    longitudeDelta: 0.05,
  }, 1000); // 1000ms animation
};

<MapView ref={mapRef} style={{ flex: 1 }} />
<Button title="Go to New York" onPress={goToPlace} />

Fitting to Markers

Show all markers on screen at once:

const fitAllMarkers = () => {
  mapRef.current.fitToCoordinates(
    markers.map(m => m.coordinate),
    {
      edgePadding: {
        top: 50, right: 50,
        bottom: 50, left: 50
      },
      animated: true,
    }
  );
};

📍 User Location Map

Showing the Blue Dot

The blue dot shows where the user is right now!

<MapView
  style={{ flex: 1 }}
  showsUserLocation={true}
  showsMyLocationButton={true}
/>

What these do:

• showsUserLocation → Shows the blue dot
• showsMyLocationButton → Adds a button to center on user

Getting the User’s Location

import * as Location from 'expo-location';

const [userLocation, setUserLocation] = useState(null);

useEffect(() => {
  (async () => {
    // Ask permission
    const { status } = await Location.requestForegroundPermissionsAsync();

    if (status === 'granted') {
      const location = await Location.getCurrentPositionAsync({});
      setUserLocation({
        latitude: location.coords.latitude,
        longitude: location.coords.longitude,
      });
    }
  })();
}, []);

Following User Location

Make the map follow the user as they move:

<MapView
  style={{ flex: 1 }}
  showsUserLocation={true}
  followsUserLocation={true}
  userLocationUpdateInterval={5000}
/>

Watching Location Changes

useEffect(() => {
  const subscription = Location.watchPositionAsync(
    {
      accuracy: Location.Accuracy.High,
      distanceInterval: 10, // Update every 10 meters
    },
    (location) => {
      console.log('User moved!', location.coords);
    }
  );

  return () => subscription.remove();
}, []);

🎯 Summary: Your New Powers!

🚀 You Did It!

You now know how to:

• ✅ Put a web browser inside your app
• ✅ Make your app talk to web pages
• ✅ Show beautiful maps
• ✅ Add pins and markers
• ✅ Draw shapes on maps
• ✅ Control what part of the map users see
• ✅ Show where users are located

Remember: WebView is your window to the web, and Maps is your window to the world! 🌍✨