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

Typescript: How to type ForwardRefExoticComponent + ComponentType

$
0
0

I am trying to type a Component prop that could accept both:

const MyInput = RN.TextInput

As well as something more custom:

const MyInput = React.forwardRef<RN.TextInput, RN.TextInputProps>(textProps: RN.TextInputProps) =><RN.View><RN.TextInput {...props} /></RN.View>

So, I tried:

const MyComp = (props: {  MyInput: React.ComponentType<RN.TextInputProps>}) => ...

But when trying to set a ref, I get:

const MyComp = ({ MyInput }) => {  const ref = React.useRef<InputText>()  return <MyInput ref={ref}}/*Type '{ ref: RefObject<TextInput>; style: { height: number; fontSize: number; lineHeight: number; }; selectTextOnFocus: true; value: string; onChangeText: (text: string) => void; multiline: true; onKeyPress: (e: NativeSyntheticEvent<...>) => void; onSubmitEditing: () => void; onCancelEditing: () => void; }' is not assignable to type 'IntrinsicAttributes & TextInputProps & { children?: ReactNode; }'.  Property 'ref' does not exist on type 'IntrinsicAttributes & TextInputProps & { children?: ReactNode; }'.ts(2322)*/

Then I tried:

const MyComp = (props: {  MyInput: React.ForwardRefExoticComponent<    RN.TextInputProps & React.RefAttributes<RN.TextInput>>}) => ...

But in this case, when trying to pass RN.TextInput as prop, I get:

<MyComp MyInput={RN.TextInput} />/*Property '$$typeof' is missing in type 'typeof TextInput' but required in type 'ForwardRefExoticComponent<TextInputProps & RefAttributes<TextInput>>'.ts(2741)*/

Here is a sandbox showing the issue


Viewing all articles
Browse latest Browse all 6287

Trending Articles



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