Cannot read property 'bind' of undefined / undefined is not an object evaluating _this._setComponentRef.bind

[tibbus]

• 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.6
      CPU: x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
      Memory: 1.93 GB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.11.2 - ~/.nvm/versions/node/v8.11.2/bin/node
      Yarn: 1.12.1 - ~/.nvm/versions/node/v8.11.2/bin/yarn
      npm: 5.6.0 - ~/.nvm/versions/node/v8.11.2/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
    IDEs:
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728 
      react-native: 0.57.4 => 0.57.4 
    npmGlobalPackages:
      react-native-cli: 2.0.1

Description

With the latest react-native cli (2.0.1) when using TouchableOpacity, the app crash and throws an error:
TypeError: Cannot read property 'bind' of undefined
This error is located at:
in AnimatedComponent (at TouchableOpacity.js:256)

Reproducible Demo

Using react-native init, I have added only a simple TouchableOpacity inside the code :

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component{
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
        <TouchableOpacity onPress={() => {console.log('touched')}}>
         <Text> Touch Here </Text>
       </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

[kristerkari]

I tried creating a new 0.57.4 app using react-init and when I use TouchableOpacity (the same way you do in your demo) it is working fine for me:

[tibbus]

My initial error is with the js debugging active, without the debugger the error is : undefined is not an object evaluating _this._setComponentRef.bind which is found in more react-native issues :
#21430
#20588
#21055
#21430
oblador/react-native-animatable#225
#20150

Nothing from the solutions worked for me.
There is a weird babel / metro cache going on and I don't know how to reset it, there was nothing in my /tmp/... folder , the only way to solve is to restart the pc.

[ger86]

I have the same problem and I have resolved it rebooting my computer and adding this babel plugin: @babel/plugin-transform-flow-strip-types

But I am sure that is a cache issue, because since RN 57.4 sometimes my iOS simulator cannot update changes done to the source code like if the metro/watchman can't detect those changes....

[maitriyogin]

I get the same but use typescript! I'll try with the @babel/plugin-transform-flow-strip-types plugin ... feels a bit strange

[johhansantana]

Getting someowhat the same error.

babel.config.js:

module.exports = {
  presets: ["babel-preset-expo"],
  plugins: [
    ["@babel/plugin-transform-flow-strip-types"],
    [
      "@babel/plugin-proposal-class-properties",
      {
        loose: true
      }
    ]
  ]
};

I'm using expo with typescript

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "importHelpers": true,
    "jsx": "react-native",
    "lib": ["dom", "es2015", "es2016", "es2017"],
    "module": "es2015",
    "moduleResolution": "node",
    "noEmitHelpers": true,
    "noImplicitReturns": true,
    "noImplicitAny": false,
    "noUnusedLocals": true,
    "skipLibCheck": true, // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/24573
    "sourceMap": false,
    "strict": true,
    "target": "es2017"
  },
  "exclude": ["node_modules"],
  "types": ["typePatches"]
}

[pooyakn]

I have the exact same problem with new react native project and a touchable opacity component on windows 10.
I don't know how, but the exact same code runs fine on Linux (Opensuse Leap 42.3).
Also react navigation throws a similar error. It's frustrating.

[xuan9]

Workaround by removing the following plugins from .babelrc:
["@babel/plugin-proposal-decorators", { "legacy": true }]
,["@babel/plugin-proposal-class-properties", { "loose" : true }]

The plugins were used by mobx decorators, now converted to a no-decorator style.

https://mobx.js.org/best/decorators.html

[kelset]

Hello there 👋 this issue seems to have been inactive for the past few months. Because of this, it's likely that the issue has been solved; for this reason, we'll close it.

But please, if it's actually still an issue with 0.59 please comment below and we can reopen it or please send us a Pull Request with a fix 😊

Also, this is most likely related to metro, so probably it would be better to open a dedicated issue in its repo.

[LucasHimelfarb]

if they write " this.nameFunction = this.nameFunction.bind(this) " being these same arrow functions, this error occurs.

this is given that if we define a function as an arrow, it is included in the environment