I've got a TypeScript function which returns a React Native View.
import React from "react";import JSX, {View} from "react-native";class DummyClass { static getView() { return (<View style={{flex: 1}}/> ); }}export default DummyClass;And I'm calling this function in this way:
import JSX from "react-native";import DummyClass from "./util/dummy";const DummyWrapper = () => { return (DummyClass.getView());};export default DummyWrapper;And when I run eslint, I get a warning.
5:5 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
So, I need to be returning something. JSX.Element seems reasonable enough, but that doesn't seem to be working. For one, when I try to return a JSX.Element, VSCode can't resolve it and pretends it's any instead. And moreover, it causes errors in other places that call the function.
So, doing this:static getView() : JSX.Element {and const DummyWrapper = () : JSX.Element => {
Results in the following error in DummyCaller:
5:5 error Unsafe return of an any typed value @typescript-eslint/no-unsafe-return
So now I'm not sure exactly what to do. I've tried a few other things, such as returning View, typeof View, React.Component (and typeof), and a few other things. I've also messed around with where JSX is being imported from. If I import from react, it seems to work even worse than if I import it from react-native. Also in my research, I see the most common problem is that one's React and React Native types are out of date, but as far as I can tell, I'm on the most up-to-date versions.
My packages.json:
{"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","lint": "eslint -c .eslintrc.js --ext .tsx ." },"dependencies": {"@dudigital/react-native-zoomable-view": "^1.0.15","@react-native-community/masked-view": "^0.1.10","@react-navigation/native": "^5.7.6","@react-navigation/stack": "^5.9.3","@types/react-native-vector-icons": "^6.4.6","change-case": "^4.1.1","expo": "~39.0.2","expo-status-bar": "~1.0.2","react": "16.13.1","react-dom": "16.13.1","react-native": "https://github.com/expo/react-native/archive/sdk-39.0.2.tar.gz","react-native-gesture-handler": "^1.8.0","react-native-paper": "^4.2.0","react-native-reanimated": "^1.13.1","react-native-safe-area-context": "^3.1.8","react-native-screens": "^2.11.0","react-native-tab-view": "^2.15.2","react-native-vector-icons": "^7.1.0","react-native-web": "^0.13.18" },"devDependencies": {"@babel/core": "~7.9.0","@types/jest": "^26.0.15","@types/react": "^16.9.53","@types/react-dom": "^16.9.8","@types/react-native": "^0.63.27","@types/react-navigation": "^3.4.0","@types/react-redux": "^7.1.9","@types/react-test-renderer": "^16.9.3","@typescript-eslint/eslint-plugin": "^4.5.0","@typescript-eslint/parser": "^4.5.0","commonjs": "latest","eslint": "^7.11.0","eslint-plugin-jsdoc": "^30.7.3","eslint-plugin-prefer-arrow": "^1.2.2","eslint-plugin-react": "^7.21.5","react-native-typescript-transformer": "^1.2.13","requirejs": "latest","ts-jest": "^26.4.1","tslib": "^2.0.3","typescript": "^4.0.3" },"private": true}