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 |