Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
1eba8db895 | ||
|
|
bc93c59868 | ||
|
|
bd19e744ce | ||
|
|
2452e06aea | ||
|
|
6e306bd1fd |
No files matched your search
@@ -1 +1,3 @@
|
|||||||
.travis.yml
|
.travis.yml
|
||||||
|
README.md
|
||||||
|
LICENSE
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2018 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
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
@@ -11,18 +11,27 @@ way to start your React Native project with TypeScript. Of course you can always
|
|||||||
```
|
```
|
||||||
react-native init MyApp --template typescript
|
react-native init MyApp --template typescript
|
||||||
cd MyApp
|
cd MyApp
|
||||||
node scripts/setup.sh
|
node setup.js
|
||||||
```
|
```
|
||||||
|
|
||||||
## :question: FAQ
|
## :question: FAQ
|
||||||
|
|
||||||
### Why the post install script?
|
### Why the post install script?
|
||||||
|
|
||||||
The React Native CLI currently supports automatic installation only of production dependencies. Since TypeScript type definitions are dev dependencies, the post install script is being used to install those.
|
The React Native CLI supports automatic installation of production dependencies only. Since TypeScript type definitions are dev dependencies, the post install script is being used mainly to install those.
|
||||||
|
|
||||||
|
### What is included in this template?
|
||||||
|
|
||||||
|
- [TypeScript](https://github.com/Microsoft/TypeScript)
|
||||||
|
- [TypeScript type definitions for React & React Native](https://github.com/DefinitelyTyped/DefinitelyTyped)
|
||||||
|
- [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 `react-native init` command is being executed. This means you don't have to worry about old versions.
|
||||||
|
|
||||||
### What about Jest?
|
### What about Jest?
|
||||||
|
|
||||||
Currently this template does not cover Jest. For more info on the current status check the [open issue](https://github.com/emin93/react-native-template-typescript/issues/1).
|
This template does not cover Jest yet. For more info on the current status check the [open issue](https://github.com/emin93/react-native-template-typescript/issues/1).
|
||||||
|
|
||||||
### How will this template affect the React Native CLI workflow?
|
### How will this template affect the React Native CLI workflow?
|
||||||
|
|
||||||
@@ -31,4 +40,8 @@ this template. This means you don't have to worry about incompatibility issues w
|
|||||||
|
|
||||||
## :hearts: Contributing
|
## :hearts: Contributing
|
||||||
|
|
||||||
Contributions are of course very welcome. Please try to stay consistent with the other files I've created.
|
Contributions are very welcome. Please try to stay consistent with the other files I've created.
|
||||||
|
|
||||||
|
### Donations
|
||||||
|
|
||||||
|
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:
|
||||||
@@ -1,5 +1,8 @@
|
|||||||
[
|
[
|
||||||
|
"typescript",
|
||||||
|
"tslint",
|
||||||
|
"tslint-react",
|
||||||
"@types/react",
|
"@types/react",
|
||||||
"@types/react-native",
|
"@types/react-native",
|
||||||
"typescript"
|
"npm-run-all"
|
||||||
]
|
]
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
const fs = require('fs');
|
|
||||||
const path = require('path');
|
|
||||||
const { execSync } = require('child_process');
|
|
||||||
|
|
||||||
const packageJson = require('../package.json');
|
|
||||||
const devDependencies = require('../devDependencies.json');
|
|
||||||
|
|
||||||
const isInScriptsDirectory = fs.existsSync(path.join(process.cwd(), 'install.js'));
|
|
||||||
const pathPrefix = isInScriptsDirectory ? '../' : '';
|
|
||||||
|
|
||||||
const deleteFile = (fileName) => fs.unlinkSync(path.join(process.cwd(), `${pathPrefix}${fileName}`));
|
|
||||||
const writeFile = (fileName, data) => fs.writeFileSync(path.join(process.cwd(), `${pathPrefix}${fileName}`), data);
|
|
||||||
|
|
||||||
(() => {
|
|
||||||
deleteFile('App.js');
|
|
||||||
})();
|
|
||||||
|
|
||||||
(() => {
|
|
||||||
if (!packageJson.scripts) {
|
|
||||||
packageJson.scripts = {};
|
|
||||||
}
|
|
||||||
packageJson.scripts = Object.assign(packageJson.scripts, { watch: './node_modules/.bin/tsc -w' })
|
|
||||||
|
|
||||||
const data = JSON.stringify(packageJson, null, 2);
|
|
||||||
writeFile('package.json', data);
|
|
||||||
execSync(`npm i ${devDependencies.join(' ')} --save-dev --save-exact`);
|
|
||||||
})();
|
|
||||||
|
|
||||||
console.log('✅ Setup completed! You can now delete the scripts folder.')
|
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
const { execSync } = require('child_process');
|
||||||
|
|
||||||
|
const packageJson = require('./package.json');
|
||||||
|
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);
|
||||||
|
|
||||||
|
packageJson.scripts.rn = packageJson.scripts.start;
|
||||||
|
packageJson.scripts.ts = 'node_modules/.bin/tsc -w';
|
||||||
|
packageJson.scripts.start = 'npm-run-all -p -r rn ts';
|
||||||
|
packageJson.scripts.lint = 'tslint -c tslint.json "src/**/*.{ts,tsx}"';
|
||||||
|
writeFile('package.json', JSON.stringify(packageJson, null, 2));
|
||||||
|
|
||||||
|
execSync(`npm i ${devDependencies.join(' ')} --save-dev --save-exact`);
|
||||||
|
|
||||||
|
deleteFile('App.js');
|
||||||
|
deleteFile('.flowconfig');
|
||||||
|
deleteFile('devDependencies.json');
|
||||||
|
deleteFile('setup.js');
|
||||||
|
|
||||||
|
console.log('✅ Setup completed! You can now start with: npm start');
|
||||||
+25
-19
@@ -1,24 +1,30 @@
|
|||||||
import * as React from 'react';
|
import * as React from "react";
|
||||||
import { Platform, StyleSheet, Text, View } from 'react-native';
|
import { Platform, StyleSheet, Text, View } from "react-native";
|
||||||
|
|
||||||
const instructions = Platform.select({
|
const instructions = Platform.select({
|
||||||
ios: 'Press Cmd+R to reload,\n' +
|
android: "Double tap R on your keyboard to reload,\n" +
|
||||||
'Cmd+D or shake for dev menu',
|
"Shake or press menu button for dev menu",
|
||||||
android: 'Double tap R on your keyboard to reload,\n' +
|
ios: "Press Cmd+R to reload,\n" +
|
||||||
'Shake or press menu button for dev menu',
|
"Cmd+D or shake for dev menu",
|
||||||
});
|
});
|
||||||
|
|
||||||
export interface Props { }
|
interface IProps {
|
||||||
|
exampleProp: string;
|
||||||
|
}
|
||||||
|
|
||||||
export default class App extends React.Component<Props> {
|
interface IState {
|
||||||
render() {
|
exampleState: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class App extends React.Component<IProps, IState> {
|
||||||
|
public render() {
|
||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Text style={styles.welcome}>
|
<Text style={styles.welcome}>
|
||||||
Welcome to React Native!
|
Welcome to React Native!
|
||||||
</Text>
|
</Text>
|
||||||
<Text style={styles.instructions}>
|
<Text style={styles.instructions}>
|
||||||
To get started, edit App.js
|
To get started, edit src/App.tsx
|
||||||
</Text>
|
</Text>
|
||||||
<Text style={styles.instructions}>
|
<Text style={styles.instructions}>
|
||||||
{instructions}
|
{instructions}
|
||||||
@@ -30,19 +36,19 @@ export default class App extends React.Component<Props> {
|
|||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
|
alignItems: "center",
|
||||||
|
backgroundColor: "#F5FCFF",
|
||||||
flex: 1,
|
flex: 1,
|
||||||
justifyContent: 'center',
|
justifyContent: "center",
|
||||||
alignItems: 'center',
|
},
|
||||||
backgroundColor: '#F5FCFF',
|
instructions: {
|
||||||
|
color: "#333333",
|
||||||
|
marginBottom: 5,
|
||||||
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
welcome: {
|
welcome: {
|
||||||
fontSize: 20,
|
fontSize: 20,
|
||||||
textAlign: 'center',
|
|
||||||
margin: 10,
|
margin: 10,
|
||||||
},
|
textAlign: "center",
|
||||||
instructions: {
|
|
||||||
textAlign: 'center',
|
|
||||||
color: '#333333',
|
|
||||||
marginBottom: 5,
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
+10
@@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"defaultSeverity": "error",
|
||||||
|
"extends": [
|
||||||
|
"tslint:recommended",
|
||||||
|
"tslint-react"
|
||||||
|
],
|
||||||
|
"jsRules": {},
|
||||||
|
"rules": {},
|
||||||
|
"rulesDirectory": []
|
||||||
|
}
|
||||||
Reference in new issue
Block a user