Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

cannot forward ref to component TypeScript error

$
0
0

Trying to pass ref to my search component without any success. This is My component:

interface SearchInputProps {  placeholder: string;  onSearch: () => any;}// type TextInputProps = React.HTMLProps<TextInput>;export const SearchInput: React.FC<SearchInputProps> = forwardRef<TextInput, SearchInputProps>(  ({ placeholder, onSearch }, ref) => {    const [searchText, setSearchText] = useState("");    return (<View style={{ flex: 1, flexDirection: "row" }}><View style={{ flexDirection: "row", alignItems: "center", flex: 1, padding: 5 }}><Ionicons name="search" color={Colors.white} size={23} /><TextInput            autoFocus            placeholder={placeholder}            placeholderTextColor={Colors.lightGrey2}            style={{ marginLeft: 10, fontSize: 16, color: Colors.weakGrey, flex: 1 }}            blurOnSubmit={false}            value={searchText}            onChangeText={(text) => {              setSearchText(text);              onSearch();            }}></TextInput>          {searchText.length ? (<Ionicons              name="close-circle"              color={Colors.lightGrey}              size={22}              onPress={() => setSearchText("")}              style={{ marginLeft: 5 }}            />          ) : null}</View></View>    );  });

creating the ref:

const inputRef = useRef<TextInput>();

The component:

<SearchInput placeholder={"Search a user"} onSearch={() => setIsTyping(true)} ref={inputRef} />

I get this error:

Type '{ placeholder: string; onSearch: () => void; ref:MutableRefObject; }' is not assignable to type'IntrinsicAttributes & SearchInputProps & { children?: ReactNode; }'.Property 'ref' does not exist on type 'IntrinsicAttributes &SearchInputProps & { children?: ReactNode; }


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>