I cloned a geofencing example tutorial from Ridwan Altun. I modified the code to my coordinates and it works well in his project. I now want to copy his code into my project and run. However when running project with his code, it gives a render output for MapCircle.
However when i run the same code in his project it works. Commenting the return () tags lets the project run properly but not show the circles/geofences.
screenshot when running from Ridwan's project
I need the return tags to work
This is coordinate_geofence index.js file copied from Ridwan's helper.js file
export const misGeofence = {
lat: 1.416807,
lng: 124.985914,
radius: 30,
id: 'UNKLAB',
};
export const gk2 = {
lat: 1.417641,
lng: 124.982530,
radius: 30,
id: 'GK2',
};
export const pc = {
lat: 1.418424,
lng: 124.983887,
radius: 30,
id: 'pc',
};
This is my Main index.js file copied and modified for Ridwan's App.js file
import React, {useEffect, useRef} from 'react';
import {StyleSheet, TouchableOpacity, Text, View, Platform} from 'react-native';
import PushNotification from 'react-native-push-notification';
import PushNotificationIOS from '@react-native-community/push-notification-ios';
import Boundary from 'react-native-boundary';
import Permissions, {PERMISSIONS, RESULTS} from 'react-native-permissions';
import MapView from 'react-native-maps';
import MapCircle from './MapCircle';
import { gk2, misGeofence, pc} from '../Coordate_Geofence';
const isAndroid = Platform.OS === 'android';
const isIOS = Platform.OS === 'ios';
const Button = ({onPress, title}) => {
return (
<TouchableOpacity onPress={onPress} style={styles.button}>
<Text>{title}</Text>
</TouchableOpacity>
);
};
const Maps = () => {
const mapRef = useRef(null);
const MapCircle = (props) => {
const { latitude, longitude, radius } = props
return (
<MapView.Circle
center={{
latitude,
longitude,
}}
radius={radius}
strokeWidth={2}
strokeColor="#3399ff"
fillColor="rgba(0,0,0,0.5)"
zIndex={100}
/>
);
};
useEffect(() => {
handlePermissions();
}, []);
const handlePermissions = () => {
if (isAndroid) handleAndroidPermissions();
if (isIOS) handleIOSPermissions();
};
const handleAndroidPermissions = () => {
Permissions.request(PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION).then(
fineLocationStatus => {
switch (fineLocationStatus) {
case RESULTS.GRANTED:
case RESULTS.LIMITED:
Permissions.request(
PERMISSIONS.ANDROID.ACCESS_BACKGROUND_LOCATION,
).then(backgroundLocationStatus => {
switch (backgroundLocationStatus) {
case RESULTS.GRANTED:
case RESULTS.LIMITED:
handleLocationAllowed();
break;
default:
console.log(
'ACCESS_BACKGROUND_LOCATION ->',
backgroundLocationStatus,
);
break;
}
});
break;
default:
console.log('ACCESS_FINE_LOCATION ->', fineLocationStatus);
break;
}
},
);
};
const handleIOSPermissions = () => {
Permissions.request(PERMISSIONS.IOS.LOCATION_ALWAYS).then(
locationAlwaysStatus => {
switch (locationAlwaysStatus) {
case RESULTS.GRANTED:
case RESULTS.LIMITED:
handleLocationAllowed();
break;
default:
console.log('LOCATION_ALWAYS ->', locationAlwaysStatus);
break;
}
},
);
PushNotificationIOS.requestPermissions().then(response => {
const isAlertAllowed = response.alert;
console.log('Is iOS Alert Allowed:', isAlertAllowed);
});
};
const handleLocationAllowed = () => {
Boundary.add(misGeofence)
.then(() => console.log('[ACTIVE] - Geofence added!'))
.catch(e => console.error('[ACTIVE] - Error:', e));
};
const onNotificationTestPress = () => {
PushNotification.localNotification({
channelId: 'boundary-demo',
title: 'Test Notification',
message: 'It is a test notification.',
importance: 'max',
priority: 'max',
ignoreInForeground: false,
allowWhileIdle: true,
});
};
const renderEiffelGeofences = () => {
// return (
<MapCircle
key={misGeofence.id}
latitude={misGeofence.lat}
longitude={misGeofence.lng}
radius={misGeofence.radius}
/>
// );
};
const gedungkeluliahGeofences = () => {
return (
<MapCircle
key={gk2.id}
latitude={gk2.lat}
longitude={gk2.lng}
radius={gk2.radius}
/>
);
};
const pioneerChapelGeofences = () => {
// return (
<MapCircle
key={pc.id}
latitude={pc.lat}
longitude={pc.lng}
radius={pc.radius}
/>
// );
};
return (
<View style={styles.container}>
<MapView
followsUserLocation
showsUserLocation
showsMyLocationButton
showsCompass
ref={mapRef}
style={styles.map}>
{renderEiffelGeofences()}
{gedungkeluliahGeofences()}
{pioneerChapelGeofences()}
</MapView>
<Button onPress={onNotificationTestPress} title="Notification Test" />
</View>
);
};
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
justifyContent: 'flex-end',
},
map: {
...StyleSheet.absoluteFillObject,
},
button: {
backgroundColor: '#fff',
borderRadius: 20,
padding: 15,
fontSize: 15,
alignSelf: 'flex-end',
borderWidth: 1,
marginVertical: 5,
marginHorizontal: 5,
},
});
export default Maps;
This is my notification index.js file from Ridwan's index.js file.
import {AppRegistry} from 'react-native';
import Maps from '../Maps';
import {name as appName} from '../../../../app.json';
import PushNotification, {Importance} from 'react-native-push-notification';
import Boundary, {Events} from 'react-native-boundary';
import Permissions, {PERMISSIONS, RESULTS} from 'react-native-permissions';
import { gk2, misGeofence, pc} from '../Help';
PushNotification.createChannel(
{
channelId: 'boundary-demo',
channelName: 'Boundary Channel',
channelDescription: 'A channel to categorise your notifications',
playSound: false,
soundName: 'default',
importance: Importance.HIGH,
vibrate: true,
},
created => {
if (created) console.log('Notification channel created: Boundary Channel');
else console.log('Notification channel already exist: Boundary Channel');
},
);
const addGeofences = () => {
// add mis geofence
Boundary.add(misGeofence)
.then(() => console.log('[BACKGROUND] - Geofence added!'))
.catch(e => console.error('[BACKGROUND] - Error:', e));
// add gk2 geofence
Boundary.add(gk2)
.then(() => console.log('[BACKGROUND] - Geofence added!'))
.catch(e => console.error('[BACKGROUND] - Error:', e));
// add pc geofence
Boundary.add(pc)
.then(() => console.log('[BACKGROUND] - Geofence added!'))
.catch(e => console.error('[BACKGROUND] - Error:', e));
};
Boundary.on(Events.ENTER, id => {
console.log('Background Enter');
PushNotification.localNotification({
channelId: 'boundary-demo',
title: 'ENTER SIGNAL',
message: `ENTERING ${id} in background`,
importance: 'max',
priority: 'max',
ignoreInForeground: false,
allowWhileIdle: true,
});
});
Boundary.on(Events.EXIT, id => {
console.log('Background Exit');
PushNotification.localNotification({
channelId: 'boundary-demo',
title: 'EXIT SIGNAL',
message: `Entered inside ${id} in background`,
importance: 'max',
priority: 'max',
ignoreInForeground: false,
allowWhileIdle: true,
});
});
const onAfterRebootHeadlessTaskForAndroid = () => async () => {
Permissions.checkMultiple([
PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
PERMISSIONS.ANDROID.ACCESS_BACKGROUND_LOCATION,
]).then(statuses => {
const isAccessFineLocationAllowed =
statuses[PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION] === RESULTS.LIMITED ||
RESULTS.GRANTED;
const isAccessBackgroundLocationAllowed =
statuses[PERMISSIONS.ANDROID.ACCESS_BACKGROUND_LOCATION] ===
RESULTS.LIMITED || RESULTS.GRANTED;
if (isAccessFineLocationAllowed && isAccessBackgroundLocationAllowed)
addGeofences();
});
};
Geo-fences are always erased after phone restart, we need to re register them on boot startup. This part automatically execute after Android phone reboot.
Boundary.onReRegisterRequired(onAfterRebootHeadlessTaskForAndroid);
AppRegistry.registerComponent(appName, () => Maps);