11

I have simple Paragraph component set up in a following way

import * as React from 'react';
import {Text} from 'react-native';

const { memo } = React;

/**
 * Component
 */
function Paragraph({ children }) {
  return (
    <Text>
      {children}
    </Text>
  );
}

export default memo(Paragraph);

Whenever I use <Paragraph /> in my application I receive following error from typescript:

JSX element type 'ReactElement | null' is not a constructor function for JSX elements. Type 'ReactElement' is not assignable to type 'Element'.ts(2605)

This happens to a lot of my elements and started happening since I updated to lates typings for react and react-native from definitely typed. I'm unable to pinpoint a change that might be causing this error.

2 Answers 2

20
+100

This is caused by different versions of typing libraries in the autogenerated files, probably messed up by updating it, remove node_modules and yarn.lock or package-lock.json then reinstall.

2

Small tip: when it happens, it's easier to see where the error is coming from when you provide the component return type explicitly (here: React.FC):

const Paragraph: React.FC = ({ children }) => (
  <Text>
    {children}
  </Text>
);

If the error says something about the <Text /> component not returning ReactElement<any> | null, you know that component is the culprit. If not, it's most likely about types not being in sync just like @ramirozap suggested.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.