I am using Animated API import { Animated } from 'react-native'
When specifying width: animated-value in the style, the width is actually only rendered once, and doesn't change dynamically. You can only see that the animated value behind the scenes is changing if you cause the element to re-render.
// since only function components can use hooks, wrap the classical component in a function one
// that sets up the hook for it
function withAnimationHook(Component) {
return function WrappedComponent(props) {
const anim = useRef(new Animated.Value(0));
useEffect(() => {
Animated.loop(
Animated.sequence([
Animated.timing(anim.current, {
toValue: 1,
duration: 2000,
}),
Animated.timing(anim.current, {
toValue: 0,
duration: 2000,
}),
])
).start();
}, []);
return <Component {...props} anim={anim} />;
}
}
class AnimatedButton extends React.Component {
render() {
const { anim, width } = this.props
return (
<Animated.View style={{ width: width * anim.current._value }}>
</Animated.View>
)
}
}
export default withAnimationHook(AnimatedButton)
I know setting up the animated value works because style={{ transform: [{ scale: anim.current }] }} works perfectly (it grows and shrinks repeatedly).
Why doesn't width: width * anim.current._value animate the width?
How can I animate the width?
this.props.width is just a number btw, e.g. 64
let try this.
const SubView = ({ parentValue = 0, propWidth=2000 }) => {
const animatedValue = useRef(new Animated.Value(0)).current
useEffect(() => {
Animated.timing(animatedValue, {
toValue: parentvalue,
duration: 2000,
}).start()
}, [parentValue])
return (
<Animated.View
style={[
styles.viewStyle,
{
width: animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, propWidth],
}),
},
]}
></Animated.View>
)
}
export default React.memo(SubView)