react-native: [0.56] undefined is not an object (evaluating '_this._setComponentRef.bind')

I was also struggling for hours with this issue, and the @babel/plugin-transform-flow-strip-types plugin helped. My babel.config.js:

module.exports = {
  'presets': [
    'module:metro-react-native-babel-preset',
    'module:react-native-dotenv',
  ],
  'sourceMaps': true,
  'plugins': [
    '@babel/transform-flow-strip-types',
    '@babel/proposal-class-properties',
    '@babel/proposal-object-rest-spread',
    '@babel/transform-runtime'
  ],
};

Credits for solution to https://github.com/facebook/react-native/issues/20150#issuecomment-417858270

Babel 7 here, react-native 0.57.1. My error looks like this. It started messing with me after I touched my babel config briefly. Trying fixes in thread…

FIXED: added @babel/plugin-transform-flow-strip-types, placed first in plugins array in .babelrc

My .babelrc is also this, and all the dependencies are latest.

{ 
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
        ["@babel/plugin-transform-flow-strip-types"],
        ["@babel/plugin-proposal-decorators", { "legacy": true}],
        ["@babel/plugin-proposal-class-properties", { "loose": true}]
    ]
}

If still wrong, try react-native start --reset-cache that works for me. thanks @seeya

@seeya can you show your .babelrc file? My babel.rc.

{ 
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
        ["@babel/plugin-transform-flow-strip-types"],
        ["@babel/plugin-proposal-decorators", { "legacy": true}],
        ["@babel/plugin-proposal-class-properties", { "loose": true}]
    ]
}

And my version of dependencies are as follows

  "dependencies": {
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "mobx": "^5.5.0",
    "mobx-react": "^5.2.8",
    "mobx-state-tree": "^3.5.0",
    "native-base": "^2.8.1",
    "react": "16.5.0",
    "react-native": "0.57.1",
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.2",
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.48.0",
    "react-test-renderer": "16.5.0"
  }

If fails, react-native start --reset-cache do this. It worked for me.

If tips above do not help, try to clean cache.

How to clean cache

try this

react-native start --reset-cache

these are the steps I have taken to resolve this issue in Windows

1. Close emulator
2. Kill all node.exe proccess
3. remove all files in temp
4. remove node_modules
5. install babel-plugin-transform-flow-strip-types
6. npm install
7. react-native start --reset-cache
8. react-native run-android

The issue seems to be that the definition of the flow type for _setComponentRef not only defines the type but also initializes the value with undefined.

https://github.com/facebook/react-native/blob/288d2fa81a5d21e47f7804c9d4647b4dce27e558/Libraries/Animated/src/createAnimatedComponent.js#L33

This is probably a babel setup error, most likely around@babel/preset-flow and/or @babel/plugin-proposal-class-properties.

EDIT I found this: https://github.com/babel/babel/issues/8417

@aerielcruz I had to replace my .babelrc with babel.config.js, because Jest didn’t play well with Babel 7 using .babelrc. You can check if .babelrc works for you, and if it won’t, try babel.config.js 😉

Babel 7 here, react-native 0.57.1. My error looks like this. It started messing with me after I touched my babel config briefly. Trying fixes in thread…

FIXED: added @babel/plugin-transform-flow-strip-types, placed first in plugins array in .babelrc

i have the problem because of i use ‘react-navigation’, when i remove ‘react-navigation’ its run ok, this is work for me, to add the plugin --> @babel/plugin-transform-flow-strip-types

For iOS,adding @babel/plugin-transform-flow-strip-types and then cleaning the build dir in XCode.

If tips above do not help, try to clean cache.

Same here. Make sure you reset the cache after adding @babel/plugin-transform-flow-strip-types.

$ react-native --version
react-native-cli: 2.0.1
react-native: 0.57.5

.babelrc

{
  "presets": [
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    ["@babel/plugin-transform-flow-strip-types"],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}