Cannot read property 'bind' of undefined / 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.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,
  },
});

[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

[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.