Skip to content

React Native 0.59 support #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Mar 12, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,4 +48,4 @@ const styles = StyleSheet.create({
color: '#333333',
marginBottom: 5,
},
});
});
8 changes: 1 addition & 7 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
# 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

Expand All @@ -15,7 +13,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.
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -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
Expand Down
21 changes: 6 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,39 +13,30 @@ Clean and minimalist React Native template for a quick start with TypeScript.
## :arrow_forward: Quick Start

```bash
react-native init MyApp --template typescript && node MyApp/setup.js
react-native init MyApp --template typescript
```

## :question: FAQ

### Why this template when React Native 0.57+ supports TypeScript out of the box?

Actually, when React Native 0.57 was announced, I planned to stop maintenance on this template. But after further evaluation, there's still quite a lot of manual work to do (add type definitions for React & React Native, create a `.tsconfig` for type checking, etc.) to properly set up a React Native 0.57+ TypeScript project. And that's where this template comes in and does that work for you. :raised_hands:

### What additional dependencies are included in this template?

- [TypeScript](https://github.com/Microsoft/TypeScript)
- [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.

### How to do type checking?

`npm run tsc`

### Does debugging work?

Yes it does.
Yes it does. :tada:

[![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)

### How to do type checking?

`npx tsc`

## :globe_with_meridians: Links

- ["Using React Native with TypeScript just became simple" on Medium](https://medium.com/@emin93/react-native-typescript-b965059109d3)
Expand Down
2 changes: 1 addition & 1 deletion __tests__/App.tsx → __tests__/App-test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,4 @@ import renderer from 'react-test-renderer';

it('renders correctly', () => {
renderer.create(<App />);
});
});
1 change: 0 additions & 1 deletion devDependencies.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,5 @@
"@types/react-native": "latest",
"@types/react-test-renderer": "latest",
"@types/react": "latest",
"ts-jest": "latest",
"typescript": "latest"
}
4 changes: 4 additions & 0 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
module.exports = {
preset: 'react-native',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
}
8 changes: 0 additions & 8 deletions jest.json

This file was deleted.

28 changes: 8 additions & 20 deletions setup.js
Original file line number Diff line number Diff line change
@@ -1,29 +1,17 @@
const fs = require('fs')
const path = require('path')

const packageJson = require('./package.json')
const jestConfig = require('./jest.json')

if (!packageJson.jest) {
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)

console.log('🔄 Setting up...')

packageJson.scripts.tsc = 'tsc'
packageJson.jest = Object.assign(packageJson.jest, jestConfig)
const projectFilesToDelete = ['.flowconfig', 'App.js', '__tests__/App-test.js']

writeFile('package.json', JSON.stringify(packageJson, null, 2))
const templateFilesToDelete = ['setup.js', 'README.md', 'LICENSE']

deleteFile('.flowconfig')
deleteFile('App.js')
deleteFile('__tests__/App.js')
deleteFile('jest.json')
deleteFile('LICENSE')
deleteFile('README.md')
deleteFile('setup.js')
const projectPath = path.join(__dirname, '..', '..')
const deleteProjectFile = fileName => fs.unlinkSync(path.join(projectPath, fileName))
const deleteTemplateFile = fileName => fs.unlinkSync(path.join(__dirname, fileName))

console.log(`✅ Setup completed!`)
projectFilesToDelete.forEach(deleteProjectFile)
templateFilesToDelete.forEach(deleteTemplateFile)
2 changes: 1 addition & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,5 @@
"strict": true,
"target": "esnext"
},
"exclude": ["node_modules", "babel.config.js", "metro.config.js"]
"exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}