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?

@slideshowp2 added the stack trace, also Input is imported from 'react-native-elements' package — suvodipMondal
– suvodipMondal, Commented Sep 3, 2021 at 14:58
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. — Linda Paiste
– Linda Paiste, Commented Sep 12, 2021 at 16:38

karim elsaidy · Accepted Answer · 2021-12-25 00:55:38Z

132

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

answered Dec 25, 2021 at 0:55

karim elsaidy

1,4361 gold badge11 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jeffery Tang Over a year ago

i end up coming back to this comment everytime fml

nerkn Over a year ago

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

Simon Over a year ago

It's also happens when you remove a forward ref

bradleygriffith Jun 23 at 15:38

Is this new or am I losing my mind? I feel like Ive freely added forwardRef to code in development for years without needing to restart my dev server, whether in Next.js or otherwise. Im using Next.js (15) on this current work and it is my first time seeing this. Not necessarily a Next.js issue, but I didnt see this in the same react version on a recent non-Next.js site.

Sandeep Amarnath Aug 11 at 20:02

This comment created an Aha! moment. Thanks - it saved me an hour after I had already lost one trying to find the answer. The LIVE RELOAD feels like it's reloading the app, but looks like we need to manually reload like you said for some reason.

Collectives™ on Stack Overflow

TypeError: Component is not a function on adding forwardRef

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related