Estoy usando import { Animated } from 'react-native'
Al especificar width: animated-value en el estilo, el width en realidad solo se representa una vez y no cambia dinámicamente. Solo puede ver que el valor animado detrás de escena está cambiando si hace que el elemento se vuelva a renderizar.
// 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) Sé que configurar el valor animado funciona porque style={{ transform: [{ scale: anim.current }] }} funciona perfectamente (crece y se reduce repetidamente).
¿Por qué width: width * anim.current._value anima el ancho?
¿Cómo puedo animar el ancho?
this.props.width es solo un número por cierto, por ejemplo, 64
deja probar esto.
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)