animation in expo

[teegreat]

please I am currently following a react native series on youtube but the instructor is not building via expo. So I am finding it difficult to do a certain animation. I will be grateful if a solution is provided.

import React, { useState, useRef } from 'react'

import { View, Text, StyleSheet, Dimensions, TextInput, Animated } from 'react-native'
import { colors, parameters, title } from "../../global/styles"
import Header from "../../components/Header"

// import * as Animatable from "react-native-elements"


import { Icon } from 'react-native-elements'

export default function SignInScreen() {
    const [textInput2Fossued, setTextInput2Fossued] = useState(false)

    const textInput1 = useRef(1)
    const textInput2 = useRef(2)

    return (
        <View style={styles.container}>
            <Header title="MY ACCOUNT" type="arrow-left" />

            <View style={{ marginLeft: 20, marginTop: 10 }}>
                <Text style={title}>
                    Sign-In
                </Text>
            </View>

            <View style={{ alignItems: "center", marginTop: 10 }}>
                <Text style={styles.text1}>
                    Please enter your email and password
                </Text>
                <Text style={styles.text1}>
                    registered with your account
                </Text>
            </View>

            <View style={{ marginTop: 20 }}>
                <View>
                    <TextInput
                        style={styles.TextInput1}
                        placeholder="Email"
                        ref={textInput1}
                    />
                </View>

                <View style={styles.TextInput2}>
                    <Animated.View>
                        <Icon
                            name="lock"
                            iconStyle={{ color: colors.grey3 }}
                            type="material"
                        />
                    </Animated.View>

                    <TextInput
                        style={{ width: "80%" }}
                        placeholder="Password"
                        ref={textInput2}
                        onFocus={() => {
                            setTextInput2Fossued(false)
                        }}
                        onBlur={() => {
                            setTextInput2Fossued(true)
                        }}
                    />

                    <Animated.View animation={textInput2Fossued ? "" : "fadeInLeft"} duration={400}>
                        <Icon
                            name="visibility-off"
                            iconStyle={{ color: colors.grey3 }}
                            type="material"
                            style={{ marginRight: 5 }}
                        />
                    </Animated.View>
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },

    text1: {
        color: colors.grey3,
        fontSize: 16
    },

    TextInput1: {
        borderWidth: 1,
        borderColor: "#86939e",
        marginHorizontal: 20,
        borderRadius: 12,
        marginBottom: 20,
        padding: 15
    },
    TextInput2: {
        borderWidth: 1,
        borderRadius: 12,
        marginHorizontal: 20,
        borderColor: "#86939e",
        flexDirection: "row",
        justifyContent: "space-between",
        alignContent: "center",
        alignItems: "center",
        padding: 15

    }
})

[wodin]

Hi @teegreat

Could you please explain what problem you are having with the above code? Any error messages, etc.

Also, have you seen William Candillon’s Can it be done in React Native on youtube?

William Candillon