ao-maps v0.3.7

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

3. Add the following lines in AndroidManifest.xml inside

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