title: displaying MapView.Circle in my react-native-projects gives a render output error when running in personal project but from copied repo
body: <p>I cloned a geofencing example <a href="https://github.com/ridvanaltun/react-native-geofence-example" rel="nofollow noreferrer">tutorial from Ridwan Altun</a>. 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.</p>
  <p><a href="https://i.stack.imgur.com/EVCBO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EVCBO.jpg" alt="error screenshot" /></a></p>
  <p>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.</p>
  <p>screenshot when running from Ridwan's project</p>
  <p><a href="https://i.stack.imgur.com/YB8Ej.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YB8Ej.jpg" alt="" /></a></p>
  <p>I need the return tags to work</p>
  <p>This is coordinate_geofence index.js file copied from Ridwan's helper.js file</p>
  <pre><code>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',
  };
  </code></pre>
  <p>This is my Main index.js file copied and modified for Ridwan's App.js file</p>
  <pre><code>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}) =&gt; {
    return (
      &lt;TouchableOpacity onPress={onPress} style={styles.button}&gt;
        &lt;Text&gt;{title}&lt;/Text&gt;
      &lt;/TouchableOpacity&gt;
    );
  };
  
  const Maps = () =&gt; {
      const mapRef = useRef(null);
      
      const MapCircle = (props) =&gt; {
          const { latitude, longitude, radius } = props
          return (
          &lt;MapView.Circle
              center={{
                latitude,
                longitude,
              }}
              radius={radius}
              strokeWidth={2}
              strokeColor=&quot;#3399ff&quot;
              fillColor=&quot;rgba(0,0,0,0.5)&quot;
              zIndex={100}
            /&gt;
          );
        };
      
    useEffect(() =&gt; {
      handlePermissions();
    }, []);
  
    const handlePermissions = () =&gt; {
      if (isAndroid) handleAndroidPermissions();
      if (isIOS) handleIOSPermissions();
    };
  
    const handleAndroidPermissions = () =&gt; {
      Permissions.request(PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION).then(
        fineLocationStatus =&gt; {
          switch (fineLocationStatus) {
            case RESULTS.GRANTED:
            case RESULTS.LIMITED:
              Permissions.request(
                PERMISSIONS.ANDROID.ACCESS_BACKGROUND_LOCATION,
              ).then(backgroundLocationStatus =&gt; {
                switch (backgroundLocationStatus) {
                  case RESULTS.GRANTED:
                  case RESULTS.LIMITED:
                    handleLocationAllowed();
                    break;
                  default:
                    console.log(
                      'ACCESS_BACKGROUND_LOCATION -&gt;',
                      backgroundLocationStatus,
                    );
                    break;
                }
              });
              break;
            default:
              console.log('ACCESS_FINE_LOCATION -&gt;', fineLocationStatus);
              break;
          }
        },
      );
    };
  
    const handleIOSPermissions = () =&gt; {
      Permissions.request(PERMISSIONS.IOS.LOCATION_ALWAYS).then(
        locationAlwaysStatus =&gt; {
          switch (locationAlwaysStatus) {
            case RESULTS.GRANTED:
            case RESULTS.LIMITED:
              handleLocationAllowed();
              break;
            default:
              console.log('LOCATION_ALWAYS -&gt;', locationAlwaysStatus);
              break;
          }
        },
      );
      PushNotificationIOS.requestPermissions().then(response =&gt; {
        const isAlertAllowed = response.alert;
  
        console.log('Is iOS Alert Allowed:', isAlertAllowed);
      });
    };
  
    const handleLocationAllowed = () =&gt; {
  
      Boundary.add(misGeofence)
        .then(() =&gt; console.log('[ACTIVE] - Geofence added!'))
        .catch(e =&gt; console.error('[ACTIVE] - Error:', e));
    };
    
  
    const onNotificationTestPress = () =&gt; {
      PushNotification.localNotification({
        channelId: 'boundary-demo',
        title: 'Test Notification',
        message: 'It is a test notification.',
        importance: 'max',
        priority: 'max',
        ignoreInForeground: false,
        allowWhileIdle: true,
      });
    };
  
  
    const renderEiffelGeofences = () =&gt; {
      // return (
        &lt;MapCircle
          key={misGeofence.id}
          latitude={misGeofence.lat}
          longitude={misGeofence.lng}
          radius={misGeofence.radius}
        /&gt;
      // );
    };
  
    const gedungkeluliahGeofences = () =&gt; {
       return (
        &lt;MapCircle
          key={gk2.id}
          latitude={gk2.lat}
          longitude={gk2.lng}
          radius={gk2.radius}
        /&gt;
      );
    };
  
    const pioneerChapelGeofences = () =&gt; {
      // return (
        &lt;MapCircle
          key={pc.id}
          latitude={pc.lat}
          longitude={pc.lng}
          radius={pc.radius}
        /&gt;
      // );
    };
  
  
    return (
      &lt;View style={styles.container}&gt;
        &lt;MapView
          followsUserLocation
          showsUserLocation
          showsMyLocationButton
          showsCompass
          ref={mapRef}
          style={styles.map}&gt;
          
          {renderEiffelGeofences()}
          {gedungkeluliahGeofences()}
          {pioneerChapelGeofences()}
          
        &lt;/MapView&gt;
        &lt;Button onPress={onNotificationTestPress} title=&quot;Notification Test&quot; /&gt;
      &lt;/View&gt;
    );
  };
  
  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;
  </code></pre>
  <p>This is my notification index.js file from Ridwan's index.js file.</p>
  <pre><code>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 =&gt; {
      if (created) console.log('Notification channel created: Boundary Channel');
      else console.log('Notification channel already exist: Boundary Channel');
    },
  );
  
  const addGeofences = () =&gt; {
  
  
    // add mis geofence
    Boundary.add(misGeofence)
      .then(() =&gt; console.log('[BACKGROUND] - Geofence added!'))
      .catch(e =&gt; console.error('[BACKGROUND] - Error:', e));
  
  
    // add gk2 geofence
    Boundary.add(gk2)
      .then(() =&gt; console.log('[BACKGROUND] - Geofence added!'))
      .catch(e =&gt; console.error('[BACKGROUND] - Error:', e));
  
  
    // add pc geofence
    Boundary.add(pc)
      .then(() =&gt; console.log('[BACKGROUND] - Geofence added!'))
      .catch(e =&gt; console.error('[BACKGROUND] - Error:', e));
  };
  
  Boundary.on(Events.ENTER, id =&gt; {
    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 =&gt; {
    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 = () =&gt; async () =&gt; {
    Permissions.checkMultiple([
      PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
      PERMISSIONS.ANDROID.ACCESS_BACKGROUND_LOCATION,
    ]).then(statuses =&gt; {
      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 &amp;&amp; isAccessBackgroundLocationAllowed)
        addGeofences();
    });
  };
  </code></pre>
  <p>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.</p>
  <pre><code>Boundary.onReRegisterRequired(onAfterRebootHeadlessTaskForAndroid);
  
  AppRegistry.registerComponent(appName, () =&gt; Maps);
  </code></pre>