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