Troubleshooting a ForwardRef issue in a TypeScript and React Native project

Question

Troubleshooting a ForwardRef issue in a TypeScript and React Native project

Encountering a ts error while using forwardRef.

// [ts] Property 'forwardRef' does not exist on type 'typeof React'.
const MyComponent = React.forwardRef((props: Props, ref: any) => ...

An issue arises in React Native when the parent component throws this error:

Invariant Violation: Element type is invalid: expected a string (for build-in components) or a class/function (for composite components) but got: object

Any suggestions for resolving this dilemma?

javascript typescript react-native

Answer 1

Answer №1

As outlined in the definitions:

function forwardRef<T, P = {}>(Component: RefForwardingComponent<T, P>): ComponentType<P & ClassAttributes<T>>;
interface RefForwardingComponent<T, P = {}> {
    (props: P & { children?: ReactNode }, ref?: Ref<T>): ReactElement<any> | null;
    propTypes?: ValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;
}

The argument ref is optional, you can try the following:

To create a ref object within a class with your desired target type (div or View in react-native), use:

private divRef: React.RefObject<div> = React.createRef();

In the props interface for the forwarded component, expose it as an optional property:

interface Props {
  ref?: React.RefObject<div>;
}

Define the forwarded component using React.ComponentType:

const ComponentWithForwardedRef: React.ComponentType<Props> = 
  React.forwardRef((props: Props, ref?: React.Ref<div>) => (
    <div ref={ref}>{props.message}</div>
  ));

When creating an instance of the component with the forwarded ref, pass the created ref object as a prop:

<ComponentWithForwardedRef ref={this.divRef} />

Alternatively, bring everything together into one place:

import * as React from "react";
import { render } from "react-dom";

interface Props {
  message: string;
  ref?: React.RefObject<div>;
}

const ComponentWithForwardedRef: React.ComponentType<Props> = 
  React.forwardRef((props: Props, ref?: React.Ref<div>) => (
    <div ref={ref}>{props.message}</div>
  ));

class App extends React.Component<Props> {
  private divRef: React.RefObject<div> = React.createRef();

  public componentDidMount() {
    const div = this.divRef.current;
    // Check the console!
    console.log(div);
  }

  public render() {
    return (
      <ComponentWithForwardedRef ref={this.divRef} {...this.props} />
    )
  }
}

render(<App message="hello world" />, document.getElementById("root"));

Link for future reference: https://codesandbox.io/s/6v152q394k

Dependencies (for reference purposes)

"@types/react": "^16.3.11",
"@types/react-native": "^0.55.19",
"react-native": "0.55.2",
"typescript": "^2.8.1"

Answer 2

As outlined in the definitions:

function forwardRef<T, P = {}>(Component: RefForwardingComponent<T, P>): ComponentType<P & ClassAttributes<T>>;
interface RefForwardingComponent<T, P = {}> {
    (props: P & { children?: ReactNode }, ref?: Ref<T>): ReactElement<any> | null;
    propTypes?: ValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;
}

The argument ref is optional, you can try the following:

To create a ref object within a class with your desired target type (div or View in react-native), use:

private divRef: React.RefObject<div> = React.createRef();

In the props interface for the forwarded component, expose it as an optional property:

interface Props {
  ref?: React.RefObject<div>;
}

Define the forwarded component using React.ComponentType:

const ComponentWithForwardedRef: React.ComponentType<Props> = 
  React.forwardRef((props: Props, ref?: React.Ref<div>) => (
    <div ref={ref}>{props.message}</div>
  ));

When creating an instance of the component with the forwarded ref, pass the created ref object as a prop:

<ComponentWithForwardedRef ref={this.divRef} />

Alternatively, bring everything together into one place:

import * as React from "react";
import { render } from "react-dom";

interface Props {
  message: string;
  ref?: React.RefObject<div>;
}

const ComponentWithForwardedRef: React.ComponentType<Props> = 
  React.forwardRef((props: Props, ref?: React.Ref<div>) => (
    <div ref={ref}>{props.message}</div>
  ));

class App extends React.Component<Props> {
  private divRef: React.RefObject<div> = React.createRef();

  public componentDidMount() {
    const div = this.divRef.current;
    // Check the console!
    console.log(div);
  }

  public render() {
    return (
      <ComponentWithForwardedRef ref={this.divRef} {...this.props} />
    )
  }
}

render(<App message="hello world" />, document.getElementById("root"));

Link for future reference: https://codesandbox.io/s/6v152q394k

Dependencies (for reference purposes)

"@types/react": "^16.3.11",
"@types/react-native": "^0.55.19",
"react-native": "0.55.2",
"typescript": "^2.8.1"

Troubleshooting a ForwardRef issue in a TypeScript and React Native project

Answer №1

Similar questions

Top method for troubleshooting JavaScript code in Visual Studio 2010

Can we access global variables directly in an Angular 2 HTML template?

Unable to submit form in Node.js with Express

How do you properly perform typechecking on a custom fetch function in ReactQuery? I'm encountering an error that states: "....is of an unknown type."

Exploring the Implementation of Multiple Form Validations in SharePoint using PreSaveAction

Struggling with the compilation of this Typescript code

Form submissions are not saving checkbox answers

Intellisense fails to function properly after attempting to import a custom npm package

"Utilize Regular Expressions to conceal part of a text string with a

Using Rust WebAssembly in Next.js

Using React-Native on Android: Sending an Object as a Property to Native Android User Interface Component

How can we use SWR to fetch user data conditionally based on their logged-in state?

Utilizing Leaflet-geotiff in an Angular 6 Environment

Sending a request in Vue.js and not receiving a defined response

The error encountered is due to an invalid assignment on the left-hand side

What is the best way to store JSON encoded items in an array using square brackets?

Javascript retrieve the style of an element in every possible state

The addition operator cannot be used with the Number type and the value of 1

WebpackError: The global object "document" could not be found

Navigating through playlists on Ionic