Quiero que el texto se mueva hacia arriba cuando haga clic en él. Pero a pesar de que el valor de topPosition se actualiza al hacer clic en -40, la vista nunca se mueve. ¿Cómo puedo hacer que la animación se ejecute?
const TabButton = () => { //Animation variables const topPosition = useRef(new Animated.Value(1)).current; const labelVisibility = useRef(false); const pushIconUp = () => { console.log('dwad'); Animated.timing(topPosition, { toValue: -40, duration: 1000, useNativeDriver: false, }).start(); console.log(topPosition); }; const pushIconDown = () => { Animated.timing(topPosition, { toValue: 0, duration: 100, useNativeDriver: false, }).start(); }; return ( <TouchableHighlight onPress={pushIconUp}> <Animated.View style={{marginTop: topPosition, borderColor: 'white'}}> <Text>daw</Text> </Animated.View> </TouchableHighlight> ); }; export default TabButton;Creo que es mejor si animas la traducción y también TouchableOpacity debería estar dentro de Animated.View .
<Animated.View style={{ transform: [{ translateY: topPosition }], borderColor: 'white'}}> <TouchableHighlight onPress={pushIconUp}> <Text>daw</Text> </TouchableHighlight> </Animated.View> También puede habilitar useNativeDriver