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

React native - Using useRef with Input element from react-native-elements library

$
0
0

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!


Viewing all articles
Browse latest Browse all 6287

Trending Articles



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