SearchBar typescript props missing

I import SearchBar and need to create a ref for it:

import { SearchBar, SearchBarProps } from 'react-native-elements';
const searchFieldRef = useRef<SearchBarProps>(null);
const blurSearch = useCallback(() => {
   searchFieldRef.current?.blur();
  }, [searchFieldRef]);

<SearchBar ref={searchFieldRef} onPress={blurSearch} ...

I get a typescript error on:

1. searchFieldRef.current?.blur(); - it doesn’t know about blur.
2. ref={searchFieldRef} on the SearchField itself

The first issue I can, in an ugly way, fix by adding the methods to the typescript definition like so:

type MissingProps = {
  focus: () => void;
  blur: () => void;
  clear: () => void;
  cancel: () => void;
}
const searchFieldRef = useRef<SearchBarProps & MissingProps>(null);

I prefer this to be handled correctly of course. But one thing I am not sure how to fix is ref={searchFieldRef}

Could you please advise how to properly import the typescript definition of this component? Thanks!

[khushal87]

There are other issues with the SearchBar types, too. For example, the docs say I can use placeholder, for example, but I’m getting a warning that it’s not a valid prop. Looking through the types shipped, it looks like this is missing.

The codebase only just transitioned to TypeScript so I’m guessing it’s just a small bug that got through and one that’ll be fixed soon. The same for your case, too.

I have raised the PR for the same https://github.com/react-native-elements/react-native-elements/pull/2892 this will be solved soon. Thank you.

[tidusjar]

We have now lost the onChangeText prop, so this change has introduced a breaking change