Skip to content

Commit

Permalink
Verify that the component passed to createAnimatedComponent is not fu…
Browse files Browse the repository at this point in the history
…nctional

Summary:
Stateless functional components don't support refs and we need that for the component to work, it used to crash with this error message: `undefined is not an object (evaluating 'this._component.getScrollableNode')`. This makes it clear what the issue is.

Fixes some of the errors in #10635, not sure if it fixes all the cases described in the issue though.

**Test plan**
Tested that passing a component with createClass or extends Component works but passing a function causes an error.

[GENERAL] [ENHANCEMENT] [Animated] - Verify that the component passed to createAnimatedComponent is not functional
Closes #15019

Differential Revision: D6988096

Pulled By: sahrens

fbshipit-source-id: ec0ffa763245e786f44b4a1d56c0738876c25782
  • Loading branch information
janicduplessis authored and facebook-github-bot committed Feb 14, 2018
1 parent 7d20de4 commit 10b642a
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 3 deletions.
9 changes: 6 additions & 3 deletions Libraries/Animated/src/__tests__/AnimatedNative-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,14 @@
*/
'use strict';

const ClassComponentMock = class {};
ClassComponentMock.prototype.isReactComponent = true;

jest
.clearAllMocks()
.setMock('Text', {})
.setMock('View', {})
.setMock('Image', {})
.setMock('Text', ClassComponentMock)
.setMock('View', ClassComponentMock)
.setMock('Image', ClassComponentMock)
.setMock('React', {Component: class {}})
.setMock('NativeModules', {
NativeAnimatedModule: {},
Expand Down
9 changes: 9 additions & 0 deletions Libraries/Animated/src/createAnimatedComponent.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,16 @@ const AnimatedProps = require('./nodes/AnimatedProps');
const React = require('React');
const ViewStylePropTypes = require('ViewStylePropTypes');

const invariant = require('fbjs/lib/invariant');

function createAnimatedComponent(Component: any): any {
invariant(
typeof Component === 'string' ||
(Component.prototype && Component.prototype.isReactComponent),
'`createAnimatedComponent` does not support stateless functional components; ' +
'use a class component instead.',
);

class AnimatedComponent extends React.Component<Object> {
_component: any;
_invokeAnimatedPropsCallbackOnMount: boolean = false;
Expand Down

0 comments on commit 10b642a

Please sign in to comment.