diff --git a/App.tsx b/App.tsx new file mode 100644 index 0000000..f0cc835 --- /dev/null +++ b/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 { + render() { + return ( + + + Welcome to React Native! + + + To get started, edit App.tsx + + + {instructions} + + + ); + } +} + +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, + }, +}); diff --git a/README.md b/README.md index 5af34d5..80d6152 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,13 @@ Clean and minimalist React Native template for a quick start with TypeScript. 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 +- Always latest dependencies +- React Native TypeScript transformer directly integrated into the packager! (No separate process for TSC) +- Unit testing in TypeScript with Jest + ## :arrow_forward: Quick Start ``` @@ -20,8 +27,6 @@ node setup.js - [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) -- [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 +40,7 @@ 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 +## :computer: Contributing Contributions are very welcome. Please try to stay consistent with the other files I've created. diff --git a/__tests__/App.tsx b/__tests__/App.tsx index 05b5326..10f485d 100644 --- a/__tests__/App.tsx +++ b/__tests__/App.tsx @@ -1,9 +1,12 @@ -import * as React from "react"; -import "react-native"; -import { create } from "react-test-renderer"; +import 'react-native'; +import * as React from 'react'; +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", () => { - const tree = create(); +it('renders correctly', () => { + const tree = renderer.create( + + ); }); diff --git a/devDependencies.json b/devDependencies.json index bc02356..c2fd6c6 100644 --- a/devDependencies.json +++ b/devDependencies.json @@ -1,7 +1,5 @@ [ "typescript", - "tslint", - "tslint-react", "react-native-typescript-transformer", "ts-jest", "@types/react", diff --git a/index.js b/index.ts similarity index 77% rename from index.js rename to index.ts index 523a53c..2d090c1 100644 --- a/index.js +++ b/index.ts @@ -1,4 +1,4 @@ import { AppRegistry } from 'react-native'; -import App from './src/App'; +import App from './App'; AppRegistry.registerComponent('HelloWorld', () => App); diff --git a/setup.js b/setup.js index b8fec9a..2d9f8b5 100644 --- a/setup.js +++ b/setup.js @@ -12,7 +12,6 @@ const writeFile = (fileName, data) => fs.writeFileSync(path.join(process.cwd(), console.log('🔄 Please wait...'); 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)); diff --git a/src/App.tsx b/src/App.tsx deleted file mode 100644 index d464c02..0000000 --- a/src/App.tsx +++ /dev/null @@ -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 { - public render() { - return ( - - - Welcome to React Native! - - - To get started, edit src/App.tsx - - - {instructions} - - - ); - } -} - -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", - }, -}); diff --git a/tsconfig.json b/tsconfig.json index 6be40b5..a0073d5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,6 +4,7 @@ "jsx": "react", "noEmit": true, "moduleResolution": "node", + "noImplicitAny": true }, "exclude": [ "node_modules" diff --git a/tslint.json b/tslint.json deleted file mode 100644 index 7d62919..0000000 --- a/tslint.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "defaultSeverity": "error", - "extends": [ - "tslint:recommended", - "tslint-react" - ], - "jsRules": {}, - "rules": {}, - "rulesDirectory": [] -}