Merge pull request #59 from react-native-community/fix/default-readme

Fix suggested usage for RN >= 0.60

.gitignore

@@ -1,57 +1,2 @@
-# OSX
-#
-.DS_Store
-
-# Xcode
-#
-build/
-*.pbxuser
-!default.pbxuser
-*.mode1v3
-!default.mode1v3
-*.mode2v3
-!default.mode2v3
-*.perspectivev3
-!default.perspectivev3
-xcuserdata
-*.xccheckout
-*.moved-aside
-DerivedData
-*.hmap
-*.ipa
-*.xcuserstate
-project.xcworkspace
-
-# Android/IntelliJ
-#
-build/
-.idea
-.gradle
-local.properties
-*.iml
-
-# Visual Studio Code
-#
-.vscode/
-
-# node.js
-#
 node_modules/
-npm-debug.log
-yarn-error.log
-
-# BUCK
-buck-out/
-\.buckd/
-*.keystore
-
-# fastlane
-#
-# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
-# screenshots whenever they are needed.
-# For more information about the recommended setup visit:
-# https://docs.fastlane.tools/best-practices/source-control/
-
-*/fastlane/report.xml
-*/fastlane/Preview.html
-*/fastlane/screenshots
+.vscode/

.travis.yml

@@ -1,13 +1,17 @@
 language: node_js
 node_js:
   - "node"
-cache:
-  directories:
-    - "node_modules"
 deploy:
-  on:
-    tags: true
-  provider: npm
-  email: "emin@emin.ch"
-  api_key: "${NPM_TOKEN}"
-  skip_cleanup: true
+  - provider: npm
+    on:
+      condition: $TRAVIS_BRANCH == "master" && -n $TRAVIS_TAG
+    email: "emin@emin.ch"
+    api_key: "${NPM_TOKEN}"
+    skip_cleanup: true
+  - provider: npm
+    on:
+      condition: $TRAVIS_BRANCH == "master-cli-v2" && -n $TRAVIS_TAG
+    email: "emin@emin.ch"
+    api_key: "${NPM_TOKEN}"
+    skip_cleanup: true
+    tag: next

App.tsx

@@ -1,51 +1,118 @@
 /**
  * Sample React Native App
  * https://github.com/facebook/react-native
- * 
+ *
  * Generated with the TypeScript template
- * https://github.com/emin93/react-native-template-typescript
- * 
+ * https://github.com/react-native-community/react-native-template-typescript
+ *
  * @format
  */
 
-import React, {Component} from 'react';
-import {Platform, StyleSheet, Text, View} from 'react-native';
+import React, {Fragment} from 'react';
+import {
+  SafeAreaView,
+  StyleSheet,
+  ScrollView,
+  View,
+  Text,
+  StatusBar,
+} 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',
-});
+import {
+  Header,
+  LearnMoreLinks,
+  Colors,
+  DebugInstructions,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
 
-interface 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.tsx</Text>
-        <Text style={styles.instructions}>{instructions}</Text>
-      </View>
-    );
-  }
-}
+const App = () => {
+  const usingHermes = typeof HermesInternal === 'object' && HermesInternal !== null;
+
+  return (
+    <Fragment>
+      <StatusBar barStyle="dark-content" />
+      <SafeAreaView>
+        <ScrollView
+          contentInsetAdjustmentBehavior="automatic"
+          style={styles.scrollView}>
+          <Header />
+          {!usingHermes ? null : (
+            <View style={styles.engine}>
+              <Text style={styles.footer}>Engine: Hermes</Text>
+            </View>
+          )}
+          <View style={styles.body}>
+            <View style={styles.sectionContainer}>
+              <Text style={styles.sectionTitle}>Step One</Text>
+              <Text style={styles.sectionDescription}>
+                Edit <Text style={styles.highlight}>App.tsx</Text> to change this
+                screen and then come back to see your edits.
+              </Text>
+            </View>
+            <View style={styles.sectionContainer}>
+              <Text style={styles.sectionTitle}>See Your Changes</Text>
+              <Text style={styles.sectionDescription}>
+                <ReloadInstructions />
+              </Text>
+            </View>
+            <View style={styles.sectionContainer}>
+              <Text style={styles.sectionTitle}>Debug</Text>
+              <Text style={styles.sectionDescription}>
+                <DebugInstructions />
+              </Text>
+            </View>
+            <View style={styles.sectionContainer}>
+              <Text style={styles.sectionTitle}>Learn More</Text>
+              <Text style={styles.sectionDescription}>
+                Read the docs to discover what to do next:
+              </Text>
+            </View>
+            <LearnMoreLinks />
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </Fragment>
+  );
+};
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
+  scrollView: {
+    backgroundColor: Colors.lighter,
   },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
+  engine: {
+    position: 'absolute',
+    right: 0,
   },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
+  body: {
+    backgroundColor: Colors.white,
+  },
+  sectionContainer: {
+    marginTop: 32,
+    paddingHorizontal: 24,
+  },
+  sectionTitle: {
+    fontSize: 24,
+    fontWeight: '600',
+    color: Colors.black,
+  },
+  sectionDescription: {
+    marginTop: 8,
+    fontSize: 18,
+    fontWeight: '400',
+    color: Colors.dark,
+  },
+  highlight: {
+    fontWeight: '700',
+  },
+  footer: {
+    color: Colors.dark,
+    fontSize: 12,
+    fontWeight: '600',
+    padding: 4,
+    paddingRight: 12,
+    textAlign: 'right',
   },
 });
+
+export default App;

CONTRIBUTING.md

@@ -1,11 +1,11 @@
 # Contributing
 
-Cool, I'm glad you decided to contribute to React Native Template TypeScript.
-
-Don't worry, I won't bother you with thousands of rules. I want to make contributing to this project as easy and transparent as possible.
+Contributing to this project should be as easy and transparent as possible.
 
 ## Workflow
 
+Right now there are two master branches in order to keep support for the old React Native CLI (for more info, check out the [related issue](https://github.com/react-native-community/react-native-template-typescript/issues/39)).
+
 We use [GitHub Flow](https://guides.github.com/introduction/flow/), so all code changes happen through pull requests.
 
 1.  Fork the repository and create your branch from `master`.
@@ -15,7 +15,3 @@ We use [GitHub Flow](https://guides.github.com/introduction/flow/), so all code
 ## License
 
 By contributing, you agree that your contributions will be licensed under the [MIT License](https://choosealicense.com/licenses/mit/).
-
-## Code style
-
-Currently there is no lint configuration, but you should try to stay consistent with the existing code.

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Emin Khateeb
+Copyright (c) 2019 Emin Khateeb
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,55 +1,46 @@
-# :space_invader: React Native Template TypeScript · [![Build Status](https://travis-ci.org/emin93/react-native-template-typescript.svg?branch=master)](https://travis-ci.org/emin93/react-native-template-typescript)
+# :space_invader: React Native Template TypeScript
 
-Clean and minimalist React Native template for a quick start with TypeScript.
+<p>
+  <a href="https://travis-ci.org/react-native-community/react-native-template-typescript">
+    <img alt="Build Status" src="https://img.shields.io/travis/react-native-community/react-native-template-typescript.svg" target="_blank" />
+  </a>
+  <a href="https://github.com/react-native-community/react-native-template-typescript#readme">
+    <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" target="_blank" />
+  </a>
+  <a href="https://github.com/react-native-community/react-native-template-typescript/graphs/commit-activity">
+    <img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" target="_blank" />
+  </a>
+  <a href="https://github.com/react-native-community/react-native-template-typescript/blob/master/LICENSE">
+    <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" target="_blank" />
+  </a>
+</p>
 
-[![Header](https://cdn-images-1.medium.com/max/500/1*E9RnPOATuhjuNrlFkv5oSg.jpeg)](https://medium.com/@emin93/react-native-typescript-b965059109d3)
+> Clean and minimalist React Native template for a quick start with TypeScript.
 
 ## :star: Features
 
-- Seamlessly integrated into the React Native CLI! :sparkles:
+- Elegant usage directly within the [React Native CLI](https://github.com/react-native-community/cli)
 - Consistent with the default React Native template
-- React Native TypeScript Transformer included
-- Unit testing in TypeScript with TS Jest
-- Always latest dependencies :raised_hands:
+- Minimal additional dependencies
 
-## :arrow_forward: Quick Start
+## :arrow_forward: Usage
 
-```bash
-react-native init MyApp --template typescript && node MyApp/setup.js
+### React Native >= 0.60
+
+```sh
+npx react-native init MyApp --template react-native-template-typescript@next
 ```
 
-## :question: FAQ
+### React Native <= 0.59
 
-### What's included in this template?
-
-- [TypeScript](https://github.com/Microsoft/TypeScript)
-- [React Native TypeScript Transformer](https://github.com/ds300/react-native-typescript-transformer)
-- [Type definitions for React & React Native](https://github.com/DefinitelyTyped/DefinitelyTyped)
-- [TS Jest](https://github.com/kulshekhar/ts-jest)
-
-This template always uses the latest versions of the dependencies at the time when the `react-native init` command is being executed. This means you don't have to worry about old versions.
-
-Lots of :heart: and credits to the owners and maintainers of those packages.
-
-### Why the setup script?
-
-It deletes obsolete files like the `.flowconfig` and the `setup.js` itself after the setup.
-
-### Does debugging work?
-
-Yes it does.
-
-[![Demonstration of working breakpoints in Visual Studio Code](https://cdn-images-1.medium.com/max/1600/1*ZXfzgq1xKz1B3chYy9xE7w.png)](https://medium.com/@emin93/react-native-typescript-b965059109d3)
-
-## :globe_with_meridians: Links
-
-- ["Using React Native with TypeScript just became simple" on Medium](https://medium.com/@emin93/react-native-typescript-b965059109d3)
-- ["24 tips for React Native you probably want to know" on Albert Gao's blog](http://albertgao.xyz/2018/05/30/24-tips-for-react-native-you-probably-want-to-know/#9-For-Typescript)
+```sh
+react-native init MyApp --template typescript
+```
 
 ## :computer: Contributing
 
-Contributions are very welcome. Please check out the [contributing document](https://github.com/emin93/react-native-template-typescript/blob/master/CONTRIBUTING.md).
+Contributions are very welcome. Please check out the [contributing document](CONTRIBUTING.md).
 
-### Donations
+## :bookmark: License
 
-I created this project in my spare time because I enjoy coding. Of course you can support me by [buying me a coffee](https://www.paypal.me/emin93) if you wish. :coffee: :relieved:
+This project is [MIT](LICENSE) licensed.

__tests__/App-test.tsx

@@ -0,0 +1,14 @@
+/**
+ * @format
+ */
+
+import 'react-native';
+import React from 'react';
+import App from '../App';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  renderer.create(<App />);
+});

_gitignore

@@ -0,0 +1,63 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# Visual Studio Code
+#
+.vscode/
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
+
+# Bundle artifact
+*.jsbundle
+
+# CocoaPods
+/ios/Pods/

devDependencies.json

@@ -3,7 +3,5 @@
   "@types/react-native": "latest",
   "@types/react-test-renderer": "latest",
   "@types/react": "latest",
-  "react-native-typescript-transformer": "latest",
-  "ts-jest": "latest",
   "typescript": "latest"
 }

jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  preset: 'react-native',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+}

jest.json

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

package.json

@@ -4,7 +4,8 @@
   "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"
+    "prepublishOnly": "npm --no-git-tag-version version $TRAVIS_TAG",
+    "install": "node setup.js"
   },
   "repository": {
     "type": "git",
@@ -24,6 +25,6 @@
   },
   "homepage": "https://github.com/emin93/react-native-template-typescript#readme",
   "devDependencies": {
-    "standard": "11.0.1"
+    "standard": "13.0.2"
   }
 }

rn-cli.config.js

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

setup.js

@@ -1,23 +1,25 @@
 const fs = require('fs')
 const path = require('path')
 
-const packageJson = require('./package.json')
-const jestConfig = require('./jest.json')
+if (fs.existsSync(path.join(__dirname, '.travis.yml'))) {
+  process.exit()
+}
 
-const deleteFile = (fileName) => fs.unlinkSync(path.join(__dirname, fileName))
-const writeFile = (fileName, data) => fs.writeFileSync(path.join(__dirname, fileName), data)
+const projectFilesToDelete = ['.flowconfig', 'App.js', '__tests__/App-test.js']
 
-console.log('🔄 Setting up...')
+const templateFilesToDelete = ['setup.js', 'README.md', 'LICENSE']
 
-packageJson.jest = Object.assign(packageJson.jest, jestConfig)
-writeFile('package.json', JSON.stringify(packageJson, null, 2))
+const deleteFile = filePath => {
+  if (!fs.existsSync(filePath)) {
+    return
+  }
 
-deleteFile('.flowconfig')
-deleteFile('App.js')
-deleteFile('devDependencies.json')
-deleteFile('jest.json')
-deleteFile('LICENSE')
-deleteFile('README.md')
-deleteFile('setup.js')
+  fs.unlinkSync(filePath)
+}
 
-console.log(`✅ Setup completed!`)
+const projectPath = path.join(__dirname, '..', '..')
+const deleteProjectFile = fileName => deleteFile(path.join(projectPath, fileName))
+const deleteTemplateFile = fileName => deleteFile(path.join(__dirname, fileName))
+
+projectFilesToDelete.forEach(deleteProjectFile)
+templateFilesToDelete.forEach(deleteTemplateFile)

tsconfig.json

@@ -1,14 +1,15 @@
 {
   "compilerOptions": {
+    "allowJs": true,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
-    "jsx": "react-native",
+    "isolatedModules": true,
+    "jsx": "react",
     "lib": ["es6"],
-    "module": "es6",
     "moduleResolution": "node",
     "noEmit": true,
-    "noImplicitAny": true,
-    "target": "es6"
+    "strict": true,
+    "target": "esnext"
   },
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
 }