New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
IljaDaderko opened this Issue Jun 16, 2018 · 19 comments

Comments

Projects
None yet
9 participants
@IljaDaderko

IljaDaderko commented Jun 16, 2018

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

simulator screen shot - iphone 7 - 2018-06-18 at 07 41 15

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,
  },
});

@IljaDaderko IljaDaderko changed the title from [0.56.0-rc] Animated.Image causes undefined is not an object (_this_.setComponentref.bind) to [0.56.0-rc2] Animated.Image causes undefined is not an object (_this_.setComponentref.bind) Jun 17, 2018

@IljaDaderko IljaDaderko changed the title from [0.56.0-rc2] Animated.Image causes undefined is not an object (_this_.setComponentref.bind) to [0.56.0-rc.2] Animated.Image causes undefined is not an object (_this_.setComponentref.bind) Jun 17, 2018

@IljaDaderko IljaDaderko changed the title from [0.56.0-rc.2] Animated.Image causes undefined is not an object (_this_.setComponentref.bind) to [0.56.0-rc.2] Animated.createAnimatedComponent causes undefined is not an object (_this_.setComponentref.bind) Jun 17, 2018

@TheSavior

This comment has been minimized.

Member

TheSavior commented Jun 18, 2018

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.

@IljaDaderko

This comment has been minimized.

IljaDaderko commented Jun 18, 2018

@TheSavior updated 👍

@TheSavior

This comment has been minimized.

Member

TheSavior commented Jun 18, 2018

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?

@IljaDaderko

This comment has been minimized.

IljaDaderko commented Jun 18, 2018

@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

This comment has been minimized.

Collaborator

kelset commented Jun 21, 2018

👋 @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!

@IljaDaderko

This comment has been minimized.

IljaDaderko commented Jun 21, 2018

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

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

@pietro909

This comment has been minimized.

pietro909 commented Jun 22, 2018

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

This comment has been minimized.

Collaborator

kelset commented Jul 4, 2018

👋 @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

@IljaDaderko

This comment has been minimized.

IljaDaderko commented Jul 7, 2018

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

@IljaDaderko IljaDaderko closed this Jul 7, 2018

@thientnc-ibl

This comment has been minimized.

thientnc-ibl commented Jul 9, 2018

I got this error after upgraded to react-native 0.56.
This is my package.json and .babelrc
screen shot 2018-07-09 at 11 42 52 am
screen shot 2018-07-09 at 11 43 06 am

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

@thientnc-ibl thientnc-ibl referenced this issue Jul 9, 2018

Open

Bundle failure on decorators #19955

3 of 3 tasks complete
@kelset

This comment has been minimized.

Collaborator

kelset commented Jul 9, 2018

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

@alessandro-bottamedi

This comment has been minimized.

alessandro-bottamedi commented Jul 9, 2018

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

@thientnc-ibl

This comment has been minimized.

thientnc-ibl commented Jul 9, 2018

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

screen shot 2018-07-09 at 4 00 52 pm

@kelset

This comment has been minimized.

Collaborator

kelset commented Jul 9, 2018

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

This comment has been minimized.

thientnc-ibl commented Jul 9, 2018

@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

This comment has been minimized.

alessandro-bottamedi commented Jul 9, 2018

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

This comment has been minimized.

thientnc-ibl commented Jul 9, 2018

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

@sunnyworld2009

This comment has been minimized.

sunnyworld2009 commented Jul 16, 2018

@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-
image

@alessandro-bottamedi

This comment has been minimized.

alessandro-bottamedi commented Jul 16, 2018

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

@facebook facebook locked as resolved and limited conversation to collaborators Jul 18, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.