Compare commits

..
14 Commits
10 changed files with 109 additions and 88 deletions

No files matched your search

+60
View File
@@ -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<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 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,
},
});
+19 -7
View File
@@ -2,8 +2,18 @@
Clean and minimalist React Native template for a quick start with TypeScript.
[![Header](https://cdn-images-1.medium.com/max/500/1*E9RnPOATuhjuNrlFkv5oSg.jpeg)](https://medium.com/@emin93/react-native-typescript-b965059109d3)
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! :sparkles:
- Consistent with the default React Native template (no additional stuff)
- React Native TypeScript transformer directly integrated into the packager (no separate process for `tsc`)
- Unit testing in TypeScript with TS Jest
- Always latest dependencies :raised_hands:
## :arrow_forward: Quick Start
```
@@ -16,12 +26,10 @@ node setup.js
### What is included in this template?
- [TypeScript](https://github.com/Microsoft/TypeScript)
- [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)
- [TypeScript](https://github.com/Microsoft/TypeScript)
- [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)
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 +43,11 @@ 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
## :globe_with_meridians: Links
- ["Using React Native with TypeScript just became simple" on Medium](https://medium.com/@emin93/react-native-typescript-b965059109d3)
## :computer: Contributing
Contributions are very welcome. Please try to stay consistent with the other files I've created.
+9 -6
View File
@@ -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(<App exampleProp="helloWorld" />);
it('renders correctly', () => {
const tree = renderer.create(
<App />
);
});
-2
View File
@@ -1,7 +1,5 @@
[
"typescript",
"tslint",
"tslint-react",
"react-native-typescript-transformer",
"ts-jest",
"@types/react",
-4
View File
@@ -1,4 +0,0 @@
import { AppRegistry } from 'react-native';
import App from './src/App';
AppRegistry.registerComponent('HelloWorld', () => App);
-1
View File
@@ -12,7 +12,6 @@
"keywords": [
"react-native",
"typescript",
"tslint",
"jest",
"template",
"boilerplate"
+20 -4
View File
@@ -8,15 +8,31 @@ 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);
const isYarnAvailable = () => {
try {
execSync('yarnpkg --version', { stdio: 'ignore' });
return true;
} catch (e) {
return false;
}
}
console.log('🔄 Please wait...');
const packager = isYarnAvailable() ? 'yarn' : 'npm';
const execOptions = { stdio: 'inherit' };
console.log('\n🔄 Please wait...\n');
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));
execSync(`npm i ${devDependencies.join(' ')} --save-dev --save-exact`);
console.log(`\n📦 Installing dependencies with ${packager}...\n`);
if (packager === 'yarn') {
execSync(`yarn add ${devDependencies.join(' ')} --dev --exact`, execOptions);
} else {
execSync(`npm i ${devDependencies.join(' ')} --save-dev --save-exact`, execOptions);
}
deleteFile('App.js');
deleteFile('__tests__/App.js');
@@ -27,4 +43,4 @@ deleteFile('README.md');
deleteFile('LICENSE');
deleteFile('setup.js');
console.log('✅ Setup completed! You can now start with: npm start');
console.log(`\n✅ Setup completed! You can now start with: ${packager} start\n`);
-54
View File
@@ -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<IProps, IState> {
public render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit src/App.tsx
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
</View>
);
}
}
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",
},
});
+1
View File
@@ -4,6 +4,7 @@
"jsx": "react",
"noEmit": true,
"moduleResolution": "node",
"noImplicitAny": true
},
"exclude": [
"node_modules"
-10
View File
@@ -1,10 +0,0 @@
{
"defaultSeverity": "error",
"extends": [
"tslint:recommended",
"tslint-react"
],
"jsRules": {},
"rules": {},
"rulesDirectory": []
}