index6.js

import React, {useRef} from 'react';

...

const inputRef = useRef<any>(null);

...

const onFocus = ()=>{
   InputLength.value = {width: '90%'};
   SearchTextPlacement.value = {transformX: 0};
   CancelBtn.value = {transformX: 0};
}

const onCancelAnimation = () => {
    InputLength.value = {width: '100%'};
    SearchTextPlacement.value = {
      transformX: (Dimensions.get('window').width - 140) / 2,
    };
    CancelBtn.value = {transformX: 100};
    inputRef.current.blur();
};

...

<TextInput
     placeholder={'Search'}
     style={{fontSize: 16, paddingRight: 20}}
     onFocus={onFocus}
     ref={inputRef}
 />

...

<Animated.View style={[styles.cancelBtnContainer, CancelBtnStyles]}>
  <TouchableOpacity onPress={onCancelAnimation}>
     <Text>Cancel</Text>
  </TouchableOpacity>
</Animated.View>

...