Update README.md

added new solution for debugging

.travis.yml

@@ -1,7 +1,9 @@
 language: node_js
 node_js:
   - "node"
-install: true
+cache:
+  directories:
+    - "node_modules"
 deploy:
   on:
     tags: true

App.tsx

@@ -6,7 +6,7 @@
  * https://github.com/emin93/react-native-template-typescript
  */
 
-import * as React from 'react';
+import React, { Component } from 'react';
 import {
   Platform,
   StyleSheet,
@@ -21,8 +21,8 @@ const instructions = Platform.select({
     'Shake or press menu button for dev menu',
 });
 
-interface Props {};
-export default class App extends React.Component<Props> {
+interface Props {}
+export default class App extends Component<Props> {
   render() {
     return (
       <View style={styles.container}>

README.md

@@ -43,6 +43,30 @@ The React Native CLI supports automatic installation of production dependencies
 
 The React Native CLI will do everything just as without a template and afterwards overwrite the files with the ones from this template. This means you don't have to worry about incompatibility issues with later React Native upgrades.
 
+### Does debugging work too?
+
+Yes it does, but you need to enable the `sourceMap` option in the `tsconfig.json`.
+
+Make sure it looks something like this:
+```json
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "jsx": "react",
+    "module": "es6",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "noImplicitAny": true,
+    "target": "es6",
+    "sourceMap": true
+  },
+  "exclude": ["node_modules"]
+}
+```
+
+This is not enabled by default as it is unknown if it has any negative effects on the transpilation time. For more information make sure to check out the [post by Nicolas Hémonic](https://medium.com/@NicolasHemonic/hi-mo-mac-d18286202602).
+
 ## :globe_with_meridians: Links
 
 -   ["Using React Native with TypeScript just became simple" on Medium](https://medium.com/@emin93/react-native-typescript-b965059109d3)

__tests__/App.tsx

@@ -1,9 +1,9 @@
 import 'react-native';
-import * as React from 'react';
+import React from 'react';
 import App from '../App';
 
 // Note: test renderer must be required after react-native.
-import * as renderer from 'react-test-renderer';
+import renderer from 'react-test-renderer';
 
 it('renders correctly', () => {
   const tree = renderer.create(

devDependencies.json

@@ -1,9 +1,9 @@
 [
-    "typescript",
-    "react-native-typescript-transformer",
-    "ts-jest",
-    "@types/react",
-    "@types/react-native",
-    "@types/jest",
-    "@types/react-test-renderer"
+  "@types/jest",
+  "@types/react",
+  "@types/react-native",
+  "@types/react-test-renderer",
+  "react-native-typescript-transformer",
+  "ts-jest",
+  "typescript"
 ]

jest.json

@@ -1,15 +1,15 @@
 {
-    "transform": {
-        "^.+\\.tsx?$": "ts-jest"
-    },
-    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
-    "moduleFileExtensions": [
-        "ts",
-        "tsx",
-        "js",
-        "jsx",
-        "json",
-        "node"
-    ],
-    "modulePaths": ["<rootDir>"]
+  "transform": {
+    "^.+\\.tsx?$": "ts-jest"
+  },
+  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
+  "moduleFileExtensions": [
+    "ts",
+    "tsx",
+    "js",
+    "jsx",
+    "json",
+    "node"
+  ],
+  "modulePaths": ["<rootDir>"]
 }

package.json

@@ -1,25 +1,29 @@
 {
-    "name": "react-native-template-typescript",
-    "version": "0.0.1",
-    "description": "Clean and minimalist React Native template for a quick start with TypeScript.",
-    "scripts": {
-        "prepublishOnly": "npm --no-git-tag-version version from-git"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/emin93/react-native-template-typescript.git"
-    },
-    "keywords": [
-        "react-native",
-        "typescript",
-        "jest",
-        "template",
-        "boilerplate"
-    ],
-    "author": "Emin Khateeb <emin@emin.ch>",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/emin93/react-native-template-typescript/issues"
-    },
-    "homepage": "https://github.com/emin93/react-native-template-typescript#readme"
+  "name": "react-native-template-typescript",
+  "version": "0.0.1",
+  "description": "Clean and minimalist React Native template for a quick start with TypeScript.",
+  "scripts": {
+    "test": "standard setup.js",
+    "prepublishOnly": "git reset --hard && npm --no-git-tag-version version from-git"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/emin93/react-native-template-typescript.git"
+  },
+  "keywords": [
+    "react-native",
+    "typescript",
+    "jest",
+    "template",
+    "boilerplate"
+  ],
+  "author": "Emin Khateeb <emin@emin.ch>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/emin93/react-native-template-typescript/issues"
+  },
+  "homepage": "https://github.com/emin93/react-native-template-typescript#readme",
+  "devDependencies": {
+    "standard": "11.0.1"
+  }
 }

rn-cli.config.js

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

setup.js

@@ -1,48 +1,55 @@
-const fs = require('fs');
-const path = require('path');
-const { execSync } = require('child_process');
+const fs = require('fs')
+const path = require('path')
+const {execSync} = require('child_process')
 
-const packageJson = require('./package.json');
-const jestConfig = require('./jest.json');
-const devDependencies = require('./devDependencies.json');
+const packageJson = require('./package.json')
+const jestConfig = require('./jest.json')
+const devDependencies = require('./devDependencies.json')
 
-const deleteFile = (fileName) => fs.unlinkSync(path.join(process.cwd(), fileName));
-const writeFile = (fileName, data) => fs.writeFileSync(path.join(process.cwd(), fileName), data);
+const deleteFile = (fileName) => {
+  const filePath = path.join(process.cwd(), fileName)
+
+  if (!fs.existsSync(filePath)) {
+    return
+  }
+
+  fs.unlinkSync(filePath)
+}
+const writeFile = (fileName, data) => fs.writeFileSync(path.join(process.cwd(), fileName), data)
 const isYarnAvailable = () => {
-    try {
-        execSync('yarn --version', { stdio: 'ignore' });
-        return true;
-    } catch (exc) {
-        return false;
-    }
-};
-
-const packageManager = isYarnAvailable() ? 'yarn' : 'npm';
-const execOptions = { stdio: 'inherit' };
-
-console.log('🔄 Please wait...\n');
-
-packageJson.scripts.start = `${packageJson.scripts.start} --config ../../../../rn-cli.config.js`;
-packageJson.jest = Object.assign(packageJson.jest, jestConfig);
-writeFile('package.json', JSON.stringify(packageJson, null, 2));
-
-console.log(`📦 Installing dependencies with ${packageManager}...\n`);
-
-switch (packageManager) {
-    case 'yarn':
-        execSync(`yarn add ${devDependencies.join(' ')} --dev --exact`, execOptions);
-        break;
-    default:
-        execSync(`npm i ${devDependencies.join(' ')} --save-dev --save-exact`, execOptions);
+  try {
+    execSync('yarn --version', {stdio: 'ignore'})
+    return true
+  } catch (exc) {
+    return false
+  }
 }
 
-deleteFile('App.js');
-deleteFile('__tests__/App.js');
-deleteFile('.flowconfig');
-deleteFile('devDependencies.json');
-deleteFile('jest.json');
-deleteFile('README.md');
-deleteFile('LICENSE');
-deleteFile('setup.js');
+const packageManager = isYarnAvailable() ? 'yarn' : 'npm'
+const execOptions = {stdio: 'inherit'}
 
-console.log(`\n✅ Setup completed! You can now start with: ${packageManager} start\n`);
+console.log('🔄 Please wait...\n')
+
+packageJson.jest = Object.assign(packageJson.jest, jestConfig)
+writeFile('package.json', JSON.stringify(packageJson, null, 2))
+
+console.log(`📦 Installing dependencies with ${packageManager}...\n`)
+
+switch (packageManager) {
+  case 'yarn':
+    execSync(`yarn add ${devDependencies.join(' ')} --dev --exact`, execOptions)
+    break
+  default:
+    execSync(`npm i ${devDependencies.join(' ')} --save-dev --save-exact`, execOptions)
+}
+
+deleteFile('App.js')
+deleteFile('__tests__/App.js')
+deleteFile('.flowconfig')
+deleteFile('devDependencies.json')
+deleteFile('jest.json')
+deleteFile('README.md')
+deleteFile('LICENSE')
+deleteFile('setup.js')
+
+console.log(`\n✅ Setup completed! You can now start with: ${packageManager} start\n`)

tsconfig.json

@@ -1,12 +1,13 @@
 {
-    "compilerOptions": {
-        "target": "es2015",
-        "jsx": "react",
-        "noEmit": true,
-        "moduleResolution": "node",
-        "noImplicitAny": true
-    },
-    "exclude": [
-        "node_modules"
-    ]
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "jsx": "react",
+    "module": "es6",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "noImplicitAny": true,
+    "target": "es6"
+  },
+  "exclude": ["node_modules"]
 }