Skip to content

Commit

Permalink
chore: Update AnimatedStyle __getValue to return an array of objects
Browse files Browse the repository at this point in the history
  • Loading branch information
@gabrieldonadel
gabrieldonadel committed Nov 8, 2022
1 parent 4dbf649 commit c47a9f4
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 59 deletions.
180 changes: 126 additions & 54 deletions Libraries/Animated/__tests__/Animated-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,15 +62,29 @@ describe('Animated tests', () => {
);

expect(node.__getValue()).toEqual({
style: {
backgroundColor: 'red',
opacity: 0,
transform: [{translate: [100, 100]}, {translateX: 100}, {scale: 0}],
shadowOffset: {
width: 0,
height: 0,
style: [
{
backgroundColor: 'red',
opacity: anim,
shadowOffset: {
width: anim,
height: anim,
},
transform: [
{translate: [translateAnim, translateAnim]},
{translateX: translateAnim},
{scale: anim},
],
},
},
{
opacity: 0,
transform: [{translate: [100, 100]}, {translateX: 100}, {scale: 0}],
shadowOffset: {
width: 0,
height: 0,
},
},
],
});

expect(anim.__getChildren().length).toBe(0);
Expand All @@ -84,15 +98,33 @@ describe('Animated tests', () => {
expect(callback).toBeCalled();

expect(node.__getValue()).toEqual({
style: {
backgroundColor: 'red',
opacity: 0.5,
transform: [{translate: [150, 150]}, {translateX: 150}, {scale: 0.5}],
shadowOffset: {
width: 0.5,
height: 0.5,
style: [
{
backgroundColor: 'red',
opacity: anim,
shadowOffset: {
width: anim,
height: anim,
},
transform: [
{translate: [translateAnim, translateAnim]},
{translateX: translateAnim},
{scale: anim},
],
},
},
{
opacity: 0.5,
transform: [
{translate: [150, 150]},
{translateX: 150},
{scale: 0.5},
],
shadowOffset: {
width: 0.5,
height: 0.5,
},
},
],
});

node.__detach();
Expand Down Expand Up @@ -173,15 +205,15 @@ describe('Animated tests', () => {
<Animated.View style={{opacity}} />,
);

expect(testRenderer.toJSON().props.style.opacity).toEqual(0);
expect(testRenderer.toJSON().props.style[1].opacity).toEqual(0);

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

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

it('warns if `useNativeDriver` is missing', () => {
Expand Down Expand Up @@ -804,30 +836,40 @@ describe('Animated tests', () => {
describe('Animated Vectors', () => {
it('should animate vectors', () => {
const vec = new Animated.ValueXY();
const vecLayout = vec.getLayout();
const opacity = vec.x.interpolate({
inputRange: [0, 42],
outputRange: [0.2, 0.8],
});

const callback = jest.fn();

const node = new AnimatedProps(
{
style: {
opacity: vec.x.interpolate({
inputRange: [0, 42],
outputRange: [0.2, 0.8],
}),
opacity,
transform: vec.getTranslateTransform(),
...vec.getLayout(),
...vecLayout,
},
},
callback,
);

expect(node.__getValue()).toEqual({
style: {
opacity: 0.2,
transform: [{translateX: 0}, {translateY: 0}],
left: 0,
top: 0,
},
style: [
{
top: vecLayout.top,
left: vecLayout.left,
opacity,
transform: vec.getTranslateTransform(),
},
{
opacity: 0.2,
transform: [{translateX: 0}, {translateY: 0}],
left: 0,
top: 0,
},
],
});

node.__attach();
Expand All @@ -839,12 +881,20 @@ describe('Animated tests', () => {
expect(callback.mock.calls.length).toBe(2); // once each for x, y

expect(node.__getValue()).toEqual({
style: {
opacity: 0.8,
transform: [{translateX: 42}, {translateY: 1492}],
left: 42,
top: 1492,
},
style: [
{
top: vecLayout.top,
left: vecLayout.left,
opacity,
transform: vec.getTranslateTransform(),
},
{
opacity: 0.8,
transform: [{translateX: 42}, {translateY: 1492}],
left: 42,
top: 1492,
},
],
});

node.__detach();
Expand Down Expand Up @@ -937,13 +987,22 @@ describe('Animated tests', () => {
expect(listener.mock.calls.length).toBe(2);
expect(listener).toBeCalledWith({value: 137});
expect(view.__getValue()).toEqual({
style: {
transform: [
{
translateX: 137,
},
],
},
style: [
{
transform: [
{
translateX: value4,
},
],
},
{
transform: [
{
translateX: 137,
},
],
},
],
});
value4.removeListener(id);
value1.setValue(40);
Expand Down Expand Up @@ -1011,17 +1070,18 @@ describe('Animated tests', () => {

it('should animate colors', () => {
const color = new Animated.Color({r: 255, g: 0, b: 0, a: 1.0});
const scale = color.a.interpolate({
inputRange: [0, 1],
outputRange: [1, 2],
});
const callback = jest.fn();
const node = new AnimatedProps(
{
style: {
backgroundColor: color,
transform: [
{
scale: color.a.interpolate({
inputRange: [0, 1],
outputRange: [1, 2],
}),
scale,
},
],
},
Expand All @@ -1030,10 +1090,16 @@ describe('Animated tests', () => {
);

expect(node.__getValue()).toEqual({
style: {
backgroundColor: 'rgba(255, 0, 0, 1)',
transform: [{scale: 2}],
},
style: [
{
backgroundColor: color,
transform: [{scale}],
},
{
backgroundColor: 'rgba(255, 0, 0, 1)',
transform: [{scale: 2}],
},
],
});

node.__attach();
Expand All @@ -1042,10 +1108,16 @@ describe('Animated tests', () => {
color.setValue({r: 11, g: 22, b: 33, a: 0.5});
expect(callback.mock.calls.length).toBe(4);
expect(node.__getValue()).toEqual({
style: {
backgroundColor: 'rgba(11, 22, 33, 0.5)',
transform: [{scale: 1.5}],
},
style: [
{
backgroundColor: color,
transform: [{scale}],
},
{
backgroundColor: 'rgba(11, 22, 33, 0.5)',
transform: [{scale: 1.5}],
},
],
});

node.__detach();
Expand Down
7 changes: 2 additions & 5 deletions Libraries/Animated/nodes/AnimatedStyle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,8 @@ export default class AnimatedStyle extends AnimatedWithChildren {
return updatedStyle;
}

__getValue(): Object {
return flattenStyle([
this._inputStyle,
this._walkStyleAndGetValues(this._style),
]);
__getValue(): Array<Object> {
return [this._inputStyle, this._walkStyleAndGetValues(this._style)];
}

// Recursively get animated values for nested styles (like iOS's shadowOffset)
Expand Down

0 comments on commit c47a9f4

Please sign in to comment.