October 22, 2024
Chicago 12, Melborne City, USA
Android

Implementing OpenStreetMap for searching placing in react-native application


Error 1:
Message: Render Error – Invalid attempt to destructure non-iterable instance.
Details: In order to be iterable, non-array objects must have a Symbol.iterator method.
Error 2:
Message: Render Error – Invalid attempt to destructure non-iterable instance.
Details: In order to be iterable, non-array objects must have a Symbol.iterator method.
Both errors share the same message and stack trace, pointing towards an issue with destructuring non-iterable instances in the SearchPlace component.Error Occured-1
Error Occured-2

I tried incorporating OpenStreetMap for searching place in my app.When I added it then I am getting those errors.But I am expecting a normal search bar for searching places.

import { View } from 'react-native';
import React, { useEffect, useState } from 'react';
import { useNavigation } from 'expo-router';
import { OpenStreetMapSearchPlace, LocationType } from 'react-native-openstreetmap-search-places';

export default function SearchPlace() {
  const navigation = useNavigation();
  const [location, setLocation] = useState(null);

  
  useEffect(() => {
    navigation.setOptions({
      headerShown: true,
      headerTransparent: true,
      headerTitle: 'Search'
    });
  }, []);

  return (
    <View>
        <OpenStreetMapSearchPlace
            location={location}
            setLocation={setLocation}
            lang='en'
            noResultFoundText="No result found"
            placeHolder="Search place"
            searchPlaceHolder="Enter address"
            mode="outlined"
            style={{
                height: 61, 
                backgroundColor: '#C7E9FD'
            }}
            contentStyle={{fontFamily: 'Roboto'}}
            outlineStyle={{
                borderRadius: 14, 
                borderWidth: 0, 
                marginHorizontal: 2
            }}
            searchBarStyle={{
                backgroundColor: '#C7E9FD',
                borderRadius: 12,
                borderWidth: 0,
                marginTop: 2,
            }}
            searchBarInputStyle={{fontFamily: 'Roboto'}}
            searchResultLabelStyle={{fontSize: 14}}
            modalStyle={{borderRadius: 14}}
            loaderColor="blue"
            loaderSize="small"
            modalBgColor="white"
            dismissable
        />
  </View>
  );
}



You need to sign in to view this answers

Leave feedback about this

  • Quality
  • Price
  • Service

PROS

+
Add Field

CONS

+
Add Field
Choose Image
Choose Video