fixed issue which caused always using yarn as the packager

[feat] add support for Yarn + inheriting exec process

App.tsx

@@ -0,0 +1,60 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ * 
+ * Generated with the TypeScript template
+ * https://github.com/emin93/react-native-template-typescript
+ */
+
+import * as React 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',
+});
+
+interface Props {};
+export default class App extends React.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.tsx
+        </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,
+  },
+});

README.md

@@ -2,8 +2,18 @@
 
 Clean and minimalist React Native template for a quick start with TypeScript.
 
+[![Header](https://cdn-images-1.medium.com/max/500/1*E9RnPOATuhjuNrlFkv5oSg.jpeg)](https://medium.com/@emin93/react-native-typescript-b965059109d3)
+
 This template can be used with the React Native CLI, which means it doesn't mess with the platform specific files. Instead of including a lot of dependencies, my aim when creating this template was to provide a very easy and minimalist way to start your React Native project with TypeScript. Of course you can always include other dependencies as you need them.
 
+## :star: Features
+
+-   Seamless integration with the React Native CLI! :sparkles:
+-   Consistent with the default React Native template (no additional stuff)
+-   React Native TypeScript transformer directly integrated into the packager (no separate process for `tsc`)
+-   Unit testing in TypeScript with TS Jest
+-   Always latest dependencies :raised_hands:
+
 ## :arrow_forward: Quick Start
 
 ```
@@ -16,12 +26,10 @@ node setup.js
 
 ### What is included in this template?
 
-- [TypeScript](https://github.com/Microsoft/TypeScript)
+-   [TypeScript](https://github.com/Microsoft/TypeScript)
-- [React Native TypeScript transformer](https://github.com/ds300/react-native-typescript-transformer)
+-   [React Native TypeScript transformer](https://github.com/ds300/react-native-typescript-transformer)
-- [Type definitions for React & React Native](https://github.com/DefinitelyTyped/DefinitelyTyped)
+-   [Type definitions for React & React Native](https://github.com/DefinitelyTyped/DefinitelyTyped)
-- [TS Jest](https://github.com/kulshekhar/ts-jest)
+-   [TS Jest](https://github.com/kulshekhar/ts-jest)
-- [TSLint](https://github.com/palantir/tslint)
-- [TSLint React](https://github.com/palantir/tslint-react)
 
 This template always uses the latest versions of the dependencies at the time when the setup script (`node setup.js`) is being executed. This means you don't have to worry about old versions.
 
@@ -35,7 +43,11 @@ 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.
 
-## :hearts: Contributing
+## :globe_with_meridians: Links
+
+-   ["Using React Native with TypeScript just became simple" on Medium](https://medium.com/@emin93/react-native-typescript-b965059109d3)
+
+## :computer: Contributing
 
 Contributions are very welcome. Please try to stay consistent with the other files I've created.
 

__tests__/App.tsx

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

devDependencies.json

@@ -1,7 +1,5 @@
 [
     "typescript",
-    "tslint",
-    "tslint-react",
     "react-native-typescript-transformer",
     "ts-jest",
     "@types/react",

index.js

@@ -1,4 +0,0 @@
-import { AppRegistry } from 'react-native';
-import App from './src/App';
-
-AppRegistry.registerComponent('HelloWorld', () => App);

package.json

@@ -10,10 +10,10 @@
         "url": "git+https://github.com/emin93/react-native-template-typescript.git"
     },
     "keywords": [
-        "react",
+        "react-native",
-        "native",
-        "template",
         "typescript",
+        "jest",
+        "template",
         "boilerplate"
     ],
     "author": "Emin Khateeb <emin@emin.ch>",

setup.js

@@ -8,15 +8,31 @@ 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 isYarnAvailable = () => {
+    try {
+        execSync('yarnpkg --version', { stdio: 'ignore' });
+        return true;
+    } catch (e) {
+        return false;
+    }
+}
 
-console.log('🔄 Please wait...');
+const packager = isYarnAvailable() ? 'yarn' : 'npm';
+const execOptions = { stdio: 'inherit' };
+
+console.log('\n🔄 Please wait...\n');
 
 packageJson.scripts.start = `${packageJson.scripts.start} --config ../../../../rn-cli.config.js`;
-packageJson.scripts.lint = 'tslint -c tslint.json "src/**/*.{ts,tsx}"';
 packageJson.jest = Object.assign(packageJson.jest, jestJson);
 writeFile('package.json', JSON.stringify(packageJson, null, 2));
 
-execSync(`npm i ${devDependencies.join(' ')} --save-dev --save-exact`);
+console.log(`\n📦 Installing dependencies with ${packager}...\n`);
+
+if (packager === 'yarn') {
+    execSync(`yarn add ${devDependencies.join(' ')} --dev --exact`, execOptions);
+} else {
+    execSync(`npm i ${devDependencies.join(' ')} --save-dev --save-exact`, execOptions);
+}
 
 deleteFile('App.js');
 deleteFile('__tests__/App.js');
@@ -27,4 +43,4 @@ deleteFile('README.md');
 deleteFile('LICENSE');
 deleteFile('setup.js');
 
-console.log('✅ Setup completed! You can now start with: npm start');
+console.log(`\n✅ Setup completed! You can now start with: ${packager} start\n`);

src/App.tsx

@@ -1,54 +0,0 @@
-import * as React from "react";
-import { Platform, StyleSheet, Text, View } from "react-native";
-
-const instructions = Platform.select({
-    android: "Double tap R on your keyboard to reload,\n" +
-        "Shake or press menu button for dev menu",
-    ios: "Press Cmd+R to reload,\n" +
-        "Cmd+D or shake for dev menu",
-});
-
-interface IProps {
-    exampleProp: string;
-}
-
-interface IState {
-    exampleState: string;
-}
-
-export default class App extends React.Component<IProps, IState> {
-    public render() {
-        return (
-            <View style={styles.container}>
-                <Text style={styles.welcome}>
-                    Welcome to React Native!
-                </Text>
-                <Text style={styles.instructions}>
-                    To get started, edit src/App.tsx
-                </Text>
-                <Text style={styles.instructions}>
-                    {instructions}
-                </Text>
-            </View>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    container: {
-        alignItems: "center",
-        backgroundColor: "#F5FCFF",
-        flex: 1,
-        justifyContent: "center",
-    },
-    instructions: {
-        color: "#333333",
-        marginBottom: 5,
-        textAlign: "center",
-    },
-    welcome: {
-        fontSize: 20,
-        margin: 10,
-        textAlign: "center",
-    },
-});

tsconfig.json

@@ -4,6 +4,7 @@
         "jsx": "react",
         "noEmit": true,
         "moduleResolution": "node",
+        "noImplicitAny": true
     },
     "exclude": [
         "node_modules"

tslint.json

@@ -1,10 +0,0 @@
-{
-    "defaultSeverity": "error",
-    "extends": [
-        "tslint:recommended",
-        "tslint-react"
-    ],
-    "jsRules": {},
-    "rules": {},
-    "rulesDirectory": []
-}