Error message on IDE:
Error Encountered: 'ApplicationProvider' cannot be used as a JSX component.
The instance type 'ApplicationProvider' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Assignment Issue: Type 'React.ReactNode' is not compatible with type 'import("C:/Users/someuser/node_modules/@types/react/index").ReactNode'.
Type '{}' cannot be assigned to type 'ReactNode'.
Type '{}' is not suitable for type 'ReactPortal'.
Interestingly, not just ApplicationProvider but every component imported from UI-kitten/components is showing the same "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 appears that updating @types/react to the latest version (18.0.6) could resolve the issue. However, EXPO does not support version 18. This problem seems to have emerged recently.