├── .gitignore ├── .npmignore ├── .prettierrc ├── App.tsx ├── LICENSE ├── README.md ├── __tests__ └── App.tsx ├── devDependencies.json ├── index.js ├── jest.config.js ├── package.json ├── package.template.json ├── rn-cli.config.js ├── setup.js ├── tsconfig.json └── tslint.json /.gitignore: -------------------------------------------------------------------------------- 1 | .history -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .history 2 | LICENSE 3 | README.md -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "typescript", 3 | "printWidth": 100, 4 | "semi": false, 5 | "singleQuote": true, 6 | "trailingComma": "all" 7 | } 8 | -------------------------------------------------------------------------------- /App.tsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react' 2 | import { StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native' 3 | 4 | export interface Props {} 5 | 6 | export default class App extends PureComponent { 7 | render() { 8 | return ( 9 | 10 | Welcome to React Native 11 | TypeScript + Prettier configured 12 | To get started, edit App.jsx 13 | 💙 14 | 15 | ) 16 | } 17 | } 18 | 19 | const styles = StyleSheet.create({ 20 | container: { 21 | flex: 1, 22 | justifyContent: 'center', 23 | alignItems: 'center', 24 | backgroundColor: '#F5FCFF', 25 | } as ViewStyle, 26 | title: { 27 | fontSize: 22, 28 | fontWeight: 'bold', 29 | textAlign: 'center', 30 | marginBottom: 14, 31 | } as TextStyle, 32 | instructions: { 33 | textAlign: 'center', 34 | color: '#333333', 35 | marginBottom: 6, 36 | } as TextStyle, 37 | }) 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Bruno Lemos 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 |

React Native + TypeScript = 💙

3 |

Start a new React Native project with TypeScript, Prettier & TSLint

4 |

5 | 6 | ### Usage 7 | 8 | When creating a new React Native project, use the command:
9 | 10 | 
react-native init projectname --template ts
11 | 12 | That's it! 🎉 Then, proceed as usual: 13 | - `cd projectname` 14 | - `npm start` 15 | 16 | ### Includes 17 | 18 | - [x] TypeScript 19 | - [x] Prettier (with commit hook) 20 | - [x] TSLint 21 | - [x] Jest _(broken on react-native 0.56)_ 22 | - [ ] Web support _(soon; waiting for [react-scripts v2](https://github.com/facebook/create-react-app/issues/3815))_ 23 | 24 | ### Requirements 25 | 26 | - `npm i -g react-native-cli` 27 | -------------------------------------------------------------------------------- /__tests__/App.tsx: -------------------------------------------------------------------------------- 1 | import 'jest' 2 | import 'react-native' 3 | 4 | import React from 'react' 5 | import renderer from 'react-test-renderer' 6 | 7 | import App from '../App' 8 | 9 | it('renders correctly', () => { 10 | renderer.create() 11 | }) 12 | -------------------------------------------------------------------------------- /devDependencies.json: -------------------------------------------------------------------------------- 1 | { 2 | "@babel/core": "latest", 3 | "@types/jest": "latest", 4 | "@types/react": "latest", 5 | "@types/react-native": "latest", 6 | "@types/react-test-renderer": "latest", 7 | "babel-jest": "latest", 8 | "babel-preset-react-native": "next", 9 | "husky": "latest", 10 | "jest": "latest", 11 | "lint-staged": "latest", 12 | "prettier": "latest", 13 | "react-native-typescript-transformer": "latest", 14 | "react-test-renderer": "latest", 15 | "ts-jest": "latest", 16 | "tslint": "latest", 17 | "tslint-config-airbnb": "latest", 18 | "tslint-config-prettier": "latest", 19 | "tslint-react": "latest", 20 | "typescript": "latest" 21 | } 22 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import { AppRegistry } from 'react-native' 2 | 3 | import App from './App.tsx' 4 | import { name as appName } from './app.json' 5 | 6 | AppRegistry.registerComponent(appName, () => App) 7 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | const { defaults } = require('jest-config') 2 | 3 | module.exports = { 4 | preset: 'react-native', 5 | moduleFileExtensions: [...defaults.moduleFileExtensions, 'ts', 'tsx'], 6 | transform: { 7 | '^.+\\.(js)$': '/node_modules/babel-jest', 8 | '\\.(ts|tsx)$': '/node_modules/ts-jest/preprocessor.js', 9 | }, 10 | testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$', 11 | testPathIgnorePatterns: ['\\.snap$', '/node_modules/', '/lib/'], 12 | cacheDirectory: '.jest/cache', 13 | } 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-template-ts", 3 | "version": "0.0.11", 4 | "description": "Start new React Native projects with TypeScript, Prettier & TSLint", 5 | "license": "MIT", 6 | "author": "Bruno Lemos ", 7 | "homepage": "https://github.com/brunolemos/react-native-template-ts", 8 | "bugs": { 9 | "url": "https://github.com/brunolemos/react-native-template-ts/issues" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git@github.com:brunolemos/react-native-template-ts.git" 14 | }, 15 | "keywords": [ 16 | "react-native", 17 | "typescript", 18 | "prettier", 19 | "template", 20 | "jest", 21 | "boilerplate", 22 | "ts" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /package.template.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "format": "prettier --write '{.,__tests__,src/**}/*.{js,jsx,ts,tsx}'", 4 | "lint": "tslint -p .", 5 | "precommit": "tsc && lint-staged", 6 | "start": "node node_modules/react-native/local-cli/cli.js start", 7 | "studio": "open -a /Applications/Android\\ Studio.app ./android/", 8 | "test": "jest", 9 | "tsc": "tsc -p .", 10 | "xcode": "open ios/$npm_package_name.xcodeproj" 11 | }, 12 | "lint-staged": { 13 | "*.{js,jsx,ts,tsx}": ["prettier --write", "tslint --fix", "git add"] 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /rn-cli.config.js: -------------------------------------------------------------------------------- 1 | require('./setup') 2 | 3 | module.exports = { 4 | getTransformModulePath() { 5 | return require.resolve('react-native-typescript-transformer') 6 | }, 7 | 8 | getSourceExts() { 9 | return ['ts', 'tsx'] 10 | }, 11 | } 12 | -------------------------------------------------------------------------------- /setup.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const path = require('path') 3 | 4 | const templatePackageJSON = require('./package.template.json') 5 | 6 | console.log('🔄 Finishing TypeScript project setup...') 7 | 8 | // Utils 9 | const readFile = filename => fs.readFileSync(path.join(__dirname, filename), 'utf8') 10 | 11 | const deleteFile = filename => { 12 | try { 13 | return fs.unlinkSync(path.join(__dirname, filename)) 14 | } catch (error) {} 15 | } 16 | 17 | const writeFile = (filename, data) => fs.writeFileSync(path.join(__dirname, filename), data) 18 | 19 | // Merge package.json 20 | const packageJSON = JSON.parse(readFile('package.json')) 21 | const updatedPackageJSON = Object.assign({}, packageJSON, templatePackageJSON) 22 | delete updatedPackageJSON.jest 23 | writeFile('package.json', JSON.stringify(updatedPackageJSON, null, 2)) 24 | 25 | // Delete unnecessary files 26 | deleteFile('.flowconfig') 27 | deleteFile('App.js') 28 | deleteFile('LICENSE') 29 | deleteFile('README.md') 30 | deleteFile('devDependencies.json') 31 | deleteFile('package.template.json') 32 | deleteFile('setup.js') 33 | 34 | // Remove setup script from index.js 35 | const index = readFile('rn-cli.config.js') 36 | const updatedIndex = index.replace("require('./setup')\n\n", '') 37 | writeFile('rn-cli.config.js', updatedIndex) 38 | 39 | console.log(`✅ Setup completed.`) 40 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | "target": "ES2017", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */ 5 | "module": "es2015", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 6 | "lib": [ /* Specify library files to be included in the compilation: */ 7 | "es2017", 8 | "dom" 9 | ], 10 | // "allowJs": true, /* Allow javascript files to be compiled. */ 11 | // "checkJs": true, /* Report errors in .js files. */ 12 | "skipLibCheck": true, /* Skip type checking of all declaration files. */ 13 | "jsx": "react-native", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 14 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 15 | "sourceMap": true, /* Generates corresponding '.map' file. */ 16 | // "outFile": "./", /* Concatenate and emit output to single file. */ 17 | "outDir": "./lib", /* Redirect output structure to the directory. */ 18 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 19 | "removeComments": true, /* Do not emit comments to output. */ 20 | "noEmit": true, /* Do not emit outputs. */ 21 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 22 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 23 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 24 | 25 | /* Strict Type-Checking Options */ 26 | "strict": true, /* Enable all strict type-checking options. */ 27 | "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 28 | "strictNullChecks": true, /* Enable strict null checks. */ 29 | "strictFunctionTypes": true, /* Enable strict checking of function types. */ 30 | "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 31 | "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 32 | 33 | /* Additional Checks */ 34 | "noUnusedLocals": true, /* Report errors on unused locals. */ 35 | "noUnusedParameters": true, /* Report errors on unused parameters. */ 36 | "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 37 | "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 38 | 39 | /* Module Resolution Options */ 40 | "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 41 | "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 42 | "paths": { /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 43 | "*": [ 44 | "*.android", 45 | "*.ios", 46 | "*.native", 47 | "*.web", 48 | "*" 49 | ] 50 | }, 51 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 52 | "typeRoots": [ /* List of folders to include type definitions from. */ 53 | "@types", 54 | "../../@types" 55 | ], 56 | // "types": [], /* Type declaration files to be included in compilation. */ 57 | "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 58 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 59 | 60 | /* Source Map Options */ 61 | // "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 62 | // "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */ 63 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 64 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 65 | 66 | /* Experimental Options */ 67 | "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 68 | "emitDecoratorMetadata": true /* Enables experimental support for emitting type metadata for decorators. */ 69 | }, 70 | "exclude": [ 71 | "node_modules", 72 | "web" 73 | ] 74 | } -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultSeverity": "warning", 3 | "extends": [ 4 | "tslint:recommended", 5 | "tslint-react", 6 | "tslint-config-airbnb", 7 | "tslint-config-prettier" 8 | ], 9 | "jsRules": {}, 10 | "rules": { 11 | "curly": false, 12 | "function-name": false, 13 | "import-name": false, 14 | "interface-name": false, 15 | "jsx-boolean-value": false, 16 | "jsx-no-multiline-js": false, 17 | "member-access": false, 18 | "no-console": [true, "debug", "dir", "log", "trace", "warn"], 19 | "no-empty-interface": false, 20 | "object-literal-sort-keys": false, 21 | "object-shorthand-properties-first": false, 22 | "semicolon": false, 23 | "strict-boolean-expressions": false, 24 | "ter-arrow-parens": false, 25 | "ter-indent": false, 26 | "variable-name": [ 27 | true, 28 | "allow-leading-underscore", 29 | "allow-pascal-case", 30 | "ban-keywords", 31 | "check-format" 32 | ], 33 | "quotemark": false 34 | }, 35 | "rulesDirectory": [] 36 | } 37 | --------------------------------------------------------------------------------