Odtnhj

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.

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.