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

React Native useRef with custom TextInput and TypeScript

$
0
0

I am getting the following warning on my custom input component:

'TextInput' refers to a value, but is being used as a type here. Did you mean 'typeof TextInput'?

When referencing it using useRef like so:

const lastNameRef = useRef<TextInput>(null)

Here's what TextInput looks like:

import React, { forwardRef } from "react"import {  TextInput as ReactTextInput,  TextInputProps as ReactTextInputProps,} from "react-native"import styled from "styled-components/native"import {  compose,  space,  SpaceProps,  color,  ColorProps,  layout,  LayoutProps,  flexbox,  FlexboxProps,  border,  BorderProps,  position,  PositionProps,  background,  BackgroundProps,  typography,  TypographyProps,} from "styled-system"export type TextInputProps = ReactTextInputProps &  SpaceProps &  ColorProps &  LayoutProps &  FlexboxProps &  BorderProps &  PositionProps &  BackgroundProps &  TypographyPropsconst StyledTextInput = styled.TextInput<TextInputProps>`  ${compose(    space,    color,    layout,    flexbox,    border,    position,    background,    typography,  )};`export const TextInput = forwardRef<ReactTextInput, TextInputProps>(  (    {      fontFamily = "body",      fontWeight = "regular",      fontSize = 1,      color = "text",      ...rest    },    ref,  ) => {    return (<StyledTextInput        {...{ ref, fontFamily, fontWeight, fontSize, color, ...rest }}      />    )  },)

I am forwarding the reference, which is what should get rid of that warning.

Any suggestions?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



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