[0.56.0-rc.2] Animated.createAnimatedComponent causes undefined is not an object (_this_.setComponentref.bind) #19763
Description
- 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, }, });