need clarification about LayoutAnimation - react-native

Question

I've been trying to understand how to use LayoutAnimation and the docs haven't been very helpful.
is there a better source? anyways here is this code which demonstrates the 3 different types of animations with layoutAnimation. It is an app with 3 buttons and 3 boxes which move across the screen differently. I am failing to understand what causes the boxes to animate. I don't see a function call making it animate. I only see conditional statements in the style attribute. the attribute seems to know nothing about the layoutAnimation. Yet it does animate.
here is the code
import React, { useState } from "react";
import {
View,
Platform,
UIManager,
LayoutAnimation,
StyleSheet,
Button
} from "react-native";
if (
Platform.OS === "android" &&
UIManager.setLayoutAnimationEnabledExperimental
) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
export default function App() {
const [firstBoxPosition, setFirstBoxPosition] = useState("right");
const [secondBoxPosition, setSecondBoxPosition] = useState("left");
const [thirdBoxPosition, setThirdBoxPosition] = useState("left");
const toggleFirstBox = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setFirstBoxPosition(firstBoxPosition === "left" ? "right" : "left");
};
const toggleSecondBox = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
setSecondBoxPosition(secondBoxPosition === "left" ? "right" : "left");
};
const toggleThirdBox = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
setThirdBoxPosition(thirdBoxPosition === "left" ? "right" : "left");
};
return (
<View style={styles.container}>
{/* button demonstrating easing animation*/}
<View style={styles.buttonContainer}>
<Button title="EaseInEaseOut" onPress={toggleFirstBox} />
</View>
{/* button demonstrating linear animation*/}
<View style={styles.buttonContainer}>
<Button title="Linear" onPress={toggleSecondBox} />
</View>
{/* button demonstrating spring animation*/}
<View style={styles.buttonContainer}>
<Button title="Spring" onPress={toggleThirdBox} />
</View>
{/*The three boxes demonstrating animation types*/}
<View
style={[
styles.box,
firstBoxPosition === "left" ? null : styles.moveRight
]}
/>
<View
style={[
styles.box,
secondBoxPosition === "left" ? null : styles.moveRight
]}
/>
<View
style={[
styles.box,
thirdBoxPosition === "left" ? null : styles.moveRight
]}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "flex-start",
justifyContent: "center"
},
box: {
height: 100,
width: 100,
borderRadius: 5,
margin: 8,
backgroundColor: "blue"
},
moveRight: {
alignSelf: "flex-end"
},
buttonContainer: {
alignSelf: "center"
}
});

Answer 1

The idea (and the major gotcha) with LayoutAnimation is that it sets an animation for ALL subsequent layout changes until it's removed. It just works automatically with no additional setup.