[0.56.0-rc.2] Animated.createAnimatedComponent causes undefined is not an object (_this_.setComponentref.bind)

[xzilja]

• 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

Description

Update to 0.56.0-rc.2 resulted in error shown below. I believe it is related to usage of Animated.Image or Animated.createAnimatedComponent that wraps something containing <Image />

UPDATE: Likely related to something being undefined here? https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/createAnimatedComponent.js#L39

Environment

React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.5
      CPU: x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
      Memory: 149.57 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.4.0 - /usr/local/bin/node
      Yarn: 1.7.0 - /usr/local/bin/yarn
      npm: 6.1.0 - /usr/local/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.3.2 => 16.3.2 
      react-native: 0.56.0-rc.2 => 0.56.0-rc.2 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Reproducible Demo

Initiate new native project

react-native init --version 0.56.0-rc.2 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,
  },
});

[elicwhite]

Your repro is not a small example that we can use to reproduce the problem. Your code snippet seems to rely on a lot of code from your project. A very simple example that only requires core components would be helpful for us to track down the problem.

[xzilja]

@TheSavior updated 👍

[elicwhite]

I created a new project with react-native init with 0.56.0-rc.2, replaced App.js with your example and was unable to reproduce the error. Can you confirm that it repros in a brand new project?

[xzilja]

@TheSavior Definitely is, I updated my question. Error seems to be related to animated image component, my previous example used Animated.View, is there a chance thats the one you tested?

[kelset]

👋 @iljadaderko quick side question, since now the repro steps have a "smaller footprint", would you mind creating a git repo with the proj that follows those steps?

So that we can, like, just download it, run it and repro the error? Still, thanks for pinpointing which file is related to it!

[xzilja]

@kelset sure thing, just made this repo, ran in my ios sim and got the issue

https://github.com/IljaDaderko/react-native--19763

[pietro909]

In our codebase, we didn't have this error using babel-preset-react-native@5.0.1 as explained in the docs for the upgrade.

As soon as I explicitly used Babel 7.0.0 in our project, we ran into this issue.

I hope this can help.

[kelset]

👋 @iljadaderko, I just tested your code and repo with rc.4 and rc.5 but I wasn't able to get the crash. I guess it's been fixed then - could you give it a go and close the issue if that's the case for you?

Here's the small repo where I tested it: https://github.com/kelset/rn56-testupdate/tree/test-image-crash

[xzilja]

I just updated to 0.56 release and the issue is no longer there, good work guys!

[thientnc-ibl]

I got this error after upgraded to react-native 0.56.
This is my package.json and .babelrc

Is this error's cause related with babel plugin decorator?

[kelset]

@thientnc-ibl Have you tried with the babel preset 5.0.2?

[alessandro-bottamedi]

@thientnc-ibl try to add "@babel/runtime": "7.0.0-beta.47" to devDependencies in package.json

[thientnc-ibl]

@kelset , @alessandro-bottamedi
Thank guys. I'm trying both your solutions. BUT it still not resolved. Of course, I also run watch man clean and reset-cache command.

[kelset]

Then I have to ask you to create a small repro repository in order to help you with it, because as I linked above I wasn't able to reproduce this issue.

[thientnc-ibl]

@kelset
I see you repo just used 0.56.0-rc.5. Can you change it to 0.56.0 release and add mobx library. My project uses mobx with decorator syntax, so that i must use babel/plugin-proposal-decorators

[alessandro-bottamedi]

my .bablerc file:

{
  "presets": [
    "react-native"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-transform-runtime", {
      "helpers": true,
      "polyfill": false,
      "regenerator": false
    }]
  ]
}

all working in RN 0.56.0 & Mobx 5.0.3

[thientnc-ibl]

@alessandro-bottamedi
Hooray, I used your .babelrc and it worked. Now i'm running the release mode. Hope it is also OK.

[sunnyworld2009]

@alessandro-bottamedi I ran in the same issue once I tried creating my react-native app with same codebase of buiseness layer as already developed web app. I tried using your .babelrc but still no luck.

My package.json-

[alessandro-bottamedi]

@sunnyworld2009 all babel packages must be at version "7.0.0-beta-47", anyway follow this issue: #20150 , there is a better workaround for this problem.