Import the polkadot-api in React-Native, The error summary

[0xthreebody]

polkadot Api version :

    "@polkadot/api": "^0.33.17",
    "@polkadot/rpc-provider": "^0.33.17"

This React-Native project create way is :
react-native init Project

cd Project
react-native run-android

packages:

"dependencies": {
    "axios": "0.18.0",
    "ethers": "3.0.27",
    "identicon.js": "2.3.2",
    "mobx": "^4.3.1",
    "mobx-react": "5.2.5",
    "moment": "2.22.2",
    "react": "16.4.2",
    "react-native": "0.56.0",
    "react-native-camera": "1.2.0",
    "react-native-modal": "6.5.0",
    "react-native-permissions": "1.1.1",
    "react-native-qrcode-svg": "5.1.0",
    "react-native-sensitive-info": "5.2.4",
    "react-native-snackbar": "0.5.0",
    "react-native-svg": "6.5.2",
    "react-native-vector-icons": "5.0.0",
    "react-navigation": "2.12.1",
    "@polkadot/api": "^0.33.17",
    "@polkadot/rpc-provider": "^0.33.17"
  },
  "devDependencies": {
    "@babel/core": "7.0.0-beta.47",
    "@babel/plugin-proposal-decorators": "7.0.0-beta.47",
    "@babel/plugin-transform-runtime": "7.0.0-beta.47",
    "@babel/runtime": "7.0.0-beta.47",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "23.4.2",
    "babel-plugin-module-resolver": "3.1.1",
    "babel-preset-react-native": "5.0.2",
    "enzyme": "3.5.0",
    "enzyme-adapter-react-16": "1.3.0",
    "eslint-config-rallycoding": "3.2.0",
    "jest": "23.5.0",
    "jsdom": "12.0.0",
    "react-native-mock-render": "0.1.1",
    "react-test-renderer": "16.4.2",
    "rimraf": "^2.6.2"
  },

When I import the @polkadot/api to React Native project. get the error:

error: bundling failed: Error: Unable to resolve module `core-js/modules/es6.regexp.to-string` from `/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/@polkadot/util/logger.js`: Module `core-js/modules/es6.regexp.to-string` does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.

The development server returned response error code: 500

URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false

Body:
{"originModulePath":"/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/@polkadot/util/logger.js","targetModuleName":"core-js/modules/es6.regexp.to-string","message":"Unable to resolve module `core-js/modules/es6.regexp.to-string` from `/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/@polkadot/util/logger.js`: Module `core-js/modules/es6.regexp.to-string` does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.","errors":[{"description":"Unable to resolve module `core-js/modules/es6.regexp.to-string` from `/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/@polkadot/util/logger.js`: Module `core-js/modules/es6.regexp.to-string` does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`."}],"name":"Error","stack":"Error: Unable to resolve module `core-js/modules/es6.regexp.to-string` from `/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/@polkadot/util/logger.js`: Module `core-js/modules/es6.regexp.to-string` does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.\n    at ModuleResolver.resolveDependency (/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:167:1306)\n    at ResolutionRequest.resolveDependency (/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:80:16)\n    at DependencyGraph.resolveDependency (/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/metro/src/node-haste/DependencyGraph.js:237:485)\n    at Object.resolve (/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/metro/src/lib/transformHelpers.js:116:25)\n    at dependencies.map.result (/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/metro/src/DeltaBundler/traverseDependencies.js:298:29)\n    at Array.map (<anonymous>)\n    at resolveDependencies (/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/metro/src/DeltaBundler/traverseDependencies.js:294:16)\n    at /media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/metro/src/DeltaBundler/traverseDependencies.js:159:33\n    at Generator.next (<anonymous>)\n    at step (/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/metro/src/DeltaBundler/traverseDependencies.js:239:307)"}
processBundleResult
    BundleDownloader.java:285
access$200
    BundleDownloader.java:37
onResponse
    BundleDownloader.java:163
execute
    RealCall.java:153
run
    NamedRunnable.java:32
runWorker
    ThreadPoolExecutor.java:1162
run
    ThreadPoolExecutor.java:636
run
    Thread.java:764

[jacogr]

This seems to be a babel 7.2 (as used by API) vs 7-beta issue. We really want these to just work without tweaking, so need to investigate.

EDIT: After reading quite a bit, between the beta and release, things have changed a bit. The recommended solution is to add core-js as an explicit dependency (common & api to follow). Manually adding core-js as a dep seems to do the trick, so it needs to go in.

[jacogr]

Ok, with the above 2 PRs, the initial issues are resolved as of ^0.33.35 onwards. (Some playing in-between trying various options, hence skipping a couple of patch versions along the way)

This includes the original core-js issue and the TextEncoder/Decoder issue. However, it is still not operational on RN as of yet, the environment has some peculiarities. Not out of the woods.

The basic approach is to find the module, a replacement for it on npm, install test. Next issue. (The way RN bundles info from Node-components is very different from the way it does it for the browser, hence having to provide replacements.) This seems to work, by including buffer, util and then we get to "stream"...

Feeling like hitting a brick wall after some iterations over stream and then found this - https://www.npmjs.com/package/node-libs-react-native - it aims to solve exactly the issue we are facing after the initial updates. (I have not yet tried it locally, but it will be the next step to get a sane RN version going).

The App I'm testing is really simple, not great, not useful, but indicates the issues -

export default class App extends React.Component {
  constructor (props) {
    super(props);

    this.createApi();
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
      </View>
    );
  }

  async createApi () {
    this.api = await ApiPromise.create();

    api.rpc.chain.subscribeNewBlock((block) =>
      block && console.log('block #${block.blockNumber')
    );
  }
}

[0xthreebody]

Now, this is error is resolved,
I add "node-libs-react-native": "^1.0.3" , and the "@babel/xxxxxxx": "7.0.0-beta.47" without ^ (if have the "^", will get another error about the version),
now my packages :

"dependencies": {
    "@polkadot/api": "^0.33.25",
    "@polkadot/rpc-provider": "^0.33.25",
    "@polkadot/rpc-core": "^0.33.25",
    "axios": "0.18.0",
    "core-js": "^2.6.0",
    "ethers": "3.0.27",
    "identicon.js": "2.3.2",
    "mobx": "^4.3.1",
    "mobx-react": "5.2.5",
    "moment": "2.22.2",
    "node-libs-react-native": "^1.0.3",
    "react": "16.6.3",
    "react-native": "0.56.0",
    "react-native-camera": "1.2.0",
    "react-native-modal": "6.5.0",
    "react-native-permissions": "1.1.1",
    "react-native-qrcode-svg": "5.1.0",
    "react-native-sensitive-info": "5.2.4",
    "react-native-snackbar": "0.5.0",
    "react-native-svg": "6.5.2",
    "react-native-vector-icons": "5.0.0",
    "react-navigation": "2.12.1"
  },
  "devDependencies": {
    "@babel/core": "^7.2.0",
    "@babel/plugin-proposal-decorators": "7.0.0-beta.47",
    "@babel/plugin-transform-runtime": "7.0.0-beta.47",
    "@babel/runtime": "7.0.0-beta.47",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "23.4.2",
    "babel-plugin-module-resolver": "3.1.1",
    "babel-preset-react-native": "5.0.2",
    "enzyme": "3.5.0",
    "enzyme-adapter-react-16": "1.3.0",
    "eslint-config-rallycoding": "3.2.0",
    "jest": "23.5.0",
    "jsdom": "12.0.0",
    "react-native-mock-render": "0.1.1",
    "react-test-renderer": "16.4.2",
    "rimraf": "^2.6.2",
    "@polkadot/dev": "^0.22.12",
    "@polkadot/ts": "^0.1.43"
  },

But, got another error about "chalk", I am solving it, now. :

undefined is not a function (evaluating 'Object.setPrototypeOf(chalk, Chalk.prototype)')
Chalk
    index.js:39:24
<unknown>
    index.js:226:17
loadModuleImplementation
    require.js:237:12
guardedLoadModule
    require.js:168:36
metroRequire
    require.js:152:20
<unknown>
    logger.js:17:36
loadModuleImplementation
 ......

The polkadot Api v0.33.25, used the "chalk": "^2.4.1",

[0xthreebody]

API feedback color is not needed for the time being, so I removed "chalk" temporarily. Record, solve in the future.

Then got an new error:

[jacogr]

The color/chalk we can remove, it only gets used in the client repo really.

[0xthreebody]

undefined is not a function (evaluating '()type.toUpperCase() + ":").padStart(16)')

Solution for now is:
Polkadot Api file change:

/node_modules/@polkadot/util/logger.js

import _ from "lodash"; 
const type = _.padStart(`${_type.toUpperCase()}:`,16); 

/node_modules/@polkadot/dev/scripts/polkadot-dev-yarn-only.js

import _ from "lodash";
const blank = _.padStart('',75);

Reference : facebook/react-native#18375

[0xthreebody]

Then, Got another issue:

Super expression must either be null or a function
_wrapNativeSuper
    wrapNativeSuper.js:16:26
_wrapNativeSuper
    wrapNativeSuper.js:40:26
<unknown>
    UInt.js:1
loadModuleImplementation
    require.js:237:12
guardedLoadModule
    require.js:168:36
metroRequire
    require.js:152:20
<unknown>
    .....

[0xthreebody]

When to import the @polkadot/keyring have the issue:BASE_MAP.fill(255)

My base-x version: 3.0.5
change the code of: node_moduls/base-x.index.js:13

  // BASE_MAP.fill(255)
  for(let i=0; i < BASE_MAP.length;i++) {
    BASE_MAP[i] = 255
  }

There is only one temporary way.

[0xthreebody]

import @polkadot/ts, got the error:

The development server returned response error code: 500

URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false

Body:
{"type":"InternalError","errors":[],"message":"Metro Bundler has encountered an internal error, please check your terminal error output for more details"}
processBundleResult
    BundleDownloader.java:285
access$200
    BundleDownloader.java:37
onResponse
    BundleDownloader.java:163
execute
    RealCall.java:153
run
    NamedRunnable.java:32
runWorker
    ThreadPoolExecutor.java:1162
run
    ThreadPoolExecutor.java:636
run
    Thread.java:764
``