2 Problems with Typescript

Hello,

I’m having 2 issues when converting my react-native/expo app to typescript. Searched google for help but no luck. First, I get a crash with Marker in typescript only. Works just fine in JS. I know my coords are properly set.

      return (
        <MapView
          style={{ flex: 1 }}
          provider={PROVIDER_GOOGLE}
          initialRegion={{
            latitude: this.props.curLoc.loc.coords.latitude,
            longitude: this.props.curLoc.loc.coords.longitude,
            latitudeDelta: 0.005,
            longitudeDelta: 0.005,
          }}
        >
          <Marker coordinate={this.props.curLoc.loc.coords} />
        </MapView>
      );

The error is:
Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Second problem, I can’t find the types for TaskManager. I made my own but if some exists, I would rather use that,

My versions:

  "dependencies": {
    "@expo/samples": "2.1.1",
    "expo": "^32.0.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-native-elements": "^1.1.0",
    "react-navigation": "^3.0.9",
    "react-redux": "^6.0.0",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@expo/vector-icons": "^8.1.0",
    "@types/expo": "^32.0.13",
    "@types/expo__vector-icons": "^9.0.1",
    "@types/react-native": "^0.57.60",
    "@types/react-redux": "^7.0.9",
    "babel-preset-expo": "^5.0.0",
    "jest-expo": "^32.0.0",
    "typescript": "^3.5.1"
  },

Cheers!

Take a look here: Incorrect MapView types · Issue #4118 · expo/expo · GitHub

Read my posts. Their types aren’t exported correctly on most modules resulting it TS basically breaking.

I’m not sure that Expo team realize (based on many of their responses to TS issues) that TS enforces things in such a way that you often need to import them differently than in JS. This depends on your tsconfig, however if you copied the suggested settings from Expo, then you’ll run into this (not that they’re bad, just more restrictive that JS by default in terms of imports).

The types, as they are provided from react-native-maps themselves are not exported correctly from Expo, but you can work around in from the suggestions in my post above.

On a side note, if you want to uses react-native-maps-directions I have a fork that’s been modified and properly typed (I also fixed the types on the original repo to be exported correctly) such as it’s fully Expo-compatible.

If you have a lot of trouble with Expo’s react-native-maps types, you can alternatively try using the @types package I created for that repo @types/react-native-maps and import your types from there (this will fix anything Expo has broken with this package for types, but not actual modules - you’ll need to import those in the method outlined in that GitHub post).

Hope that helps.

  • NOTE: this shouldn’t be closed; @Expo you still need to fix this. I’ve attempted to do so and may place a PR but there are so many instances of this in Expo I threw my hands up as it was taking too much valuable time.

Thank you for your reply. Very helpful! But in the end, we are moving away from Expo. Our app was full React Web/PWA and we are trying the PWA builder (Cordova) to quickly go native. So far so good and we are still with one code base-ish. Regards.

good luck!

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.