Logo.js

import React, { useState, useEffect, memo } from "react";
import { View, TouchableOpacity, TouchableWithoutFeedback, Animated, StyleSheet } from "react-native";

import { IoniconsIcon } from "~/components/Icons/Ionicons";
import { c, t } from "~/helpers/rootHelper";
import { useKeyboard } from "~/hooks";

const END_HEIGHT = 120;
const START_HEIGHT = 160;
const START_WIDTH = c.DEVICE_WIDTH * 0.7;
const END_WIDTH = c.DEVICE_WIDTH * 0.5;
const DURATION = 160;

const Logo = ({ showBackStep = true, navigatorStepBack, style }) => {
    const [isKeyboardVisible] = useKeyboard();
    const [isLoaded, setLoaded] = useState(false);
    const isAnimatable = isKeyboardVisible && isLoaded;

    const logoHeight = new Animated.Value(END_HEIGHT);
    const logoWidth = new Animated.Value(START_WIDTH);

    useEffect(() => {
        Animated.parallel([
            Animated.timing(logoHeight, {
                duration: DURATION,
                toValue: isKeyboardVisible ? END_HEIGHT : START_HEIGHT

            }),
            Animated.timing(logoWidth, {
                duration: DURATION,
                toValue: isKeyboardVisible ? END_WIDTH : START_WIDTH

            })
        ]).start();
    }, [isAnimatable]);

    return (
        <View style={style}>
            {showBackStep &&
                <View style={s.stepBackButton}>
                    <TouchableOpacity onPress={navigatorStepBack}>
                        <IoniconsIcon
                            name={c.ICONS.IONICONS.MD_ARROW_DROPLEFT_CIRCLE}
                            size={30}
                            color={c.LIGHT_GREY}
                        />
                    </TouchableOpacity>
                </View>
            }

            <TouchableWithoutFeedback
                delayLongPress={c.DELAY_LONG_PRESS_LOGIN_OPEN_API_URL}
                onLongPress={t.toggleDebugTranslationMode}
            >
                <Animated.Image
                    style={[s.generalLogo, { width: logoWidth, height: logoHeight }]}
                    resizeMode="contain"
                    source={c.IMAGES.HUMANFORCE_LOGO}
                    onLoad={() => setLoaded(true)}
                />
            </TouchableWithoutFeedback>
        </View>
    );
}

const s = StyleSheet.create({
    stepBackButton: {
        left: 10
    },
    generalLogo: {
        alignSelf: "center"
    }
});

export default memo(Logo);