Skip to content

Commit 86d90c0

Browse files
yungstersfacebook-github-bot
authored andcommitted
Animated: Minor createAnimatedComponent Cleanup
Summary: Some minor cleanup to `createAnimatedComponent`: - Remove deprecated `propTypes`. - Reorder lifecycle methods in rough order of execution. Changelog: [General] [Removed] - Removed `propTypes` from Animated components. Reviewed By: TheSavior Differential Revision: D18289773 fbshipit-source-id: f97d9ee4a2a42d210726267506de3b6b78860e8c
1 parent dcd6307 commit 86d90c0

File tree

1 file changed

+38
-68
lines changed

1 file changed

+38
-68
lines changed

Libraries/Animated/src/createAnimatedComponent.js

+38-68
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
const {AnimatedEvent} = require('./AnimatedEvent');
1414
const AnimatedProps = require('./nodes/AnimatedProps');
1515
const React = require('react');
16-
const DeprecatedViewStylePropTypes = require('../../DeprecatedPropTypes/DeprecatedViewStylePropTypes');
1716

1817
const invariant = require('invariant');
1918

@@ -42,33 +41,6 @@ function createAnimatedComponent<Props, Instance>(
4241
_propsAnimated: AnimatedProps;
4342
_eventDetachers: Array<Function> = [];
4443

45-
constructor(props: Object) {
46-
super(props);
47-
}
48-
49-
componentWillUnmount() {
50-
this._propsAnimated && this._propsAnimated.__detach();
51-
this._detachNativeEvents();
52-
}
53-
54-
setNativeProps(props) {
55-
this._component.setNativeProps(props);
56-
}
57-
58-
UNSAFE_componentWillMount() {
59-
this._attachProps(this.props);
60-
}
61-
62-
componentDidMount() {
63-
if (this._invokeAnimatedPropsCallbackOnMount) {
64-
this._invokeAnimatedPropsCallbackOnMount = false;
65-
this._animatedPropsCallback();
66-
}
67-
68-
this._propsAnimated.setNativeView(this._component);
69-
this._attachNativeEvents();
70-
}
71-
7244
_attachNativeEvents() {
7345
// Make sure to get the scrollable node for components that implement
7446
// `ScrollResponder.Mixin`.
@@ -144,18 +116,19 @@ function createAnimatedComponent<Props, Instance>(
144116
oldPropsAnimated && oldPropsAnimated.__detach();
145117
}
146118

147-
UNSAFE_componentWillReceiveProps(newProps) {
148-
this._attachProps(newProps);
119+
_setComponentRef = c => {
120+
this._prevComponent = this._component;
121+
this._component = c;
122+
};
123+
124+
// A third party library can use getNode()
125+
// to get the node reference of the decorated component
126+
getNode() {
127+
return this._component;
149128
}
150129

151-
componentDidUpdate(prevProps) {
152-
if (this._component !== this._prevComponent) {
153-
this._propsAnimated.setNativeView(this._component);
154-
}
155-
if (this._component !== this._prevComponent || prevProps !== this.props) {
156-
this._detachNativeEvents();
157-
this._attachNativeEvents();
158-
}
130+
setNativeProps(props) {
131+
this._component.setNativeProps(props);
159132
}
160133

161134
render() {
@@ -175,42 +148,39 @@ function createAnimatedComponent<Props, Instance>(
175148
);
176149
}
177150

178-
_setComponentRef = c => {
179-
this._prevComponent = this._component;
180-
this._component = c;
181-
};
151+
UNSAFE_componentWillMount() {
152+
this._attachProps(this.props);
153+
}
182154

183-
// A third party library can use getNode()
184-
// to get the node reference of the decorated component
185-
getNode() {
186-
return this._component;
155+
componentDidMount() {
156+
if (this._invokeAnimatedPropsCallbackOnMount) {
157+
this._invokeAnimatedPropsCallbackOnMount = false;
158+
this._animatedPropsCallback();
159+
}
160+
161+
this._propsAnimated.setNativeView(this._component);
162+
this._attachNativeEvents();
187163
}
188-
}
189164

190-
// $FlowFixMe We don't want people using propTypes so we don't include it in the type
191-
const propTypes = Component.propTypes;
165+
UNSAFE_componentWillReceiveProps(newProps) {
166+
this._attachProps(newProps);
167+
}
192168

193-
AnimatedComponent.propTypes = {
194-
style: function(props, propName, componentName) {
195-
if (!propTypes) {
196-
return;
169+
componentDidUpdate(prevProps) {
170+
if (this._component !== this._prevComponent) {
171+
this._propsAnimated.setNativeView(this._component);
197172
}
198-
199-
for (const key in DeprecatedViewStylePropTypes) {
200-
if (!propTypes[key] && props[key] !== undefined) {
201-
console.warn(
202-
'You are setting the style `{ ' +
203-
key +
204-
': ... }` as a prop. You ' +
205-
'should nest it in a style object. ' +
206-
'E.g. `{ style: { ' +
207-
key +
208-
': ... } }`',
209-
);
210-
}
173+
if (this._component !== this._prevComponent || prevProps !== this.props) {
174+
this._detachNativeEvents();
175+
this._attachNativeEvents();
211176
}
212-
},
213-
};
177+
}
178+
179+
componentWillUnmount() {
180+
this._propsAnimated && this._propsAnimated.__detach();
181+
this._detachNativeEvents();
182+
}
183+
}
214184

215185
return AnimatedComponent;
216186
}

0 commit comments

Comments
 (0)