Errors when configuring react native with typescript

Question

To configure my react native project I followed this procedure minutely: https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native. But this I'm going to compile I get fifteen errors from typescript compiler.

These are some of the errors:

Cannot redeclare block-scoped variable 'navigator'.
Subsequent property declarations must have the same type. Property 'geolocation' must be of type 'Geolocation', but here has type 'GeolocationStatic'
Cannot find name 'Map'.
Subsequent variable declarations must have the same type
Duplicate identifier 'RequestInfo'.
'FormData' was also declared here.
Cannot redeclare block-scoped variable 'console'.
annot redeclare block-scoped variable 'navigator'.

Information:

"@types/react": "^16.7.3",
"@types/react-native": "^0.57.8",
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.49.1",
"react-native-typescript-transformer": "^1.2.10",
"react-test-renderer": "16.6.0-alpha.8af6728",
"typescript": "^3.1.6"

UPDATE

tsconfig.json

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "allowJs": true,
    "jsx": "react-native",
    "sourceMap": true,
    "outDir": "./build",
    "rootDir": "./src",
    "strict": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "exclude": ["build", "index.js", "node_modules"]
}

package.json

{
  "name": "test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "tsc": "tsc --watch"
  },
  "dependencies": {
    "react": "16.6.0-alpha.8af6728",
    "react-native": "^0.57.1"
  },
  "devDependencies": {
    "@types/react": "^16.7.3",
    "@types/react-native": "^0.57.8",
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.49.1",
    "react-native-typescript-transformer": "^1.2.10",
    "react-test-renderer": "16.6.0-alpha.8af6728",
    "typescript": "^3.1.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

App.tsx

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

rn-cli.config.js

module.exports = {
    getTransformModulePath() {
      return require.resolve('react-native-typescript-transformer');
    },
    getSourceExts() {
      return ['ts', 'tsx'];
    },
  };

The other files are the files autogenerated by react-native.

Please provide code sufficient to reproduce the problem so we can find the cause. — Matt McCutchen
– Matt McCutchen, Commented Nov 13, 2018 at 15:00
You're absolutely right @Matt McCutchen, I just added details — Niccolò Caselli
– Niccolò Caselli, Commented Nov 13, 2018 at 18:23

Matt McCutchen · Accepted Answer · 2018-11-13 18:47:18Z

6

It looks like the React Native type declarations conflict with the browser DOM declarations that TypeScript loads by default. To stop loading the DOM declarations, set the lib option to ["es2017"] (matching your target) in tsconfig.json. (The default value of lib would include es2017 as well as dom.) There's a similar question (although the correct answer to set the lib option is buried in there) and additional discussion in this issue report.

answered Nov 13, 2018 at 18:47

Matt McCutchen

31.4k3 gold badges76 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Niccolò Caselli Over a year ago

Thank you so much you've solved the problem. Do you believe that in the future I will have other conflicts caused by typescript, or can I go quietly? I've never used typescript for the front end and I'd rather not have other problems.

Matt McCutchen Over a year ago

I'd say that realistically, you are likely to have further TypeScript-related problems at some point but they are likely to be solvable with a modest amount of work. It's your decision whether you value the type checking and editor services enough to use TypeScript. (I certainly do, or I suppose I wouldn't be here.)

Artsiom Seliuzhytski · Accepted Answer · 2018-11-14 11:26:29Z

1

For those who are trying to configure react-native with typescript:

Check our boilerplate. This repo contains all initial configurations to make things working with new expo-31, babel 7, typescript and jest.

answered Nov 14, 2018 at 11:26

Artsiom Seliuzhytski

3921 gold badge2 silver badges8 bronze badges

Collectives™ on Stack Overflow

Errors when configuring react native with typescript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related