Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
0ab55f4385 | ||
|
|
0b54ba54c6 | ||
|
|
9d2f745914 | ||
|
|
651d111624 | ||
|
|
cbe99e2b0f | ||
|
|
fdcc07aa80 | ||
|
|
2376f89dcc | ||
|
|
5706e87500 | ||
|
|
12ed73a490 | ||
|
|
5635eb9106 | ||
|
|
5a8cf6bbe6 | ||
|
|
8e588cf4b5 | ||
|
|
5ce07d7e6c | ||
|
|
33cc106144 | ||
|
|
add36b1f30 | ||
|
|
2c6b757051 | ||
|
|
65ac7f1bbf | ||
|
|
c9184ffc06 | ||
|
|
1bed694429 | ||
|
|
e2b4039a30 | ||
|
|
f8369603f4 | ||
|
|
2433c22b3d |
No files matched your search
@@ -6,6 +6,7 @@ cache:
|
||||
- "node_modules"
|
||||
deploy:
|
||||
on:
|
||||
branch: master
|
||||
tags: true
|
||||
provider: npm
|
||||
email: "emin@emin.ch"
|
||||
|
||||
@@ -4,48 +4,96 @@
|
||||
*
|
||||
* Generated with the TypeScript template
|
||||
* https://github.com/emin93/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 = () => {
|
||||
return (
|
||||
<Fragment>
|
||||
<StatusBar barStyle="dark-content" />
|
||||
<SafeAreaView>
|
||||
<ScrollView
|
||||
contentInsetAdjustmentBehavior="automatic"
|
||||
style={styles.scrollView}>
|
||||
<Header />
|
||||
<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,
|
||||
body: {
|
||||
backgroundColor: Colors.white,
|
||||
},
|
||||
instructions: {
|
||||
textAlign: 'center',
|
||||
color: '#333333',
|
||||
marginBottom: 5,
|
||||
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',
|
||||
},
|
||||
});
|
||||
|
||||
export default App;
|
||||
+1
-7
@@ -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
|
||||
|
||||
@@ -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.
|
||||
@@ -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
|
||||
|
||||
@@ -1,61 +1,38 @@
|
||||
# :space_invader: React Native Template TypeScript · [](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>
|
||||
|
||||
[](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
|
||||
- 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
|
||||
```sh
|
||||
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.
|
||||
|
||||
[](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)
|
||||
- ["3 Easy Steps to Set Up React Native with TypeScript, Jest and Enzyme" on Medium by Jan Hesters](https://medium.com/@jan.hesters/3-easy-steps-to-set-up-react-native-with-typescript-jest-and-enzyme-592ca042262f)
|
||||
|
||||
## :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.
|
||||
@@ -11,4 +11,4 @@ import renderer from 'react-test-renderer';
|
||||
|
||||
it('renders correctly', () => {
|
||||
renderer.create(<App />);
|
||||
});
|
||||
});
|
||||
@@ -3,6 +3,5 @@
|
||||
"@types/react-native": "latest",
|
||||
"@types/react-test-renderer": "latest",
|
||||
"@types/react": "latest",
|
||||
"ts-jest": "latest",
|
||||
"typescript": "latest"
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
module.exports = {
|
||||
preset: 'react-native',
|
||||
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
{
|
||||
"transform": {
|
||||
"^.+\\.tsx?$": "ts-jest"
|
||||
},
|
||||
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
|
||||
"moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"],
|
||||
"modulePaths": ["<rootDir>"]
|
||||
}
|
||||
Generated
+3
-3
@@ -903,9 +903,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"js-yaml": {
|
||||
"version": "3.12.1",
|
||||
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.1.tgz",
|
||||
"integrity": "sha512-um46hB9wNOKlwkHgiuyEVAybXBjwFUV0Z/RaHJblRd9DXltue9FTYvzCr9ErQrK9Adz5MU4gHWVaNUfdmrC8qA==",
|
||||
"version": "3.13.1",
|
||||
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
|
||||
"integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"argparse": "^1.0.7",
|
||||
|
||||
@@ -1,29 +1,25 @@
|
||||
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)
|
||||
const projectFilesToDelete = ['.flowconfig', 'App.js', '__tests__/App-test.js']
|
||||
|
||||
console.log('🔄 Setting up...')
|
||||
const templateFilesToDelete = ['setup.js', 'README.md', 'LICENSE']
|
||||
|
||||
packageJson.scripts.tsc = 'tsc'
|
||||
packageJson.jest = Object.assign(packageJson.jest, jestConfig)
|
||||
const deleteFile = filePath => {
|
||||
if (!fs.existsSync(filePath)) {
|
||||
return
|
||||
}
|
||||
|
||||
writeFile('package.json', JSON.stringify(packageJson, null, 2))
|
||||
fs.unlinkSync(filePath)
|
||||
}
|
||||
|
||||
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 => deleteFile(path.join(projectPath, fileName))
|
||||
const deleteTemplateFile = fileName => deleteFile(path.join(__dirname, fileName))
|
||||
|
||||
console.log(`✅ Setup completed!`)
|
||||
projectFilesToDelete.forEach(deleteProjectFile)
|
||||
templateFilesToDelete.forEach(deleteTemplateFile)
|
||||
+1
-1
@@ -11,5 +11,5 @@
|
||||
"strict": true,
|
||||
"target": "esnext"
|
||||
},
|
||||
"exclude": ["node_modules", "babel.config.js"]
|
||||
"exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
|
||||
}
|
||||
Reference in new issue
Block a user