SearchInput.js

import React, { useState, useRef } from 'react';
import debounce from 'lodash/debounce';

import { Container, TInput, Icon, IconContainer, SearchIcon } from './styles';

export default function SearchInput({ onChangeText }) {
  const delayedQuery = useRef(debounce(value => onChangeText(value), 500))
    .current;
  const [searchText, setSearchText] = useState('');

  function handleReset() {
    delayedQuery('');
    setSearchText('');
  }

  function handleChangeSearchInput(text) {
    setSearchText(text);
    delayedQuery(text);
  }

  return (
    <Container>
      <IconContainer>
        <SearchIcon />
      </IconContainer>

      <TInput
        value={searchText}
        placeholder="Busca"
        onChangeText={onChangeText && handleChangeSearchInput}
      />

      {searchText !== '' && (
        <Icon name="ios-close-circle" onPress={() => handleReset()} />
      )}
    </Container>
  );
}