title: Setting height in animated search bar react native
body: <p>I have built an animated search bar in react native just like search bar of facebook mobile application. The search bar opens up when the search button is clicked on the header. It currently takes same height as the custom header that it is being rendered on. But i want to increase the height of the header to half the screen size when the search bar is on focus and set the height to default when the search bar is not focused. I have tried using my own logic but the problem was when i increased the height the contents of headers were shown below the search bar. And i dont want that. Can anyone help me how to resolve this?</p>
  <pre><code>/* eslint-disable @typescript-eslint/no-unused-vars */
  import React, {useContext, useRef} from 'react';
  import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    SafeAreaView,
    Animated,
    TextInput,
    Easing,
  } from 'react-native';
  
  import Logo from '@assets/images/NCLogo.png';
  import Colors from '@constants/colors/colors';
  import Search from '@assets/icons/Search.svg';
  import Back from '@assets/icons/back-arrow.svg';
  
  import {AuthContext} from '@components/ContextStore/AuthContext/AuthContext';
  
  import DateAndDayGenerator from '@utils/DayGen';
  import {HEIGHT, WIDTH} from '@utils/Dimensions';
  import Metrics from '@constants/metrics/Metrics';
  import Fonts from '@constants/fonts/fonts';
  import SearchList from '@components/ListNews/SearchList';
  
  interface Props {
    news?: any;
  }
  
  const Header: React.FC&lt;Props&gt; = () =&gt; {
    const date = new Date();
    const dateAndDay = DateAndDayGenerator(date);
    const {color} = useContext(AuthContext);
    const [focused, setFocused] = React.useState(false);
    const [value, setValue] = React.useState('');
    const inputRef = useRef&lt;TextInput&gt;(null);
  
    // animation initial value
    const inputTranslateX = useRef(new Animated.Value(WIDTH)).current;
    const backButtonOpacity = useRef(new Animated.Value(0)).current;
    const contentTranslateY = useRef(new Animated.Value(HEIGHT)).current;
    const contentOpacity = useRef(new Animated.Value(0)).current;
  
    const handleClear = () =&gt; {
      setValue('');
    };
  
    const handleBlur = () =&gt; {
      setFocused(false);
      const inputTranslateXConfig = {
        toValue: WIDTH,
        duration: 200,
        useNativeDriver: true,
        easing: Easing.inOut(Easing.ease),
      };
      const backButtonOpacityConfig = {
        toValue: 0,
        duration: 50,
        useNativeDriver: true,
        easing: Easing.inOut(Easing.ease),
      };
  
      const contentTranslateYConfig = {
        toValue: HEIGHT,
        duration: 0,
        useNativeDriver: true,
        easing: Easing.inOut(Easing.ease),
      };
  
      const contentOpacityConfig = {
        toValue: 0,
        duration: 200,
        useNativeDriver: true,
        easing: Easing.inOut(Easing.ease),
      };
  
      Animated.parallel([
        Animated.timing(inputTranslateX, inputTranslateXConfig),
        Animated.timing(backButtonOpacity, backButtonOpacityConfig),
        Animated.timing(contentTranslateY, contentTranslateYConfig),
        Animated.timing(contentOpacity, contentOpacityConfig),
      ]).start();
  
      inputRef.current?.blur();
    };
  
    const handleFocus = () =&gt; {
      setFocused(true);
      const inputTranslateXConfig = {
        toValue: 0,
        duration: 200,
        useNativeDriver: true,
        easing: Easing.inOut(Easing.ease),
      };
      const backButtonOpacityConfig = {
        toValue: 1,
        duration: 200,
        useNativeDriver: true,
        easing: Easing.inOut(Easing.ease),
      };
  
      const contentTranslateYConfig = {
        toValue: 0,
        duration: 0,
        useNativeDriver: true,
        easing: Easing.inOut(Easing.ease),
      };
  
      const contentOpacityConfig = {
        toValue: 1,
        duration: 200,
        useNativeDriver: true,
        easing: Easing.inOut(Easing.ease),
      };
  
      Animated.parallel([
        Animated.timing(inputTranslateX, inputTranslateXConfig),
        Animated.timing(backButtonOpacity, backButtonOpacityConfig),
        Animated.timing(contentTranslateY, contentTranslateYConfig),
        Animated.timing(contentOpacity, contentOpacityConfig),
      ]).start();
      inputRef.current?.focus();
    };
  
    return (
      &lt;&gt;
        &lt;SafeAreaView style={styles.header_safe}&gt;
          &lt;View style={styles.header}&gt;
            &lt;View style={styles.view}&gt;
              &lt;View style={styles.Logo}&gt;
                &lt;Image source={Logo} style={styles.image} /&gt;
              &lt;/View&gt;
              {color ? (
                &lt;View style={styles.texts}&gt;
                  &lt;Text style={[styles.text, {color}]}&gt;Nepali Congress&lt;/Text&gt;
                  &lt;Text style={styles.date}&gt;{`${dateAndDay.day}, ${
                    dateAndDay.month
                  } ${dateAndDay.date},${' '}${dateAndDay.year}`}&lt;/Text&gt;
                &lt;/View&gt;
              ) : (
                &lt;View style={styles.texts}&gt;
                  &lt;Text style={styles.text}&gt;Nepali Congress&lt;/Text&gt;
                  &lt;Text style={styles.date}&gt;{`${dateAndDay.day}, ${
                    dateAndDay.month
                  } ${dateAndDay.date},${' '}${dateAndDay.year}`}&lt;/Text&gt;
                &lt;/View&gt;
              )}
              &lt;TouchableOpacity onPress={handleFocus}&gt;
                &lt;View style={styles.search}&gt;
                  &lt;Search width={25} height={25} fill=&quot;none&quot; /&gt;
                &lt;/View&gt;
              &lt;/TouchableOpacity&gt;
              &lt;Animated.View
                style={[
                  styles.input,
                  {transform: [{translateX: inputTranslateX}]},
                ]}&gt;
                &lt;Animated.View style={{opacity: backButtonOpacity}}&gt;
                  &lt;TouchableOpacity
                    activeOpacity={1}
                    style={styles.back_icon}
                    onPress={handleBlur}&gt;
                    &lt;Back width={28} height={28} fill=&quot;#000&quot; /&gt;
                  &lt;/TouchableOpacity&gt;
                &lt;/Animated.View&gt;
                &lt;TextInput
                  ref={inputRef}
                  placeholder=&quot;Enter title, description or date of news&quot;
                  placeholderTextColor=&quot;#000&quot;
                  clearButtonMode=&quot;while-editing&quot;
                  onFocus={handleFocus}
                  value={value}
                  onChangeText={text =&gt; {
                    setValue(text);
                  }}
                  style={styles.input_text}
                /&gt;
                &lt;TouchableOpacity
                  onPress={handleClear}
                  style={styles.clearButton}&gt;
                  &lt;Text style={styles.clear}&gt;X&lt;/Text&gt;
                &lt;/TouchableOpacity&gt;
              &lt;/Animated.View&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/SafeAreaView&gt;
        &lt;Animated.View
          style={[
            styles.content,
            {
              opacity: contentOpacity,
              transform: [{translateY: contentTranslateY}],
            },
          ]}&gt;
          &lt;SafeAreaView style={styles.content_safe}&gt;
            &lt;View style={styles.content_inner}&gt;
              &lt;View style={styles.separator} /&gt;
              &lt;SearchList searchPhrase={value} /&gt;
            &lt;/View&gt;
          &lt;/SafeAreaView&gt;
        &lt;/Animated.View&gt;
      &lt;/&gt;
    );
  };
  
  const styles = StyleSheet.create({
    header_safe: {
      zIndex: 1000,
    },
    header: {
      height: HEIGHT * 0.087,
      paddingHorizontal: 16,
      backgroundColor: Colors.white,
    },
    view: {
      flex: 1,
      overflow: 'hidden',
      alignItems: 'center',
      flexDirection: 'row',
      justifyContent: 'space-between',
      position: 'relative',
    },
    Logo: {
      margin: 10,
      alignItems: 'center',
      flexDirection: 'row',
      width: WIDTH * 0.15,
      height: HEIGHT * 0.055,
    },
    image: {
      width: '100%',
      height: '100%',
      resizeMode: 'stretch',
    },
    texts: {
      marginLeft: 4,
      marginRight: WIDTH * 0.155,
    },
    text: {
      fontSize: Metrics.h3,
      color: Colors.black,
      fontFamily: Fonts.type.montBold,
      width: WIDTH * 0.5,
    },
    date: {
      marginTop: 4,
      fontSize: Metrics.body7,
      color: Colors.black,
      fontFamily: 'Mont-Regular',
    },
    search: {
      width: 35,
      height: 35,
      right: 20,
      borderRadius: 80,
      backgroundColor: '#f5f5f5',
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
    },
    input: {
      height: HEIGHT * 0.087,
      flexDirection: 'row',
      alignItems: 'center',
      position: 'absolute',
      top: 0,
      left: 0,
      backgroundColor: Colors.white,
      width: WIDTH - 32,
    },
    back_icon: {
      width: 40,
      height: 40,
      borderRadius: 40,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      marginRight: 5,
      transform: [{rotate: '180deg'}],
    },
    input_text: {
      flex: 1,
      height: 37,
      backgroundColor: '#e4e6e8',
      borderRadius: 80,
      paddingHorizontal: 16,
      fontSize: 13,
      color: Colors.black,
    },
    input_text1: {
      flex: 1,
      height: 37,
      backgroundColor: '#e4e6e8',
      borderRadius: 80,
      paddingHorizontal: 16,
      fontSize: 13,
    },
    content: {
      position: 'absolute',
      width: WIDTH,
      height: HEIGHT,
      left: 0,
      bottom: 0,
      zIndex: 999,
    },
    content_safe: {
      flex: 1,
      backgroundColor: Colors.white,
    },
    content_inner: {
      flex: 1,
      paddingTop: HEIGHT * 0.087,
    },
    separator: {
      height: 1,
      marginTop: 5,
      backgroundColor: '#e6e4eb',
    },
    search_results: {
      alignItems: 'center',
      borderBottomWidth: 1,
      borderBottomColor: '#e6e4eb',
      marginLeft: 16,
    },
    clearButton: {
      width: 30,
      height: 30,
      borderRadius: 80,
      marginLeft: 10,
      backgroundColor: Colors.red,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
    },
    clear: {
      fontSize: 14,
      color: Colors.black,
      fontWeight: 'bold',
    },
  });
  
  export default Header;
  </code></pre>