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:
Go to floder iOS
Open Podfile in text editor
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'
Run command pod install in terminal
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>
Open AppDelegate.m and add the fllowing lines
#import <GoogleMaps/GoogleMaps.h> [GMSServices provideAPIKey:@"API_KEY"]; (inside application didFinishLaunchingWithOptions)
Android:
Go to folder Android.
Add the following line in AndroidManifest.xml
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
Add the following lines in AndroidManifest.xml inside
<meta-data android:name="com.google.android.geo.API_KEY" android:value="GOOGLE_API_KEY" />
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)
Add following line in app/build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
Add the following line in AndroidManifeast.xml
android:windowSoftInputMode="adjustPan"
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:
https://github.com/react-native-community/react-native-geolocation
https://github.com/react-native-community/react-native-maps/blob/master/docs/installation.md
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 |