I'm building an app on react native and I'm trying to set a ref on an input element from the "react-native-elements" library.
I'm getting the following error:
Type 'HTMLInputElement | null' is not assignable to type 'Ref<TextInput> | undefined'. Type 'HTMLInputElement' is not assignable to type 'Ref<TextInput> | undefined'. Property 'current' is missing in type 'HTMLInputElement' but required in type 'RefObject<TextInput>'.ts(2322)index.d.ts(89, 18): 'current' is declared here.index.d.ts(140, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & TextInputProps & RefAttributes<TextInput> & { containerStyle?: StyleProp<ViewStyle>; ... 15 more ...; renderErrorMessage?: boolean | undefined; } & Partial<...>'
My code is the following:
...import { useState, useRef } from 'react'import { Input } from 'react-native-elements'export default function PublishRecipeScreen({ navigation }: RootTabScreenProps<'Publish a recipe'>) { const ingredientInput = useRef<null | HTMLInputElement>(null) const stepInput = useRef<null | HTMLInputElement>(null) return (<SafeAreaView><ScrollView contentContainerStyle={styles.container}><Text style={styles.title}>Ingredients:</Text> {recipeIngredients ? recipeIngredients.map((item, i) => <p key={i}>{item}</p>) : null}<Input inputContainerStyle={styles.textInput} placeholder='Ingredient ...' errorStyle={{ color: 'red' }} errorMessage={formHasErrors && !recipeIngredients ? 'Please provide the recipe ingredients' : undefined} onChangeText={(text: string) => setIngredient(text)} multiline = {true} ref={ingredientInput.current} /><TouchableOpacity onPress={() => { setRecipeIngredients([... recipeIngredients, ingredient]) setIngredient('') }}><Text>New ingredient</Text></TouchableOpacity><Text style={styles.title}>Recipe:</Text> {recipeSteps ? recipeSteps.map((item, i) => <p key={i}>{item}</p>) : null}<Input inputContainerStyle={styles.textInput} placeholder='Recipe step ...' errorStyle={{ color: 'red' }} errorMessage={formHasErrors && !recipeSteps ? 'Please provide the recipe steps' : undefined} onChangeText={(text: string) => setStep(text)} multiline = {true} ref={stepInput} /> ...
I looked for the element definition and is as following:
interface FunctionComponent<P = {}> { (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null; propTypes?: WeakValidationMap<P> | undefined; contextTypes?: ValidationMap<any> | undefined; defaultProps?: Partial<P> | undefined; displayName?: string | undefined; }
I tried using that as the ref type but didn't work either.What am I supposed to use as the ref type or how could I figure it out?
Full code can be found here: https://github.com/coccagerman/mixr
Thanks!