Maps Mobile for Tennis Australia

React Native application for iOS + Android

Project Setup:

1. Clone the project.

2. Go to root directory >run "yarn"

3. Go to ios directory >run pod install

Running App:

** Go to root directory **

iOS:

yarn ios

android:

yarn android

Make sure the development server is running.

yarn start

Follow Running on Device

Note: You can also use IDEs like Xcode and Android Studio.

Dependencies:

1. awesome-debounce-promise

2. axios

3. react-native-elements

4. react-native-maps

5. react-native-simple-toast

6. react-native-vector-icons

7. reanimated-bottom-sheet

Versions

node: v10.16.3

Configuration

App Environment

change base_url constant as per run environment.

TODO: Configure app schema so that it run in dev environment when in debug mode and in prod in release mode.

you can set server api key in constant (method is already exposed so that api key can be fetched in first load)

Google map:

Go to >src/config/google.js

 > update the settings like minZoomLevel, maxZoomLevel
 > set the width/color of the polylines
 > change the icons size and color for buttons on map
 > change the map style 

Note: filter items are loaded from mockdata, update function <getFilterItems to fetch items from server

Setting Google API Key:

iOS:

Open file AppDelegate.m Update API key [GMSServices provideAPIKey:@"AIzaSyDN5UPOcQRAn4TK9U44OtPy7qR_Ly29QvE"];

Android:

Open file src/main/AndroidManifest.xml Update API key (android:value="AIzaSyAW69IhCYqTVkDbdTIXKR-XLs_yWT0WLow")

Caching:

The outline of the map is loaded once from the server to cache then the outline is drawn with the cache data. Caching time is configurable, set minutes (caching_time), in appConstants file.

TODO:

• make the bottom sheet draggable in android.

• verify if the filter works for autocompletion.

• change the icon of the POI as per their category.