TS2786 TypeScript not reconizing UI-Kitten components

Question

Error message on IDE:

TS2786: 'ApplicationProvider' cannot be used as a JSX component.
Its instance type 'ApplicationProvider' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("C:/Users/someuser/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.
Type '{}' is not assignable to type 'ReactPortal'.

Not just ApplicationProvider, but every component that I imported from UI-kitten/components has the "not a valid JSX element" error.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * Generated with the UI Kitten TypeScript template
 * https://github.com/akveo/react-native-ui-kitten
 *
 * Documentation: https://akveo.github.io/react-native-ui-kitten/docs
 *
 * @format
 */

import React from 'react';
import {
  ImageProps,
  StyleSheet,
} from 'react-native';
import {
  ApplicationProvider,
  Button,
  Icon,
  IconRegistry,
  Layout,
  Text,
} from '@ui-kitten/components';
import { EvaIconsPack } from '@ui-kitten/eva-icons';
import * as eva from '@eva-design/eva';

/**
 * Use any valid `name` property from eva icons (e.g `github`, or `heart-outline`)
 * https://akveo.github.io/eva-icons
 */
const HeartIcon = (props?: Partial<ImageProps>): React.ReactElement<ImageProps> => (
  <Icon {...props} name='heart'/>
);

export default (): React.ReactFragment => (
  <>
    <IconRegistry icons={EvaIconsPack}/>
    <ApplicationProvider {...eva} theme={eva.light}>
      <Layout style={styles.container}>
        <Text style={styles.text} category='h1'>
          Welcome to UI Kitten 😻
        </Text>
        <Text style={styles.text} category='s1'>
          Start with editing App.js to configure your App
        </Text>
        <Text style={styles.text} appearance='hint'>
          For example, try changing theme to Dark by using eva.dark
        </Text>
        <Button style={styles.likeButton} accessoryLeft={HeartIcon}>
          LIKE
        </Button>
      </Layout>
    </ApplicationProvider>
  </>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    textAlign: 'center',
  },
  likeButton: {
    marginVertical: 16,
  },
});

Reproduce:

npx react-native init MyApp --template @ui-kitten/template-ts

It seems like when updating the @types/react to the latest version (18.0.6) will solve the problem. But then EXPO is not supporting version 18. It also seems like a problem only raised recently.

everything comes natively from the official template @ui-kitten/template-ts — Trevor Philips
– Trevor Philips, Commented Apr 26, 2022 at 12:24
I'm also facing the same issue. Have you been able to resolve the issue? — Wahiduzzaman Hridoy
– Wahiduzzaman Hridoy, Commented May 10, 2022 at 6:33
I'm also facing the same and following this post for a solution — Wells
– Wells, Commented May 15, 2022 at 7:32

Hyrial · Accepted Answer · 2022-05-22 20:44:56Z

3

Solution here.

Add "resolutions": { "@types/react": "~17.0.21" }, to package.json
Delete node_modules
Reinstall with yarn install or equivalent

answered May 22, 2022 at 20:44

Hyrial

1,8983 gold badges21 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

TS2786 TypeScript not reconizing UI-Kitten components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related