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

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info: System: OS: macOS High Sierra 10.13.5 CPU: x64 Intel® Core™ i7-4870HQ CPU @ 2.50GHz Memory: 802.04 MB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 8.10.0 - ~/.nvm/v8.10.0/bin/node Yarn: 1.9.2 - /usr/local/bin/yarn npm: 5.6.0 - ~/.nvm/v8.10.0/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3 Android SDK: Build Tools: 23.0.1, 25.0.0, 25.0.2, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.2, 27.0.3, 28.0.0 API Levels: 23, 24, 25, 26, 27 IDEs: Android Studio: 3.1 AI-173.4670197 Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild npmPackages: react: 16.4.1 => 16.4.1 react-native: 0.56.0 => 0.56.0 npmGlobalPackages: react-native-git-upgrade: 0.2.7

Description

I recently upgraded my project from RN 0.55.2 to RN 0.56.0 and ran into following error. I was able to track it down to Animated.View. It first appeared in a library that I was using (react-navigation), but I was able to reproduce it with just a single item.

I noticed that earlier in RN 0.56.0 there were similar errors:

• https://github.com/facebook/react-native/issues/19763

I tried to solve the problem using some of the linked solutions and was not able to make any progress.

Could there be an issue with https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/createAnimatedComponent.js#L39 due to babel 7 changes?

TypeError: undefined is not an object (evaluating '_this._setComponentRef.bind')

This error is located at:
    in AnimatedComponent (at App.js:7)
    in App (at renderApplication.js:32)
    in RCTView (at View.js:43)
    in RCTView (at View.js:43)
    in AppContainer (at renderApplication.js:31)

AnimatedComponent
    index.bundle?platform=ios&dev=true&minify=false:45418:56
constructClassInstance
    index.bundle?platform=ios&dev=true&minify=false:20994:32
updateClassComponent
    index.bundle?platform=ios&dev=true&minify=false:22561:35
performUnitOfWork
    index.bundle?platform=ios&dev=true&minify=false:25090:27
workLoop
    index.bundle?platform=ios&dev=true&minify=false:25123:47
renderRoot
    index.bundle?platform=ios&dev=true&minify=false:25156:21
performWorkOnRoot
    index.bundle?platform=ios&dev=true&minify=false:25717:23
performWork
    index.bundle?platform=ios&dev=true&minify=false:25649:30
performSyncWork
    index.bundle?platform=ios&dev=true&minify=false:25624:20
requestWork
    index.bundle?platform=ios&dev=true&minify=false:25530:26
scheduleWork
    index.bundle?platform=ios&dev=true&minify=false:25392:28
scheduleRootUpdate
    index.bundle?platform=ios&dev=true&minify=false:25920:21
render
    index.bundle?platform=ios&dev=true&minify=false:26375:26
renderApplication
    index.bundle?platform=ios&dev=true&minify=false:64535:59
run
    index.bundle?platform=ios&dev=true&minify=false:64209:28
runApplication
    index.bundle?platform=ios&dev=true&minify=false:64259:28
__callFunction
    index.bundle?platform=ios&dev=true&minify=false:2630:49
<unknown>
    index.bundle?platform=ios&dev=true&minify=false:2407:31
__guard
    index.bundle?platform=ios&dev=true&minify=false:2583:15
callFunctionReturnFlushedQueue
    index.bundle?platform=ios&dev=true&minify=false:2406:21

Reproducible Demo

https://github.com/reedyrm/react-native-bind-undefined/tree/broken-animated-view

[krzysztof-miemiec]

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

[tcodes0]

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