Estimote's RN wrapper (react-native-proximity) cannot detect beacon

Question

I created an RN project with react-native init. The app tried to detect an iBeacon tagged as 'japan' but has never succeeded. However, the official Estimote App in the same Android phone can detect the 'japan' iBeacon and show on its screen.

The App.js:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import * as RNEP from '@estimote/react-native-proximity'

// Candy: 46925e7c3ebf3dfaae9495f5ea6bfe2e: B9407F30-F5F8-466E-AFF9-25556B57FE6D:4678:20750
// Lemon: 558a35bbe5f247c3006a29a0c9f45d0e: B9407F30-F5F8-466E-AFF9-25556B57FE6D:46147:28807
// Beetroor: d7bc54ba83cf9ea68344860e5c91eb1c: B9407F30-F5F8-466E-AFF9-25556B57FE6D:30635:42073

// this will trigger a popup with "allow this app to access your location?"

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};

const zone1 = new RNEP.ProximityZone(5, "japan");
zone1.onEnterAction = context => {
  // context properties are:
  // - attachments: all the key-value attachments assigned in Estimote Cloud to the beacon that triggered the action
  // - tag: the tag used when defining the zone, repeated here for convenience
  // - deviceIdentifier: Estimote-specific device identifier of the beacon that triggered the action
  console.log("zone1 onEnter finally", context);
};
zone1.onExitAction = context => {
  console.log("zone1 onExit", context);
};
zone1.onChangeAction = contexts => {
  // onChange event gives you granular data about which exact beacons are in range
  //
  // imagine there are 2 beacons tagged "lobby", to help cover the entire lobby area; here's an example sequence of events:
  //
  // 1. when you enter the range of the 1st one, you'll get:
  // lobby onEnter
  // lobby onChange with array [beacon1's context]
  //
  // 2. when you enter the range of the 2nd one, and are still in range of the 1st one:
  // lobby onChange with array [beacon1's context, beacon2's context]
  //
  // 3. when you exit the range of the 1st one, but are still in range of the 2nd one:
  // lobby onChange with array [beacon2's context]
  //
  // 4. when you finally exit the range of the 2nd one:
  // lobby onChange with empty array []
  // lobby onExit
  console.log("zone1 onChange", contexts);
};

const zone2 = new RNEP.ProximityZone(5, "france");
zone2.onEnterAction = context => {
  console.log("zone2 onEnter", context);
};
zone2.onExitAction = context => {
  console.log("zone2 onExit", context);
};
zone2.onChangeAction = contexts => {
  console.log("zone2 onChange", contexts);
};

export default class App extends Component<Props> {

  render() {

    RNEP.locationPermission.request().then(
      permission => {
        // `permission` will be one of RNEP.locationPermission.DENIED, .ALWAYS, or .WHEN_IN_USE
        console.log(`location permissionnnnnnnnnnn: ${permission}`);

        if (permission !== RNEP.locationPermission.DENIED) {
          // generate Estimote Cloud credentials for your app at:
          // https://cloud.estimote.com/#/apps/add/your-own-app
          const credentials = new RNEP.CloudCredentials(
            "bigrichman-m6c",
            "9fcb4ff6f246eb087698eda0b4edce0a"
          );
          console.log('#87');
          const config = {
            // modern versions of Android require a notification informing the user that the app is active in the background
            // if you don't need proximity observation to work in the background, you can omit the entire `notification` config
            //
            // see also: "Background support" section in the README
            notification: {
              title: "Exploration mode is on",
              text: "We'll notify you when you're next to something interesting.",
              //icon: 'my_drawable', // if omitted, will default to the app icon (i.e., mipmap/ic_launcher)

              // in apps targeting Android API 26, notifications must specify a channel
              // https://developer.android.com/guide/topics/ui/notifiers/notifications#ManageChannels
              channel: {
                id: "exploration-mode",
                name: "Exploration Mode"
              }
            }
          };

          RNEP.proximityObserver.initialize(credentials, config);
          RNEP.proximityObserver.startObservingZones([zone1, zone2]);
          console.log('#109');
        }
      },
      error => {
        console.error("Error when trying to obtain location permission", error);
      }
    );

    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>XXX Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Also see below for the version information:

"dependencies": {
    "@estimote/react-native-proximity": "^0.4.1",
    "react": "16.6.0-alpha.8af6728",
    "react-native": "0.57.3"
  },

The output looks like:

location permissionnnnnnnnnnn: always
#87
#109