Skip to content
Permalink
Browse files
Animated: Forward Ref to Component
Summary:
Changes `createAnimatedComponent` so that a `ref` assigned to an Animated component will now be forwarded to the internal component. Previously, a ref to the internal component was accessed using the `getNode` method. The `getNode` method is now deprecated and will return the same `ref` but show a deprecation error.

Changelog:
[General] [Changed] - Refs on an Animated component are now the internal component. The `getNode` call has been deprecated.

Reviewed By: TheSavior

Differential Revision: D18290474

fbshipit-source-id: 5849809583a17624a89071db8be1282a12caedf3
  • Loading branch information
yungsters authored and facebook-github-bot committed Nov 4, 2019
1 parent 894ee72 commit 66e72bb4e00aafbcb9f450ed5db261d98f99f82a
Showing 6 changed files with 311 additions and 317 deletions.
@@ -95,51 +95,33 @@ describe('Animated tests', () => {
});

it('does not detach on updates', () => {
const anim = new Animated.Value(0);
anim.__detach = jest.fn();
const opacity = new Animated.Value(0);
opacity.__detach = jest.fn();

const c = new Animated.View();
c.props = {
style: {
opacity: anim,
},
};
c.UNSAFE_componentWillMount();
const root = TestRenderer.create(<Animated.View style={{opacity}} />);
expect(opacity.__detach).not.toBeCalled();

expect(anim.__detach).not.toBeCalled();
c._component = {};
c.UNSAFE_componentWillReceiveProps({
style: {
opacity: anim,
},
});
expect(anim.__detach).not.toBeCalled();
root.update(<Animated.View style={{opacity}} />);
expect(opacity.__detach).not.toBeCalled();

c.componentWillUnmount();
expect(anim.__detach).toBeCalled();
root.unmount();
expect(opacity.__detach).toBeCalled();
});

it('stops animation when detached', () => {
const anim = new Animated.Value(0);
const opacity = new Animated.Value(0);
const callback = jest.fn();

const c = new Animated.View();
c.props = {
style: {
opacity: anim,
},
};
c.UNSAFE_componentWillMount();
const root = TestRenderer.create(<Animated.View style={{opacity}} />);

Animated.timing(anim, {
Animated.timing(opacity, {
toValue: 10,
duration: 1000,
useNativeDriver: false,
}).start(callback);
c._component = {};
c.componentWillUnmount();

expect(callback).toBeCalledWith({finished: false});
root.unmount();

expect(callback).toBeCalledWith({finished: false});
});

@@ -198,15 +180,15 @@ describe('Animated tests', () => {
<Animated.View style={{opacity}} />,
);

expect(testRenderer.toJSON()).toMatchSnapshot();
expect(testRenderer.toJSON().props.style.opacity).toEqual(0);

Animated.timing(opacity, {
toValue: 1,
duration: 0,
useNativeDriver: false,
}).start();

expect(testRenderer.toJSON()).toMatchSnapshot();
expect(testRenderer.toJSON().props.style.opacity).toEqual(1);
});

it('warns if `useNativeDriver` is missing', () => {

0 comments on commit 66e72bb

Please sign in to comment.