Errors when configuring react native with typescript

Viewed 4012

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.

2 Answers

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.

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.

Related