React Native Mapview component with bottom sheet for iOS + Android
npm install ao-mapsMaps 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
6. Open AppDelegate.m and add the fllowing lines
#import
[GMSServices provideAPIKey:@"API_KEY"]; (inside application didFinishLaunchingWithOptions)
1. Go to folder Android.
2. Add the following line in AndroidManifest.xml
3. Add the following lines in AndroidManifest.xml inside
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);
}
};
}
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
| 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 |