All three buttons are assigned with the same override Scale
. Why do they all bounce when only one button is clicked?
Solutions:
Why? Because all three buttons are associated with the same data source, data.scale
. When it changes, the scale
prop of all three buttons are updated accordingly.
To fix it, create separate code overrides that associate the buttons with separate data sources, like so:
const data = Data({
scale1: Animatable(1),
scale2: Animatable(1),
scale3: Animatable(1)
});
export const Scale1: Override = () => {
return {
scale: data.scale1,
onTap() {
data.scale1.set(0.6);
animate.spring(data.scale1, 1);
}
};
};
export const Scale2: Override = () => {
return {
scale: data.scale2,
onTap() {
data.scale2.set(0.6);
animate.spring(data.scale2, 1);
}
};
};
...
DRY, acronym for Do not Repeat Yourself, is an important principle in programming. In this example, we can reduce repetition by extracting the common code into a function, like so:
function buttonOverride(scale) {
return {
scale,
onTap() {
scale.set(0.6);
animate.spring(scale, 1);
}
};
}
export const Scale1: Override = () => buttonOverride(data.scale1);
export const Scale2: Override = () => buttonOverride(data.scale2);
export const Scale3: Override = () => buttonOverride(data.scale3);
PS: If you find this tip difficult to understand, check out this course I prepared for you, where concepts are explained in a more digestible way. No programming experience required!
Want the complete source file? Enter your email address below:
I'll also send you new tips when available. No spam, unsubscribe any time!