This is an example code as I'm trying to learn Animated from react native. If I want to press a button and double the size of this text smoothly, how would I do that? From what I understood I need to add Transform: scale x/y somehow but I'm super confused by this. Thanks

 import React, { useRef, useEffect } from 'react';
 import { Animated, Text, View } from 'react-native';
    
    
    
const FadeInView = (props) => {
    const fadeAnim = useRef(new Animated.Value(0)).current
    useEffect(() => {
      Animated.timing(
        fadeAnim,
        {
          toValue: 1,
          duration: 2000,
          useNativeDriver: true
        }
      ).start();
    }, [])
  
    return (
      <Animated.View style={{...props.style, opacity: fadeAnim}}>
        {props.children}
      </Animated.View>
    );
  }
  

  export default () => {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <FadeInView>
          <Text style={{fontSize: 28, textAlign: 'center', padding: 10}}>Fading in</Text>
        </FadeInView>
      </View>
    )
  }

CodePudding user response：

Let's say you want to scale the text when it's clicked. You can do this:

export default () => {
const scaleAnim = useRef(new Animated.Value(1)).current;
const animateTextSize = () => {
  Animated.timing(
      scaleAnim,
      {
        toValue: 2,
        duration: 2000,
        useNativeDriver: true
      }            
   ).start();
}

return (
  <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
    <FadeInView>
      <Animated.Text style={{fontSize: 28, textAlign: 'center', padding: 10, transform:[{scale:scaleAnim}]}} onPress={animateTextSize}>Fading in</Animated.Text>
    </FadeInView>
  </View>
)}

snack demo