useAnimatedKeyboardHeight.js

/** 
 * from: https://www.reddit.com/r/reactnative/comments/iysvwn/for_the_past_two_months_ive_been_working_on_a/g6eiuy4?utm_source=share&utm_medium=web2x&context=3
 *
 *
 *
 * The top header is this package: react - native - unibubbles
 * I mix it with a transparent StackNavigator.
 * Thank you! The < Modal /> is a platform switch between react - native - modal and react - native - web - modal.
 * I used a hook which exports and Animated.Value which I use to animate the absolutely positioned < Modal />’s bottom style.🤪 
 * 
 * 
 * Finally, to search and select members, I use react - native - segmented - text - input.
 *
 * */ 

import { useState, useEffect, useCallback } from "react";
import { Animated, Keyboard, Platform, Easing } from "react-native";

export default function useAnimatedKeyboardHeight () {
    const [value] = useState(() => new Animated.Value(0));
    const keyboardWillShow = useCallback(
        ({ endCoordinates: { height } }) => {
            Animated.timing(
                value,
                {
                    easing: Easing.ease,
                    toValue: height,
                    duration: 250,
                    useNativeDriver: Platform.OS !== "web",
                },
            ).start();
        },
        [value],
    );

    const keyboardWillHide = useCallback(
        () => {
            Animated.timing(
                value,
                {
                    easing: Easing.ease,
                    toValue: 0,
                    duration: 350,
                    useNativeDriver: Platform.OS !== "web",
                },
            ).start();
        },
        [value],
    );
    useEffect(
        () => {
            Keyboard.addListener("keyboardWillShow", keyboardWillShow);
            Keyboard.addListener("keyboardWillHide", keyboardWillHide);
            return () => {
                Keyboard.removeListener("keyboardWillShow", keyboardWillShow);
                Keyboard.removeListener("keyboardWillHide", keyboardWillHide);
            };
        },
        [keyboardWillShow, keyboardWillHide],
    );
    return value;
};