I just started a new project but i'm getting the following error with various packages, for example React Native Reanimated and React Navigation Stack.
This is my package.json.
{"name": "foodmatch","version": "1.0.0","main": "index.js","scripts": {"start": "expo start --dev-client","android": "expo run:android","ios": "expo run:ios","web": "expo start --web","prepare": "yarn husky install","lint": "yarn eslint --ext .tsx --ext .ts src/ --fix","format": "yarn prettier --write ./src" },"lint-staged": {"src/**/*.{ts,tsx}": ["eslint --ext .tsx --ext .ts src/ --fix" ],"./src/**": ["prettier --write ./src" ] },"husky": {"hooks": {"pre-commit": "lint-staged" } },"dependencies": {"@react-navigation/native": "^6.0.10","@react-navigation/stack": "^6.2.1","expo": "~44.0.2","expo-app-loading": "~1.3.0","expo-font": "^10.0.5","expo-splash-screen": "~0.14.1","expo-status-bar": "~1.2.0","react": "17.0.1","react-dom": "17.0.1","react-native": "0.64.3","react-native-gesture-handler": "~2.1.0","react-native-reanimated": "~2.3.1","react-native-responsive-fontsize": "^0.5.1","react-native-safe-area-context": "3.3.2","react-native-web": "0.17.1","styled-components": "^5.3.5" },"devDependencies": {"@babel/core": "^7.12.9","@types/react": "~17.0.21","@types/react-native": "~0.64.12","@types/styled-components-react-native": "^5.1.3","@typescript-eslint/eslint-plugin": "^5.20.0","@typescript-eslint/parser": "^5.20.0","babel-plugin-module-resolver": "^4.1.0","eslint": "^8.13.0","eslint-config-airbnb": "^19.0.4","eslint-config-prettier": "^8.5.0","eslint-plugin-import": "^2.26.0","eslint-plugin-jsx-a11y": "^6.5.1","eslint-plugin-prettier": "^4.0.0","eslint-plugin-react": "^7.29.4","eslint-plugin-react-hooks": "^4.4.0","husky": "^7.0.4","lint-staged": "^12.3.8","prettier": "^2.6.2","typescript": "~4.3.5" },"private": true}This is the error.
'Navigator' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component<Omit<DefaultRouterOptions<string> & { id?: string | undefined; children: ReactNode; screenListeners?: Partial<...> | ... 1 more ... | undefined; screenOptions?: StackNavigationOptions | ... 1 more ... | undefined; defaultScreenOptions?: StackNavigationOptions | ... 1 more ... | und...' is not a valid JSX element. Type 'Component<Omit<DefaultRouterOptions<string> & { id?: string | undefined; children: ReactNode; screenListeners?: Partial<{ transitionStart: EventListenerCallback<StackNavigationEventMap, "transitionStart">; ... 7 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | undefined;...' is not assignable to type 'Element | ElementClass | null'. Type 'Component<Omit<DefaultRouterOptions<string> & { id?: string | undefined; children: ReactNode; screenListeners?: Partial<{ transitionStart: EventListenerCallback<StackNavigationEventMap, "transitionStart">; ... 7 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | undefined;...' is not assignable to type 'ElementClass'. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'.'Animated.View' cannot be used as a JSX component. Its instance type 'View' 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("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'.ts(2786)I have a project with the same packages and configuration (babel, eslint, etc) and it works fine, it looks like a type error because the project works just like it is intended to, but IntelliSense claims these errors.
I also get the following when i try to use one of the components with Styled() from styled-components.
No overload matches this call. Overload 1 of 2, '(component: AnyStyledComponent): ThemedStyledFunction<any, DefaultTheme, any, any>', gave the following error. Argument of type 'typeof Text' is not assignable to parameter of type 'AnyStyledComponent'. Type 'typeof Text' is not assignable to type 'StyledComponent<any, any, any, never>'. Type 'typeof Text' is not assignable to type 'string'. Overload 2 of 2, '(component: ComponentType<any>): ThemedStyledFunction<ComponentType<any>, DefaultTheme, {}, never>', gave the following error. Argument of type 'typeof Text' is not assignable to parameter of type 'ComponentType<any>'. Type 'typeof Text' is not assignable to type 'ComponentClass<any, any>'. Types of property 'contextType' are incompatible. Type 'React.Context<any> | undefined' is not assignable to type 'import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").Context<any> | undefined'. Type 'React.Context<any>' is not assignable to type 'import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").Context<any>'. The types of 'Provider.propTypes' are incompatible between these types. Type 'React.WeakValidationMap<React.ProviderProps<any>> | undefined' is not assignable to type 'import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").WeakValidationMap<import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").ProviderProps<any>> | undefined'. Type 'React.WeakValidationMap<React.ProviderProps<any>>' is not assignable to type 'import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").WeakValidationMap<import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").ProviderProps<any>>'. Types of property 'children' are incompatible. Type 'React.Validator<React.ReactNode> | undefined' is not assignable to type 'import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").Validator<import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode> | undefined'. Type 'React.Validator<React.ReactNode>' is not assignable to type 'import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/prop-types/index").Validator<import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode>'. Type 'React.ReactNode' is not assignable to type 'import("D:/Users/bilug/Documents/Repositorios/foodMatch/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'.ts(2769)