React-native: [0.57.0-rc.4] TypeError: undefined is not an object (evaluating '_this._setComponentRef.bind')

Created on 11 Sep 2018  路  7Comments  路  Source: facebook/react-native

Environment

React Native Environment Info:

System:
  OS: Linux 4.15 Linux Mint 18.3 (Sylvia)
  CPU: x64 Intel(R) Core(TM) i7-3610QM CPU @ 2.30GHz
  Memory: 700.16 MB / 15.49 GB
  Shell: 4.3.48 - /bin/bash
Binaries:
  Node: 9.3.0 - ~/.nvm/versions/node/v9.3.0/bin/node
  npm: 6.4.0 - ~/.nvm/versions/node/v9.3.0/bin/npm
  Watchman: 4.7.0 - /usr/local/bin/watchman
SDKs:
  Android SDK:
    Build Tools: 23.0.1, 26.0.3, 27.0.3, 28.0.2
    API Levels: 23, 26, 27, 28
IDEs:
  Android Studio: 3.1 AI-173.4907809
npmPackages:
  react: ^16.5.0 => 16.5.0 
  react-native: ^0.57.0-rc.4 => 0.57.0-rc.4 
npmGlobalPackages:
  react-native-git-upgrade: 0.2.7
  react-native-rename: 2.2.2

Description

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

This error is located at:
in AnimatedComponent (at App.js:16)
in RCTView (at View.js:44)
in App (at renderApplication.js:34)
in RCTView (at View.js:44)
in RCTView (at View.js:44)
in AppContainer (at renderApplication.js:33)
AnimatedComponent
index.delta?platform=android&dev=true&minify=false:48076:56
constructClassInstance
index.delta?platform=android&dev=true&minify=false:13274:32
updateClassComponent
index.delta?platform=android&dev=true&minify=false:14820:35
beginWork
index.delta?platform=android&dev=true&minify=false:15282:40
performUnitOfWork
index.delta?platform=android&dev=true&minify=false:17279:27
workLoop
index.delta?platform=android&dev=true&minify=false:17312:47
renderRoot
index.delta?platform=android&dev=true&minify=false:17344:21
performWorkOnRoot
index.delta?platform=android&dev=true&minify=false:17999:23
performWork
index.delta?platform=android&dev=true&minify=false:17922:30
performSyncWork
index.delta?platform=android&dev=true&minify=false:17893:20
requestWork
index.delta?platform=android&dev=true&minify=false:17807:26
scheduleWork
index.delta?platform=android&dev=true&minify=false:17651:22
scheduleRootUpdate
index.delta?platform=android&dev=true&minify=false:18218:21
updateContainerAtExpirationTime
index.delta?platform=android&dev=true&minify=false:18243:34
updateContainer
index.delta?platform=android&dev=true&minify=false:18274:47
render
index.delta?platform=android&dev=true&minify=false:18678:26
renderApplication
index.delta?platform=android&dev=true&minify=false:65775:59
run
index.delta?platform=android&dev=true&minify=false:65450:28
runApplication
index.delta?platform=android&dev=true&minify=false:65500:28
__callFunction
index.delta?platform=android&dev=true&minify=false:2902:49

index.delta?platform=android&dev=true&minify=false:2675:31
__guard
index.delta?platform=android&dev=true&minify=false:2856:15
callFunctionReturnFlushedQueue
index.delta?platform=android&dev=true&minify=false:2674:21

It's look like #19763 and #20588, but nothing tried from theses issues helped me to solve the problem

Thank you for your time :-)

Reproducible Demo

Initiate new native project

react-native init --version 0.57.0-rc.4 TestApp

Use any Animated.Image component inside App.js for example:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Animated} 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',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Animated.Image />
        <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>
      </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,
  },
});
Linux Locked
Source
picture devthejo

Most helpful comment

Try:
"watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf $TMPDIR/metro-* && rm -rf $TMPDIR/haste-* && yarn cache clean"

Worked for me

picture tr3v3r on 16 Jan 2019
🎉3 🚀2 👍2 👀1

All 7 comments

Finally the reproductible exemple is working, that was a cache issue, and I solved the issue in my project using beta.47 version of babel
"@babel/plugin-proposal-class-properties": "^7.0.0-beta.47",
"@babel/plugin-proposal-decorators": "^7.0.0-beta.47",
"@babel/runtime": "^7.0.0-beta.47",

devthejo picture devthejo on 11 Sep 2018

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

krzysztof-miemiec picture krzysztof-miemiec on 21 Sep 2018
👍2

I've tried everything suggested but I still have the same problem.

package.json

"dependencies": {
    "axios": "^0.18.0",
    "formik": "^1.3.1",
    "moment": "^2.22.2",
    "native-base": "^2.8.1",
    "prettier": "^1.14.3",
    "prop-types": "^15.6.2",
    "qs": "^6.5.2",
    "react": "16.6.0-alpha.8af6728",
    "react-native": "^0.57.4",
    "react-native-action-button": "^2.8.5",
    "react-native-android-location-services-dialog-box": "^2.7.0",
    "react-native-calendars": "^1.21.0",
    "react-native-easy-grid": "^0.2.0",
    "react-native-facebook-login": "^1.6.1",
    "react-native-google-places-autocomplete": "^1.3.9",
    "react-native-google-signin": "^0.12.0",
    "react-native-image-crop-picker": "^0.20.3",
    "react-native-image-zoom-viewer": "^2.2.23",
    "react-native-keyboard-aware-scroll-view": "^0.7.4",
    "react-native-linear-gradient": "2.4.0",
    "react-native-loading-spinner-overlay": "^0.5.2",
    "react-native-maps": "^0.22.0",
    "react-native-modal": "^6.5.0",
    "react-native-oauth": "^2.1.18",
    "react-native-scrollable-tab-view": "^0.8.0",
    "react-native-sectioned-multi-select": "^0.5.2",
    "react-native-sentry": "^0.39.1",
    "react-native-simple-auth": "2.4.0",
    "react-native-snap-carousel": "^3.7.5",
    "react-native-sortable-listview": "^0.2.8",
    "react-native-spinkit": "^1.1.1",
    "react-native-swiper": "^1.5.13",
    "react-native-timeline-listview": "^0.2.3",
    "react-native-vector-icons": "^4.6.0",
    "react-navigation": "^2.18.2",
    "react-redux": "^5.1.0",
    "redux": "^4.0.1",
    "redux-axios-middleware": "^4.0.0",
    "tab-view": "^1.0.2",
    "uuid": "^3.3.2",
    "yup": "^0.26.6"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.0.0-beta.47",
    "@babel/plugin-transform-flow-strip-types": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/runtime": "^7.0.0-beta.47",
    "babel-core": "^7.0.0-beta.47",
    "babel-eslint": "^9.0.0",
    "babel-jest": "^23.6.0",
    "babel-plugin-jest-hoist": "^23.2.0",
    "eslint": "^5.8.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.11.1",
    "eslint-plugin-react-native": "^3.5.0",
    "jest": "23.4.1",
    "metro-react-native-babel-preset": "^0.45.0",
    "react-native-dotenv": "^0.2.0",
    "react-test-renderer": "16.6.0-alpha.8af6728"
  },

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"
  ]
};
tomiiide picture tomiiide on 30 Oct 2018

Try:
"watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf $TMPDIR/metro-* && rm -rf $TMPDIR/haste-* && yarn cache clean"

Worked for me

tr3v3r picture tr3v3r on 16 Jan 2019
🎉3 🚀2 👍2 👀1

on windows the temp is located here: C:\Users\YOUR_USERNAME\AppData\Local\Temp\metro-cache, clearing this folder worked for me

kromakollision picture kromakollision on 27 Feb 2019

I got the error 'undefined is not an object (evaluating 'this._callListeners.bind')', any ideias why ?
The error is at StackVIewLayout(at withOrientation.js)

image

An this is my dependencies...I would aprecciate some help 馃憤

image

Foskas picture Foskas on 29 Mar 2019

@Foskas Did you find a solution?

Zloka picture Zloka on 20 Jun 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

upbit picture upbit  路  3Comments
madwed picture madwed  路  3Comments
vikeri picture vikeri  路  3Comments
jlongster picture jlongster  路  3Comments
aniss picture aniss  路  3Comments