A problem with react hooks with animation callback - react-native

Question

import React, {useEffect, useState} from 'react';
import {Col} from "native-base";
import {Animated, TouchableOpacity, ViewProps} from "react-native";
interface AnimatedButtonProps extends ViewProps {
text: string;
size: Animated.Value;
onPress: (cb?: () => void) => void;
}
export const AnimatedButton = ({text, size, onPress}: AnimatedButtonProps) => {
const [defaultSize, setDefaultSize] = useState(new Animated.Value(30));
useEffect(() => {
// Update defaultSize from props
setDefaultSize(size);
});
let _onPress = () => {
console.log(defaultSize);
Animated.timing(defaultSize, {
toValue: 50,
duration: 300,
}).start();
console.log(defaultSize);
};
return (
<Col style={{justifyContent: "center", alignItems: "center"}}>
<TouchableOpacity style={{
width: 60,
height: 60,
justifyContent: "center",
alignItems: "center",
}}
onPress={() => onPress(_onPress)}>
<Animated.Text style={{
fontSize: defaultSize,
fontWeight: "bold"
}}>{text}</Animated.Text>
</TouchableOpacity>
</Col>
)
};
I am new to react hooks, tried to rewrite one of my components with react hooks. Any one can tell me why the callback animation doesn't work? The call back did trigger, but the defaultSize doesn't change at all. Below is my original component wrote in "React Class" way which works as expected. Some help will be really appreciated :D
class AnimatedButton extends Component<AnimatedButtonProps, AnimatedButtonState> {
state: AnimatedButtonState = initState;
componentDidMount(): void {
const {size} = this.props;
this.setState({
size
})
}
_onPress = () => {
const {size} = this.state;
Animated.sequence([
Animated.timing(size, {
toValue: 50,
duration: 300,
}),
Animated.timing(size, {
toValue: 30,
duration: 300,
})
]).start();
};
render() {
const {text} = this.props;
const {size} = this.state;
return (
<Col style={{justifyContent: "center", alignItems: "center"}}>
<TouchableOpacity style={{
width: 60,
height: 60,
justifyContent: "center",
alignItems: "center",
}}
onPress={() => this.props.onPress(this._onPress)}>
<Animated.Text style={{
fontSize: size,
fontWeight: "bold"
}}>{text}</Animated.Text>
</TouchableOpacity>
</Col>
);
}
}
export default AnimatedButton;

Answer 1

useEffect(() => {
setDefaultSize(size);
}, [defaultSize]);
Solved the problem