Implement polygon-geofence management

App.tsx

@@ -106,7 +106,7 @@ const App = () => {
 
 const styles = StyleSheet.create({
   button: {
-    backgroundColor: '#fedd1e'
+    backgroundColor: 'transparent'
   },
   input: {
     height: 40,

images/markers/index.ts

@@ -0,0 +1,14 @@
+export const bluedot = require('./bluedot.png');
+
+/// Directional map Marker arrows.  0 is North; each following is rotated 10 degress.  360/10 = 36 icons.
+
+export const locationArrowBlue = require('./location-arrow-blue.png');
+export const locationArrowGreen = require('./location-arrow-green.png');
+export const locationArrowAmber = require('./location-arrow-amber.png');
+export const locationArrowRed = require('./location-arrow-red.png');
+
+/// Small green, yellow, red geofence edge-coordinate circles.
+export const geofenceEventEdgeCircleDwell = require('./geofence-event-edge-circle-dwell.png');
+export const geofenceEventEdgeCircleEnter = require('./geofence-event-edge-circle-enter.png');
+export const geofenceEventEdgeCircleExit = require('./geofence-event-edge-circle-exit.png');
+

ios/BGGeolocation.xcodeproj/project.pbxproj

@@ -490,6 +490,7 @@
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = BGGeolocation/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = BGGeolocation;
+				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -518,6 +519,7 @@
 				DEVELOPMENT_TEAM = 32A636YFGZ;
 				INFOPLIST_FILE = BGGeolocation/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = BGGeolocation;
+				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",

ios/BGGeolocation.xcodeproj/xcshareddata/xcschemes/BGGeolocation.xcscheme

@@ -41,7 +41,7 @@
       </Testables>
    </TestAction>
    <LaunchAction
-      buildConfiguration = "Debug"
+      buildConfiguration = "Release"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
       launchStyle = "0"

ios/BGGeolocation/AppDelegate.mm

@@ -12,7 +12,9 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
   // You can add your custom initial props in the dictionary below.
   // They will be passed down to the ViewController used by React Native.
   self.initialProps = @{};
-
+
+
+
   // [REQUIRED] Register BackgroundFetch
   [[TSBackgroundFetch sharedInstance] didFinishLaunching];
 

ios/Podfile

@@ -6,6 +6,7 @@ require Pod::Executable.execute_command('node', ['-p',
   )', __dir__]).strip
 
 platform :ios, min_ios_version_supported
+#platform :ios, '13.0'
 prepare_react_native_project!
 
 # If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
@@ -26,6 +27,11 @@ if linkage != nil
 end
 
 target 'BGGeolocation' do
+  # for react-native-maps (enables GoogleMaps on iOS devices)
+  #pod 'Google-Maps-iOS-Utils', "~> 4.2.2"
+  #rn_maps_path = '../node_modules/react-native-maps'
+  #pod 'react-native-google-maps', :path => rn_maps_path
+
   config = use_native_modules!
 
   # Flags change depending on the env values.

ios/Podfile.lock

@@ -494,11 +494,13 @@ PODS:
     - React-perflogger (= 0.72.4)
   - RNBackgroundFetch (4.2.1):
     - React-Core
-  - RNBackgroundGeolocation (4.13.4):
+  - RNBackgroundGeolocation (4.14.0):
     - CocoaLumberjack (~> 3.7.2)
     - React-Core
   - RNCAsyncStorage (1.19.3):
     - React-Core
+  - RNReactNativeHapticFeedback (2.2.0):
+    - React-Core
   - RNScreens (3.25.0):
     - React-Core
     - React-RCTImage
@@ -577,6 +579,7 @@ DEPENDENCIES:
   - RNBackgroundFetch (from `../node_modules/react-native-background-fetch`)
   - RNBackgroundGeolocation (from `../node_modules/react-native-background-geolocation`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
+  - RNReactNativeHapticFeedback (from `../node_modules/react-native-haptic-feedback`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
@@ -687,6 +690,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-background-geolocation"
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-async-storage/async-storage"
+  RNReactNativeHapticFeedback:
+    :path: "../node_modules/react-native-haptic-feedback"
   RNScreens:
     :path: "../node_modules/react-native-screens"
   RNVectorIcons:
@@ -749,14 +754,15 @@ SPEC CHECKSUMS:
   React-utils: b79f2411931f9d3ea5781404dcbb2fa8a837e13a
   ReactCommon: 4b2bdcb50a3543e1c2b2849ad44533686610826d
   RNBackgroundFetch: 501c34ad6e880818ba17e7840b23f20a2d112923
-  RNBackgroundGeolocation: 60c4554829087ed9325cfeaf0ad406b9c700c45a
+  RNBackgroundGeolocation: 93e853b3cffda58a3e46851cb8bd19b48c15fb15
   RNCAsyncStorage: c913ede1fa163a71cea118ed4670bbaaa4b511bb
+  RNReactNativeHapticFeedback: ec56a5f81c3941206fd85625fa669ffc7b4545f9
   RNScreens: 85d3880b52d34db7b8eeebe2f1a0e807c05e69fa
   RNVectorIcons: 8b5bb0fa61d54cd2020af4f24a51841ce365c7e9
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Yoga: 3efc43e0d48686ce2e8c60f99d4e6bd349aff981
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: da2518075847f1519f359751a8a6172933fe65e8
+PODFILE CHECKSUM: f86c1747ae141435ebdc93d75e4e33545e0338bb
 
 COCOAPODS: 1.12.1

package.json

@@ -10,16 +10,18 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
+    "@expo/react-native-action-sheet": "^4.0.1",
     "@react-native-async-storage/async-storage": "^1.19.3",
     "@react-navigation/elements": "^1.3.18",
     "@react-navigation/native": "^6.1.7",
     "@react-navigation/native-stack": "^6.9.13",
     "react": "18.2.0",
     "react-native": "0.72.4",
     "react-native-background-fetch": "^4.2.1",
-    "react-native-background-geolocation": "^4.13.3",
+    "react-native-background-geolocation": "^4.14.0",
     "react-native-dropdown-picker": "^5.4.6",
     "react-native-elements": "^3.4.3",
+    "react-native-haptic-feedback": "^2.2.0",
     "react-native-maps": "^1.7.1",
     "react-native-prompt-android": "https://github.com/transistorsoft/react-native-prompt-android.git",
     "react-native-safe-area-context": "^4.7.1",

src/advanced/AdvancedApp.tsx

@@ -7,6 +7,8 @@ import {
   Icon
 } from 'react-native-elements'
 
+import { ActionSheetProvider } from '@expo/react-native-action-sheet';
+
 import BackgroundGeolocation from "../react-native-background-geolocation";
 
 import HomeView from './HomeView';
@@ -18,6 +20,7 @@ const Stack = createNativeStackNavigator();
 const AdvancedApp = ({route, navigation}) => {
 
   return (
+    <ActionSheetProvider>
     <Stack.Navigator
       initialRouteName="Home"
       screenOptions={{
@@ -64,6 +67,7 @@ const AdvancedApp = ({route, navigation}) => {
         />
       </Stack.Group>
     </Stack.Navigator>
+    </ActionSheetProvider>
   )
 }
 

src/advanced/FABMenu.tsx

@@ -41,7 +41,7 @@ const FABMenu = (props:Props) => {
   const settingsService = SettingsService.getInstance();
 
   /// FAB Menu handler.
-  const onClickMainMenu = (open:boolean) => {
+  const onClickMainMenu = (open:boolean) => {    
     setIsOpen(open);
     settingsService.playSound((open) ? 'OPEN' : 'CLOSE');
   }

src/advanced/GeofenceView.tsx

@@ -42,6 +42,7 @@ const GeofenceView = ({route, navigation}) => {
   const [identifier, setIdentifier] = React.useState('');
   const [identifierError, setIdentifierError] = React.useState('');
 
+  const [isPolygon, setIsPolygon] = React.useState(false);
   const [radiusOpen, setRadiusOpen] = React.useState(false);
   const [radius, setRadius] = React.useState(200);
 
@@ -65,6 +66,7 @@ const GeofenceView = ({route, navigation}) => {
 
   React.useEffect(() => {
     DropDownPicker.setListMode("SCROLLVIEW");
+    setIsPolygon(typeof (route.params.vertices) == 'object');
   }, []);
 
   /// [Add] button-handler.  Creates the geofence.
@@ -74,7 +76,7 @@ const GeofenceView = ({route, navigation}) => {
       return;
     }
 
-    const geofence = {
+    const geofence = (!isPolygon) ? {
       identifier: identifier,
       radius: radius,
       latitude: route.params.coordinate.latitude,
@@ -83,15 +85,50 @@ const GeofenceView = ({route, navigation}) => {
       notifyOnExit: notifyOnExit,
       notifyOnDwell: notifyOnDwell,
       loiteringDelay: parseInt(loiteringDelay, 10)
+    } : {
+      identifier: identifier,
+      vertices: route.params.vertices,
+      notifyOnEntry: notifyOnEntry,
+      notifyOnExit: notifyOnExit,
     };
-
+    
     BackgroundGeolocation.addGeofence(geofence).then((result) => {
       settingsService.playSound('ADD_GEOFENCE');
       navigation.goBack();
     }).catch((error) => {
       settingsService.alert('Add Geofence Error', error);
     });
   }
+
+  const renderRadiusPicker = () => {
+    return !isPolygon ? (
+      <View style={{paddingLeft: 20, paddingRight: 20, marginBottom: 20, zIndex: 1000}}>
+        <ListItem.Title style={styles.formLabel}>radius</ListItem.Title>
+        <DropDownPicker
+          open={radiusOpen}
+          value={radius}
+          items={[
+            {label: '150', value: 150},
+            {label: '200', value: 200},
+            {label: '500', value: 500},
+            {label: '1000', value: 1000},
+            {label: '2000', value: 2000},
+            {label: '5000', value: 5000}
+          ]}
+          setOpen={setRadiusOpen}
+          setValue={setRadius}
+          style={{
+            borderColor: '#ccc'
+          }}
+          dropDownContainerStyle={{
+            backgroundColor: '#fafafa',
+            borderColor: '#ccc'
+          }}
+        />
+      </View>
+    ) : <View />;
+
+  }
   return (
     <View style={styles.form}>
 
@@ -114,27 +151,7 @@ const GeofenceView = ({route, navigation}) => {
         containerStyle={styles.containerStyle}
       />
 
-      <View style={{paddingLeft: 20, paddingRight: 20, marginBottom: 20}}>
-
-        <ListItem.Title style={styles.formLabel}>radius</ListItem.Title>
-        <DropDownPicker
-          open={radiusOpen}
-          value={radius}
-          items={[
-            {label: '150', value: 150},
-            {label: '200', value: 200},
-            {label: '500', value: 500},
-            {label: '1000', value: 1000},
-            {label: '2000', value: 2000},
-            {label: '5000', value: 5000}
-          ]}
-          setOpen={setRadiusOpen}
-          setValue={setRadius}
-          style={{
-            borderColor: '#ccc'
-          }}
-        />
-      </View>
+      {renderRadiusPicker()}
 
       <View style={styles.inlineField}>
         <View style={{flex: 1}}>