Expo and react native paper

[AnilSonix]

I created a simple expo typescript project and add react native paper.
But each time I try to use any component, vs code shows error that 'It cant be used as JSX Component'

The package.json file

{
  "name": "rn-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~45.0.0",
    "expo-status-bar": "~1.3.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-paper": "^4.12.1",
    "react-native-vector-icons": "^9.1.0",
    "react-native-web": "0.17.7"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.66.13",
    "typescript": "~4.3.5"
  },
  "private": true
}

A simple App.tsx

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import {  Badge, Button, Provider as PaperProvider } from "react-native-paper";

export default function App() {
  return (
    <PaperProvider>
      <View style={styles.container}>
        <Text>Open up App.tsx to start working on your apps!</Text>
        <>
        <Badge>3</Badge>
          </>
        <StatusBar style="auto" />
      </View>
    </PaperProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

The error is shown on usage of Badge.
'Badge' cannot be used as a JSX component.

[github-actions]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• expo (found: 45.0.0, latest: 45.0.5)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[AnilSonix]

I'm able to run the app though, but I cant get rid of this error in vs code.

[raajnadar]

Add this to your package.json and run yarn or npm install

"resolutions": {
	"@types/react": "~17.0.21"
},

[AnilSonix]

Add this to your package.json and run yarn or npm install

"resolutions": {
	"@types/react": "~17.0.21"
},

What does this means and used for ?

[raajnadar]

Similar issue same solution, read the thread for more info react-navigation/react-navigation#10507

[AnilSonix]

Thanks, it worked 🙏