A React-Native view that shrinks and disappears when the keyboard opens

KeyboardShrinkingView.tsx

import React, {useEffect, useRef} from 'react';
import {
  Keyboard,
  Animated,
} from 'react-native';

function KeyboardShrinkingView({ children, startHeight="100%", endHeight="0%" }) {
  const scaleValue = useRef(new Animated.Value(0)).current;
  const scaleOut = Animated.timing(scaleValue, {
    toValue: 1,
    duration: 100,
    useNativeDriver: false,
  });
  const scaleIn = Animated.timing(scaleValue, {
    toValue: 0,
    duration: 100,
    useNativeDriver: false,
  });
  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      () => {
        scaleOut.start();
      },
    );
    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        scaleIn.start();
      },
    );

    return () => {
      keyboardDidHideListener.remove();
      keyboardDidShowListener.remove();
    };
  }, []);


  return (
      <Animated.View
        style={{
          height: scaleValue.interpolate({
            inputRange: [0, 1],
            outputRange: [startHeight, endHeight],
          }),
          opacity: scaleValue.interpolate({
            inputRange: [0, 1],
            outputRange: [1, 0],
          }),
          marginVertical: 10,
        }}
      >
        {children}
      </Animated.View>
  );
}

export default KeyboardShrinkingView;