TypeError: null is not an object (evaluating 'order.originLatitude')

Question

I kept getting a typeerror, for my code I do not know what to fix This error is located at: in HomeScreen (at App.js:11) in RCTView (at View.js:32) in View (at SafeAreaView.js:41) in SafeAreaView (at App.js:10) in App (at renderApplication.js:50) in RCTView (at View.js:32) in View (at AppContainer.js:92) in RCTView (at View.js:32) in View (at AppContainer.js:119) in AppContainer (at renderApplication.js:43) in ClarkLoop2(RootComponent) (at renderApplication.js:60)

const origin = {latitude: 37.3318456, longitude: -122.0296002};
const destination = {latitude: 37.771707, longitude: -122.4053769};
const GOOGLE_MAPS_APIKEY = 'API_KEY';

const HomeScreen = (props) => {
  const [isOnline, setIsOnline] = useState(false);
  const [order, setOrder] = useState(null)
  const [newOrders, setNewOrders] = useState({
      id: '1',
      type: 'Loop 1',

      originLatitude: 15.166958649105302,
      originLongitude: 120.58020821518215,

      destLatitude: 15.166958649105302,
      destLongitude: 120.58020821518215,
      
      user: {
          rating: 5.0,
          name: 'Mark',
      }
  });

  const onDecline = () => {
    setNewOrders(null);
  }

  const onAccept = (newOrders) => {
    setOrder(newOrders);
    setNewOrders(null);
  }

  const onGoPress = async () => {
    setIsOnline(!isOnline);
  }

  const renderBottomTitle = () => {


    if(order) {
        return(
        <View style={{ alignItems: 'center' }}>
          <View style={{flexDirection: 'row', alignItems: 'center'}}>
            <Text>1 min</Text>
            <View style={{ backgroundColor: '#1e9203', marginHorizontal: 10, width: 30, height: 30, alignItems:'center', justifyContent: 'center', borderRadius: 20}}>
              <FontAwesome name={"user"} color={"white"} size={20} />
            </View>
            <Text>0.5 km</Text>
          </View>
          <Text style={styles.bottomText}>Picking up {order.user.name}</Text>
        </View>
        )
    }


    if (isOnline) {
        return (
        <Text style={styles.bottomText}>You're Online</Text>
        )
    }
    return <Text style={styles.bottomText}>You're Offline</Text>
  }

  return (
    <View> 
          <MapView
            style={{width: '100%', height: Dimensions.get('window').height - 90}}
            showsUserLocation={true}
            initialRegion={{
                latitude: 15.166958649105302,
                longitude: 120.58020821518215,
                latitudeDelta: 0.015,
                longitudeDelta: 0.015,
            }}
            >
            <MapViewDirections
                origin={origin}
                destination={{
                    latitude: order.originLatitude,
                    longitude: order.originLongitude
                }}
                apikey={GOOGLE_MAPS_APIKEY}
                />
        </MapView>

      <Pressable
        onPress={() => console.warn('Hey')}
        style={[styles.roundButton, {top: 10, left: 10}]}>
        <Entypo name={"menu"} size={24} color="#4a4a4a"/>
      </Pressable>

      <Pressable
        onPress={() => console.warn('Hey')}
        style={[styles.roundButton, {top: 10, right: 10}]}>
        <Entypo name={"magnifying-glass"} size={24} color="#4a4a4a"/>
      </Pressable>

      <Pressable
        onPress={() => console.warn('Hey')}
        style={[styles.roundButton, {bottom: 125, left: 10}]}>
        <Entypo name={"shield"} size={24} color="#4a4a4a"/>
      </Pressable>

      <Pressable
        onPress={() => console.warn('Hey')}
        style={[styles.roundButton, {bottom: 125, right: 10}]}>
        <Entypo name={"info"} size={24} color="#4a4a4a"/>
      </Pressable>

      <Pressable
        onPress={onGoPress}
        style={styles.goButton}>
        <Text style={styles.goText}>
            {
                isOnline ? 'End' : 'Go'
            }
        </Text>
      </Pressable>

      <View style={styles.bottomContainer}>
        <Ionicons name={"options"} size={24} color="#4a4a4a"/>
            {renderBottomTitle()}
        <Entypo name={"list"} size={24} color="#4a4a4a"/>
      </View>

      {newOrders &&<NewOrderPopup 
      newOrders={newOrders}
      duration={2}
      distance={0.5}
      onDecline={onDecline}
      onAccept={() => onAccept(newOrders)}
      />}
    </View>
  );
};

export default HomeScreen;

Answer 1

It looks like your order * object is initially being set to null, so when you first try and reference order.originLatitude in the props of the <MapViewDirections> component it throws an error.

const [order, setOrder] = useState(null)

You need to add a check to make sure that order is not null, or given a default value, before using it in props of this component:

<MapViewDirections
     origin={origin}
      destination={{
        latitude: order.originLatitude,
        longitude: order.originLongitude
      }}
      apikey={GOOGLE_MAPS_APIKEY}
/>