Local Search on react-native

Question

Does anyone is using some good plugins/module for search places on react-native? I have a MapView on my app and I would like to search cities.

I found this plugin: https://github.com/wmcmahan/React-Native-LocalSearch but I can't make it work, I always get some sort of error, other than this one I've tried to google but I didn't find other plugin.

Answer 1

The React-Native-LocalSearch module can solve this.

Without knowing the specific error you are receiving, it may be hard to diagnose it as an error relating to the module or the implementation, but below is how I have it working in my project.

Setup and Implementation

These are the steps to have it properly integrated into your React Native IOS application.

1. Install: npm install --save react-native-localsearch

2. Add to project libraries in Xcode. The React Native docs have a detailed pages (with images) on how to do this, but here are some quick steps for it:

   1. In Xcode's project navigator, right click Libraries and Add Files to [your project's name].
   2. Find the directory React-Native-local-search in your projects node_modules directory and add RNLocalSearch.xcodeproj.
   3. Add libRNLocalSearch.a to your project's Build Phases and Link Binary With Libraries

3. Use it in component. Example:

   var RNLocalSearch = require('react-native-localsearch');
   
   RNLocalSearch.searchForLocations('Location Name', {
     latitude: 30.2669444,
     longitude: -97.7427778,
     latitudeDelta: 0.1,
     longitudeDelta: 0.1
   }, (err, resp) => {
   ... 
   });
   

Answer 2

Following @wmcmahan's answer returned the following error when building for me:

'React/RCTDefines.h' file not found

I tried a few things and was able resolve the issue. There are two problems: Turns out the auto-linking mechanism introduced for React Native versions >= 0.61 (see What exactly does `pod install` do in react-native's autolinking?) can help solve this:

1. There is an assumed dependency that is required from react-native-maps.

   • Run npm install --save react-native-maps

2. Manual linking didn't work for me, but forcing the auto linking mechanism introduced in React Native version 0.61 (see What exactly does `pod install` do in react-native's autolinking?) did:

   • Add a react-native-localsearch.podspec file under node_modules/react-native-localsearch with the following content:

   require 'json'
   
   package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
   
   Pod::Spec.new do |s|
     s.name         = "react-native-localsearch"
     s.version      = package['version']
     s.summary      = package["description"]
     s.authors      = package["author"]
     s.homepage     = package["homepage"]
     s.license      = package["license"]
     s.platform     = :ios, "11.0"
   
     s.source       = { :git => "https://github.com/wmcmahan/React-Native-LocalSearch.git", :tag=> "v#{s.version}" }
     s.source_files  = "*.{h,m}"
   
     s.dependency 'React-Core'
   end
   

   • Run pod install under your project's ios/ directory or run npx pod-install from the root react native directory
   • Build project