Question 34801 in React native Question posted in
The official React Native documentation can be found here.

How do I set initialRegion to origin.location latitude and longitude – React native

screenshot from the error

import { StyleSheet, Text, View } from "react-native";
import React from "react";
import MapView, { Marker } from "react-native-maps";
import tw from "tailwind-react-native-classnames";
import { useSelector } from "react-redux";
import { selectOrigin } from "../slices/navSlice";

const Map = () => {
  const origin = useSelector(selectOrigin);

  return (
    <MapView
      style={tw`flex-1`}
      mapType="mutedStandard"
      initialRegion={{
        latitude: origin.location.lat,
        longitude: origin.location.lng,
        latitudeDelta: 0.005,
        longitudeDelta: 0.005,
      }}
    >
      {origin?.location && (
        <Marker
          coordinate={{
            latitude: origin.location.lat,
            longitude: origin.location.lng,
          }}
          title="Origin"
          description={origin.description}
          identifier="origin"
        />
      )}
    </MapView>
  );
};

export default Map;

const styles = StyleSheet.create({});

I have been getting this error where it tells me that origin.location is undefined and I have checked the documentation for react-native-maps and couldn’t find the correct way to write it.

Tags:

2

Answers


  1. 0

    It’s because origin seems to be undefined the moment the map renders and gives you this error. You can try conditionally rendering the map, i.e.

      const origin = useSelector(selectOrigin);

  return origin?.location ? (
    <MapView
      style={tw`flex-1`}
      mapType="mutedStandard"
      initialRegion={{
        latitude: origin.location.lat,
        longitude: origin.location.lng,
        latitudeDelta: 0.005,
        longitudeDelta: 0.005,
      }}
    >
      {origin?.location && (
        <Marker
          coordinate={{
            latitude: origin.location.lat,
            longitude: origin.location.lng,
          }}
          title="Origin"
          description={origin.description}
          identifier="origin"
        />
      )}
    </MapView>
  ) : (<renderSomethingElse like a loader, etc.>);
    Login or Signup to reply.
  2. 0

    i would guard it like this

    import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
import MapView, {Marker} from 'react-native-maps';
import tw from 'tailwind-react-native-classnames';
import {useSelector} from 'react-redux';
import {selectOrigin} from '../slices/navSlice';

const Map = () => {
  const origin = useSelector(selectOrigin);

  if (origin?.location) {
    return (
      <MapView
        style={tw`flex-1`}
        mapType="mutedStandard"
        initialRegion={{
          latitude: origin.location.lat,
          longitude: origin.location.lng,
          latitudeDelta: 0.005,
          longitudeDelta: 0.005,
        }}>
        {origin?.location && (
          <Marker
            coordinate={{
              latitude: origin.location.lat,
              longitude: origin.location.lng,
            }}
            title="Origin"
            description={origin.description}
            identifier="origin"
          />
        )}
      </MapView>
    );
  } else {
    return <Text>Loading map</Text>;
  }
};

export default Map;

const styles = StyleSheet.create({});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search