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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With