React Native Animation font size input doesn't work

Question

Hello React Develelopers, my question:

I want simply animate font size of placeholder by using clicking on it by using onFocus in my TextInput.

Using expo and creating in state InputsMarginTop:0 is everything ok but using inputsFontSize: new Animated.Value(22) my expo is crashing. Why it doesn't work?

    import React, { Component } from 'react'
    import { StyleSheet, Text, View, ImageBackground, TextInput, Animated } from 'react-native'
        export default class AnimatedLoginScreen extends Component {
        state = {
            blur: 2,
            alfpha: 0.2,
            theme: 'dark',
            InputsMarginTop: new Animated.Value(11),
            inputsFontSize: new Animated.Value(22)
        }
handleFocus = () => {
        Animated.timing(this.state.InputsMarginTop, {
            toValue: 55,
            duration: 1000
        }).start()
    }

    render() {
        const blackOrWhite = this.state.theme === "dark" ? "white" : "white"
        const { inputsFontSize } = this.state


        return (


            <ImageBackground style={styles.bg} source={require('../assets/mountains.jpg')}>
                <View style={[styles.container,
                { backgroundColor: this.state.theme === 'dark' ? "rgba(0,0,0,0.5)" : "rgba(255,255,255,0.3)" }
                ]}>


                    <View style={styles.headContainer}>
                        <Text style={styles.text}>Sing In</Text>
                        <Text style={{ fontSize: 22, marginTop: 5 }}>/UP</Text>
                    </View>

                    <Animated.View style={[styles.inputContainer, { marginTop: this.state.InputsMarginTop }]}>
                        <TextInput
                            style={[styles.input, { fontSize: inputsFontSize, borderBottomWidth: 2, borderColor: blackOrWhite }]}
                            placeholder="Username"
                            placeholderTextColor={blackOrWhite}
                            onFocus={() => { this.handleFocus() }}
                        />
                      
                    </Animated.View>


                </View>

            </ImageBackground>


        )
    }

}

Thanks for your answers :)

Answer 1

This happens because your animated value inputsFontSize pass under a non-animated component (TextInput), and work fine for InputsMarginTop because you pass it under an animated component (Animated.View)

Answer 2

Write this line after your imports:

Animated.TextInput = Animated.createAnimatedComponent(TextInput);

Then use Animated.TextInput instead of TextInput