Geo-location and map

Introduction

The world has become a smaller place with modern technology, and it has made location-based services a necessity rather than a luxury. React Native app development provides several options for incorporating map and geo-location features to enhance the user experience. These features allow users to perceive and easily understand location-based data in an intuitive way. In this blog post, we will explore the use of MapView APIs available in React Native for building robust map applications and the integration of Geo-location APIs to track users' locations in real-time.

Installation

1. Expo
2. react-native-maps

3. npx expo install react-native-maps
   

4. MapView
5. MapView.Marker is to determine the marker on the map
6. LatitudeDelta is the value to determine viewport
7. "latitudeDelta" and "longitudeDelta" are two key parameters in map view settings, which are usually used when creating map applications, such as Google Maps or Apple Maps. These parameters help define the "viewport" of the map - the range of the map area that the user actually sees on the screen. Here's how it works:

• The meaning of the viewport:

  • The viewport is the physical area that users can see in the map application. It is determined by the edge of the map, depending on the user's device screen size, resolution and the zoom level of the map itself.

• latitudeDelta:

  • "latitudeDelta" indicates the range of the mid-latitude of the viewport. In other words, it shows the latitude difference between the top and bottom of the viewport and is measured in latitude units. This helps to determine the vertical coverage of the viewport.

• longitudeDelta:

  • Similarly, "longitudeDelta" indicates the range of longitude in the viewport, showing the difference in longitude between the left and right sides of the viewport. This helps to determine the horizontal coverage of the viewport.

• export const MapScreen = () => {
    const { location } = useContext(LocationContext)
    const { Events = [] } = useContext(EventsContext)
  
    const [latDelta, setLatDelta] = useState(0)
  
    const { lat, lng, viewport } = location
  
    useEffect(() => {
      const northeastLat = viewport.northeast.lat
      const southwestLat = viewport.southwest.lat
  
      setLatDelta(northeastLat - southwestLat)
    }, [location, viewport])
  
    return (
      <>
        <Search />
        <Map
          region={{
            latitude: lat,
            longitude: lng,
            latitudeDelta: latDelta,
            longitudeDelta: 0.02,
          }}
        >
          {Events.map((Event) => {
            return null
          })}
        </Map>
      </>
    )
  }
  

8. Using location and viewport to calculate View Marker

• return (
    <MapView.Marker
      key={event.name}
      title={event.name}
      coordinate={{
        latitude: event.geometry.location.lat,
        longitude: event.geometry.location.lng,
      }}
    />
  )
  

9. Fix module export and import bug:

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

• <Map
    region={{
      latitude: lat,
      longitude: lng,
      latitudeDelta: latDelta,
      longitudeDelta: 0.02,
    }}
  >
    {events.map((event) => {
      return (
        // destructure Marker from "react-native-maps"
        <Marker
          key={event.name}
          title={event.name}
          coordinate={{
            latitude: event.geometry.location.lat,
            longitude: event.geometry.location.lng,
          }}
        />
      )
    })}
  </Map>
  

10. CallOut

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

11. use WebView to fix Android image bug

• npx expo install react-native-webview
  

12. Making the CallOut clickable

• has a onPress property which can be used like onPress={()=>{return null}}
• update: onPress={() => navigation.navigate("EventDetail", {event: event})}

1. Favourites feature

• Favourites Context

• In essence, with our service folder, it has everything to do with our interaction of data. Data is what flow into the application and flows back out of the application - And Services are that layer that communicate with the data.

• Context is there to provide the glue between what is React and what is the actual data Transmission

• Start by creating Favourites Context

  1. create context
  2. manipulate state (in methods)
  3. pass values to provider's children

• Hook up Favourites Context

• Select heart icon

  • import { AntDesign } from "@expo/vector-icons"
  • import { TouchableOpacity } from "react-native"

• Favourites Bar

  1. Component <SearchBar></SearchBar> has a property of onIconPress which is used to toggle heart symbol in search bar

• Favourites Bar Content

  • Toggle bar function (State set in the high-level component,which pass methods to the low-level component to use to change UI ,while in the high-level component to use to conditionally change whether showing bar)

  • Editing Favourites Bar component which get 2 props:

    1. favourites - This is the Context favourites Array
    2. onNavigate - This is the method that EventdScreen get navigation.navigate from outside Navigator

• Storing Favourites

  • How do I store data locally
  • In React Native, a concept called AsyncStorage
  • use alternative
  • React Native async storage
  • expo async storage

    • npx expo install @react-native-async-storage/async-storage
      

  • use async storage inside Services/favouritesContext.js

• Fix bugs in Android platform