TypeError: Component is not a function on adding forwardRef

Question

Hi I was trying to add forwardRef to a child component but getting the following on adding the forwardRef: TypeError: Component is not a function

The component is defined as below:

import React from 'react';
import { forwardRef } from 'react';
import { TextInputFocusEventData } from 'react-native';
import { NativeSyntheticEvent, StyleSheet } from 'react-native';
import { Input, InputProps } from 'react-native-elements';
import { Metrics, Colors } from '../../theme';
import Icons from '../Icons';


const CustomTextInput2 = forwardRef<TextInput, ICustomtextnputProps>((props, ref) => {
    const { name, required } = props;

    return (
        <Input
            rightIcon={<Icons name="right" />}
            placeholder={name?.concat(required ? '*' : '')}
            inputContainerStyle={styles.inputContainer}
            inputStyle={styles.inputText}
            {...props}
        />
    )
});
....

Here is the StackTrace:

ExceptionsManager.js:180 TypeError: Component is not a function

This error is located at:
    in Unknown (at AddDetailsModal/index.tsx:67)
    in RCTView (at View.js:34)
    in View (at AddDetailsModal/index.tsx:66)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:217)
    in AnimatedComponent (at createAnimatedComponent.js:278)
    in AnimatedComponentWrapper (at CustomModal/index.tsx:71)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:217)
    in AnimatedComponent (at createAnimatedComponent.js:278)
    in AnimatedComponentWrapper (at TouchableOpacity.js:221)
    in TouchableOpacity (at TouchableOpacity.js:271)
    in Unknown (at CustomModal/index.tsx:70)
    in RCTView (at View.js:34)
    in View (at KeyboardAvoidingView.js:220)
    in KeyboardAvoidingView (at CustomModal/index.tsx:69)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:107)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:134)
    in AppContainer (at Modal.js:228)
    in RCTView (at View.js:34)
    in View (at Modal.js:249)
    in VirtualizedListContextResetter (at Modal.js:247)
    in RCTModalHostView (at Modal.js:234)
    in Modal (at CustomModal/index.tsx:63)

is there anything I have to change to add a forwardRef to this component?

Underslung

Show the full error stack. Check the props of Input – Elisaelisabet

@slideshowp2 added the stack trace, also Input is imported from 'react-native-elements' package – Underslung

You're going to need to provide a Minimal, Reproducible Example. I tried to run your code and I'm not getting any error. So the error is in something that you haven't included in your question. – Corpuscle

Answer 1

after wrap the component by React.forwardRef and pass ref from parent component you need to reload the app ! i faced that now and saw the same error message and simply solved by reloading the app

Savanna

i end up coming back to this comment everytime fml – Calley

I'd laugh and didn't act but since it's react, I tried and 20mins of struggle ended, thx – Champagne

It's also happens when you remove a forward ref – Heterogeneous