ao-maps

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

UIAppFonts

AntDesign.ttf
Entypo.ttf
EvilIcons.ttf
Feather.ttf
FontAwesome.ttf
FontAwesome5_Brands.ttf
FontAwesome5_Regular.ttf
FontAwesome5_Solid.ttf
Foundation.ttf
Ionicons.ttf
MaterialIcons.ttf
MaterialCommunityIcons.ttf
SimpleLineIcons.ttf
Octicons.ttf
Zocial.ttf

6. Open AppDelegate.m and add the fllowing lines

#import
[GMSServices provideAPIKey:@"API_KEY"]; (inside application didFinishLaunchingWithOptions)

$3

1. Go to folder Android.

2. Add the following line in AndroidManifest.xml

3. Add the following lines in AndroidManifest.xml inside

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);
}
};
}

$3

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 |