Support for asynchronous iterators (async for of)

Asynchronous iterators and generators (aka await for ... of) are available as part of ES2018. How can I use it in a react-native app? Currently there is no metro support for them.

Example:

// generator
 async function* gen() {
     yield 'a';
     yield 'b';
     return 2;
 }

// consumer
try {
    for await (const t of gen()) {
        console.log(t)
    }
}
catch(err) {
    console.log("err", err);
}

Any suggestion to workaround the issue is welcome. I could not find anything for using them.

Thanks

[newyankeecodeshop]

@berdyshev I was able to figure out what was going wrong. That error is due to an error in the @babel/plugin-transform-for-of plugin. It (mistakenly) tries to convert for await of statements with the same code as for of, and uses the wrong iterator property accessor.

I was able to workaround the problem by adding @babel/plugin-proposal-async-generator-functions to my babel.config.js.

[JSonicV]

@ls-andrew-goodale It is from Generators, which are massively used in SocketCluster to listen and consume events. Mixing all the solutions here proposed, I solved the problem for IOS. For Android, instead, it persits and I can’t figure out why… I add package.json, hoping it could be useful

{
  "name": "myapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/netinfo": "6.0.2",
    "@react-native-firebase/app": "^12.8.0",
    "@react-native-firebase/messaging": "^12.8.0",
    "@react-navigation/native": "^6.0.4",
    "@types/socketcluster-client": "^15.1.5",
    "axios": "^0.21.0",
    "expo": "^42.0.0",
    "expo-splash-screen": "^0.11.4",
    "expo-sqlite": "~9.2.1",
    "expo-status-bar": "^1.0.0",
    "expo-updates": "^0.8.5",
    "lodash": "^4.17.15",
    "moment": "^2.27.0",
    "moment-timezone": "^0.5.31",
    "native-base": "^3.2.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.65.1",
    "react-native-fix-image": "^2.1.0",
    "react-native-gesture-handler": "~1.10.3",
    "react-native-google-signin": "^2.1.1",
    "react-native-modal": "^13.0.0",
    "react-native-reanimated": "2.3.0-alpha.3",
    "react-native-rename": "^2.5.0",
    "react-native-safe-area-context": "~3.3.2",
    "react-native-screens": "~3.7.2",
    "react-native-simple-toast": "^1.1.2",
    "react-native-unimodules": "~0.14.8",
    "react-native-web": "~0.17.1",
    "react-navigation": "^4.4.4",
    "react-navigation-drawer": "^2.7.0",
    "react-navigation-header-buttons": "^9.0.0",
    "react-navigation-stack": "^2.10.0",
    "react-navigation-tabs": "^2.11.0",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "socketcluster-client": "^16.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/plugin-proposal-async-generator-functions": "^7.15.4",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^3.0.1",
    "@types/jest": "^27.0.2",
    "@types/react-native": "^0.65.0",
    "@types/react-test-renderer": "^17.0.1",
    "babel-jest": "^27.2.1",
    "eslint": "^7.14.0",
    "jest": "^27.2.1",
    "metro-react-native-babel-preset": "^0.66.0",
    "react-native-codegen": "^0.0.8",
    "react-test-renderer": "17.0.2",
    "typescript": "^4.4.3"
  },
  "resolutions": {
    "@types/react": "^17"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}