Typescript error when using SearchBar from react-native-elements

user_2752719 0
Viewed 937

I'm using import { SearchBar } from 'react-native-elements';

It has a onChangeText function with the type of onChangeText: () => any;

I do onChangeText={(text: string) => console.log("text", text)} and it's giving me the ts error:

Type '(text: string) => void' is not assignable to type '((text: string) => void) & ((text: string) => void) & (() => any) & (() => any) & (() => any) & ((text: string) => void) & (() => any) & (() => any) & (() => any)'.
  Type '(text: string) => void' is not assignable to type '() => any'

Why and what's the correct way to do this?

typescript
2 Answers

According to this issue, the type definition is broken in the latest version. Until the new version come out, you can do the following to overcome the problem.

01 way: Downgrade it to 3.4.0

// npm
npm install react-native-elements@3.4.0

// yarn 
yarn add react-native-elements@3.4.0

OR

02 way: Refer to the base props like the comment suggested in the issue

import { SearchBar } from 'react-native-elements';
import { SearchBarBaseProps } from 'react-native-elements/dist/searchbar/SearchBar';

// Using SearchBarBaseProps instead of SearchBarDefaultProps & SearchBarAndroidProps & SearchBarIOSProps
const SafeSearchBar = (SearchBar as unknown) as React.FC<SearchBarBaseProps>;

const CustomSearchBar = () => {
    return (
        <SafeSearchBar
            platform="default"
            placeholder="Type Here..."
            onChangeText={(text: string) => console.log("text", text)}
            // value={search}
        />
    );
}
user_155694920
user_27527190
Related