CODEWITHSUNDEEP
typescript
Ben
Ben

Reputation: 3357

Typescript error when using SearchBar from react-native-elements

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?

Upvotes: 5

Views: 1700

Answers (2)

Ben
Ben

Reputation: 3357

This has been handled with the v4. See https://github.com/react-native-elements/react-native-elements/issues/3227#issuecomment-999831580

Upvotes: 0

Mic Fung
Mic Fung

Reputation: 5692

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 [email protected]

// yarn 
yarn add [email protected]

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}
        />
    );
}

Upvotes: 2

Related Questions