Increase size in React native animated - react-native

Question

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>
)
}

Answer 1

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