React Native babelHelpers.asyncToGenerator is not a function (react-native 0.44.0)

-

I am new to react/react-native/babel world. I am trying to make async/await work.

package.json

{
  "name": "App",
  "version": "0.0.5",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "0.44.0",
    "react-native-fs": "^2.3.3"
  },
  "devDependencies": {
    "babel-jest": "20.0.3",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-preset-react-native": "1.9.2",
    "babel-preset-stage-3": "^6.24.1",
    "jest": "20.0.3",
    "react-test-renderer": "16.0.0-alpha.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

.babelrc

{
  "presets": ["react-native", "babel-preset-stage-3"],
  "plugins": ["transform-async-to-generator"]
}

I tried different ways and at some point it seemed to work on the emulator, though it never worked on a real device. And now it doesn't work on either. I get:

babelHelpers.asyncToGenerator is not a function

I checked out everything including github ticket related to this problem and stackoverflow question (my question is not a duplicate as it's been awhile and I use different react-native version). None of it worked for me.

My question

So what would be a proper and most up-to-date way to enable async/await on React Native app?

install babel-preset-react-native-stage-0 and remove your babel-stage-3 preset Then you need to build / start your react app with --reset-cache option, and you should be good to go

Comments

Post a Comment

Popular posts from this blog

Meaning of `{}` for return expression

-
15 1 I found by accident that the following compiles: #include <string> #include <iostream> class A{ int i{}; std::string s{}; public: A(int _i, const std::string& _s) : i(_i), s(_s) { puts("Called A(int, const std::string)"); } }; A foo(int k, const char* cstr){ return {k, cstr}; // (*) } int main(){ auto a = foo(10, "Hi!"); return 0; } The line of interest is (*). I guess the function foo is equivalent to: A foo(int k, const char* str){ return A(k, cstr); } However, is there a special name for this mechanism in (*)? Or is it just the simple fact that the compiler knows which constructor to call due to the return type? ...
Read more

Get current scroll position of ScrollView in React Native

-
Is it possible to get the current scroll position, or the current page of a <ScrollView> component in React Native? So something like: <ScrollView horizontal={true} pagingEnabled={true} onScrollAnimationEnd={() => { // get this scrollview's current page or x/y scroll position }}> this.state.data.map(function(e, i) { <ImageCt key={i}></ImageCt> }) </ScrollView> Try. <ScrollView onScroll={this.handleScroll} /> And then: handleScroll: function(event: Object) { console.log(event.nativeEvent.contentOffset.y); }, Disclaimer: what follows is primarily the result of my own experimentation in React Native 0.50. The ScrollView documentation is currently missing a lot of the information covered below; for instance onScrollEndDrag is completely undocumented. Since everything here relies upon undocumented behaviour, I can unfortunately make no promises that this information will remain correct a ...
Read more

React Native - Image Cache

-
I read the document about the React Native image component in this site and got some questions: https://facebook.github.io/react-native/docs/image.html If I use the source property to display image. Will the image be cached and save to disk after download? If yes, what is the cache policy? If I want to save the downloaded image to disk. Is it better to use getSize or prefetch method to do it? Many thanks. React native image component NSURLRequest's cache policy as described here. Personally I use RNFetchBlob to cache images as described here. You can also checkout this component. You may be interested in my higher order component module that adds performance related image caching and "permanent cache" functionality to the native <Image> component. React Native Image Cache HOC Tl;DR Code Example: import imageCacheHoc from 'react-native-image-cache-hoc'; const CacheableImage = imageCacheHoc(Image); export default class App ex...
Read more