post react native map ios

Posted on

React Native map ios

Installation
First, download the library from npm:

npm install react-native-maps --save

package.json

"dependencies": {
"react": "15.4.2",
"react-native": "0.41.2",
"react-native-chart": "^1.0.8-beta",
"react-native-check-box": "^1.0.4",
"react-native-checkbox": "^1.1.0",
"react-native-dropdown": "0.0.6",
"react-native-elements": "^0.9.7",
"react-native-maps": "^0.14.0",
"react-native-menu": "^0.20.2",
"react-native-pathjs-charts": "0.0.25",
"react-native-scrollable-tab-view": "^0.7.2",
"react-native-slider": "^0.9.1",
"react-native-swipeable": "^0.3.2",
"react-native-swipeout": "^2.0.12",
"react-native-swiper": "^1.5.4",
"react-native-tab-navigator": "^0.3.3",
"react-native-vector-icons": "^4.0.0",
"rnpm": "^1.9.0"
  },

possible error might be 

TransformError: xxx/.js Unknown plugin "module-resolver" specified in "xxxxx/react-native-maps/.babelrc" at 0, attempted to resolve relative to "xxxxxx/react-native-maps"

to solve this error above:

npm install --save-dev babel-plugin-module-resolver
npm cache clean

close the package windows or the cmd windows,then start it again

react-native run-ios

this problem might be removed

then follow the manual option as below:

Option 3: Manually

  1. This was already done for you if you ran “react-native link”
  2. Open your project in Xcode, right click on Libraries and click Add Files to “Your Project Name” Look under node_modules/react-native-maps/lib/ios and add AIRMaps.xcodeproj.
  3. Add libAIRMaps.a to `Build Phases -Link Binary With Libraries.
  4. Click on AIRMaps.xcodeproj in Libraries and go the Build Settings tab. Double click the text to the right of Header Search Paths and verify that it has $(SRCROOT)/../../react-native/React as well as $(SRCROOT)/../../react-native/Libraries/Image - if they aren’t, then add them. This is so Xcode is able to find the headers that the AIRMaps source files are referring to by pointing to the header files installed within the react-native node_modules directory.
  5. Whenever you want to use it within React code now you can: var MapView = require(‘react-native-maps’);

then you might notice this error

iOS build failed RCTConver+Mapkit.o RCTConvert+Mapkit.m

to solve this problem, just delete the RCTConver+AirMap.h RCTConvert+AirMap.m
this problem might be caused by the rename of files

in Xcode open libraries -right click AirMaps.xcodeproj -add file to AirMaps -go to find react-native-maps into node_module -lib -ios -AirMaps -select RCTConvert+MapKit.h/m -add (to fix ‘File RCTConvert+MapKit.m not found’).
then make suer this step

libAirMaps.a to the Link Binary With Libraries

then clean and build the product
then 

npm install rnpm
react-native link

then

xcode->product->clean->build

All this above is the way to install map based on iOS map not Google Map.
As a result, the api of google map is not mentioned above!