ao-maps

React Native Mapview component with bottom sheet for iOS + Android

Usage no npm install needed!

<script type="module">
  import aoMaps from 'https://cdn.skypack.dev/ao-maps';
</script>

README

Maps with bottom sheet.

React Native application for iOS + Android

1. Installation from npm:

npm install ao-maps
yarn add ao-maps

NOTE: Add the the following code to ignore typescript error (temporary solution).

// @ts-ignore
import  AOMap  from  'ao-maps';

2. Copy paste following in Package.json inside "dependencies"

 "@react-native-community/geolocation": "^2.0.2",

 "@react-native-community/netinfo": "^4.6.0",

 "awesome-debounce-promise": "^2.1.0",

 "axios": "^0.19.0",

 "react-native-cache-store": "^1.0.2",

 "react-native-elements": "^1.2.7",

 "react-native-gesture-handler": "^1.5.0",

 "react-native-maps": "0.26.1",

 "react-native-reanimated": "^1.4.0",

 "react-native-simple-toast": "^1.0.0",

 "react-native-vector-icons": "^6.6.0",

 "reanimated-bottom-sheet": "^1.0.0-alpha.15"
 
 "react-native-geolocation-service": "^3.1.0",

3. Run command yarn in terminal

4. Add import *'react-native-gesture-handler'; * at the top of file index.js

Build Configuration:

iOS:

  1. Go to floder iOS

  2. Open Podfile in text editor

  3. Paste following above "use_native_modules"

    rn_maps_path = '../node_modules/react-native-maps'
    pod 'react-native-google-maps', :path => rn_maps_path
    pod 'GoogleMaps' 
    pod 'Google-Maps-iOS-Utils'
    
  4. Run command pod install in terminal

  5. Open info.plist and add following fonts

    <key>UIAppFonts</key>
    <array>
      <string>AntDesign.ttf</string>
      <string>Entypo.ttf</string>
      <string>EvilIcons.ttf</string>
      <string>Feather.ttf</string>
      <string>FontAwesome.ttf</string>
      <string>FontAwesome5_Brands.ttf</string>
      <string>FontAwesome5_Regular.ttf</string>
      <string>FontAwesome5_Solid.ttf</string>
      <string>Foundation.ttf</string>
      <string>Ionicons.ttf</string>
      <string>MaterialIcons.ttf</string>
      <string>MaterialCommunityIcons.ttf</string>
      <string>SimpleLineIcons.ttf</string>
      <string>Octicons.ttf</string>
      <string>Zocial.ttf</string>
    </array>
    
  6. Open AppDelegate.m and add the fllowing lines

    #import <GoogleMaps/GoogleMaps.h> 
    [GMSServices provideAPIKey:@"API_KEY"]; (inside application didFinishLaunchingWithOptions)
    

Android:

  1. Go to folder Android.

  2. Add the following line in AndroidManifest.xml

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    
  3. Add the following lines in AndroidManifest.xml inside

    <meta-data
       android:name="com.google.android.geo.API_KEY"
       android:value="GOOGLE_API_KEY"
    />
    
  4. Add following lines in build.gradle inside buildscript{ext{}}

    supportLibVersion   = "28.0.0" (you can change to latest version)
    playServicesVersion = "16.1.0" (you can change to latest version)
    androidMapsUtilsVersion = "0.5" (you can change to latest version)
    
  5. Add following line in app/build.gradle

    apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
    
  6. Add the following line in AndroidManifeast.xml

    android:windowSoftInputMode="adjustPan"
    
  7. Go to MainActivity.java and paste the following lines of code.

    import com.facebook.react.ReactActivityDelegate;
    import com.facebook.react.ReactRootView;
    import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView 
    android:windowSoftInputMode="adjustPan"
    
    
    
    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
    @Override
     protected ReactRootView createRootView() {
      return new RNGestureHandlerEnabledRootView(MainActivity.this);
      }
     };
    }
    

For detail setup instruction you can follow the below links:

  1. https://github.com/react-native-community/react-native-geolocation

  2. https://github.com/oblador/react-native-vector-icons

  3. https://github.com/react-native-community/react-native-maps/blob/master/docs/installation.md

  4. https://github.com/kmagiera/react-native-gesture-handler

AOMAP Component API

Props

Prop Type Default Note
apiKey String (Required)
baseURL String (Required)
initialPOIID Number null If the initial POID is passed then the POI will be shown in the map
favouritePOIs [String] null Array of favourite Poi ids
distanceFilter Number 5 Change in distance (m) required to update current location
mapConfig Object {showUserLocation: true, showsCompass: true, showsMyLocationButton: false, loadingEnabled: true, rotateEnabled: true, scrollEnabled: true, pitchEnabled: true, zoomEnabled: true, zoomControlEnabled: true, followsUserLocation: true, minZoomLevel: 14, maxZoomLevel: 24, toolbarEnabled: false,} Data used to configure map
polyLineStyle Object {strokeWidth: 4, strokeColor: '#729DEF'} Style of the polyline to show direction
dashLineStyle Object {strokeWidth: 4, strokeColor: '#729DEF', lineDashPattern: [5, 5, 5, 5]} Style of the dash line to suggest there may or maynot be the route
edgePadding Object { top: 200,right: 100,bottom: 100,left: 200} Padding to focus the direction on map
mapOutlineStyle Object {strokeWidth: 1, strokeColor: '#D0684D'} Style of outline of map drawn
mapStyle Array mapStyle: [{'featureType': 'road','stylers': [{'visibility': 'off'}]}] Configure the style of the map from here // Generate style from here https://mapstyle.withgoogle.com/
initialRegion Object intialRegion: {latitude:-37.824981,longitude: 144.983613, latitudeDelta: 0.0922, longitudeDelta: 0.0421,} Initial region to set the camera
myLocationButtonStyle Object {name: icons.crosshairs, type:icon_types.font_awesome, color: '#AFB5BC', size: 24,} Style of show my location button
isFilterVisible Bool false Set true to show the filter button
filterButtonStyle Object {name: icons.filter, type: icon_types.font_awesome, color: '#AFB5BC', size: 24, } Style of filter button