Error message on IDE:
TS2786: 'ApplicationProvider' cannot be used as a JSX component. Itsinstance type 'ApplicationProvider' is not a valid JSX element.
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.