Compare commits

...
5 Commits
Author SHA1 Message Date
Emin Khateeb 0ab55f4385 moved branch option 2019-07-05 08:06:18 +02:00
Emin Khateeb 0b54ba54c6 updated start screen 2019-07-05 08:00:16 +02:00
Emin Khateeb 9d2f745914 now building only master 2019-07-05 07:49:59 +02:00
Emin Khateeb 651d111624 fixed readme build status link 2019-06-17 11:19:00 +02:00
Emin Khateeb cbe99e2b0f refactored readme 2019-06-17 11:17:40 +02:00
3 changed files with 107 additions and 73 deletions

No files matched your search

+1
View File
@@ -6,6 +6,7 @@ cache:
- "node_modules" - "node_modules"
deploy: deploy:
on: on:
branch: master
tags: true tags: true
provider: npm provider: npm
email: "emin@emin.ch" email: "emin@emin.ch"
+83 -35
View File
@@ -4,48 +4,96 @@
* *
* Generated with the TypeScript template * Generated with the TypeScript template
* https://github.com/emin93/react-native-template-typescript * https://github.com/emin93/react-native-template-typescript
* *
* @format * @format
*/ */
import React, {Component} from 'react'; import React, {Fragment} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native'; import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
const instructions = Platform.select({ import {
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', Header,
android: LearnMoreLinks,
'Double tap R on your keyboard to reload,\n' + Colors,
'Shake or press menu button for dev menu', DebugInstructions,
}); ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
interface Props {} const App = () => {
export default class App extends Component<Props> { return (
render() { <Fragment>
return ( <StatusBar barStyle="dark-content" />
<View style={styles.container}> <SafeAreaView>
<Text style={styles.welcome}>Welcome to React Native!</Text> <ScrollView
<Text style={styles.instructions}>To get started, edit App.tsx</Text> contentInsetAdjustmentBehavior="automatic"
<Text style={styles.instructions}>{instructions}</Text> style={styles.scrollView}>
</View> <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({ const styles = StyleSheet.create({
container: { scrollView: {
flex: 1, backgroundColor: Colors.lighter,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}, },
welcome: { body: {
fontSize: 20, backgroundColor: Colors.white,
textAlign: 'center',
margin: 10,
}, },
instructions: { sectionContainer: {
textAlign: 'center', marginTop: 32,
color: '#333333', paddingHorizontal: 24,
marginBottom: 5,
}, },
}); sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: Colors.dark,
},
highlight: {
fontWeight: '700',
},
});
export default App;
+23 -38
View File
@@ -1,53 +1,38 @@
# :space_invader: React Native Template TypeScript · [![Build Status](https://travis-ci.org/emin93/react-native-template-typescript.svg?branch=master)](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>
[![Header](https://cdn-images-1.medium.com/max/500/1*E9RnPOATuhjuNrlFkv5oSg.jpeg)](https://medium.com/@emin93/react-native-typescript-b965059109d3) > Clean and minimalist React Native template for a quick start with TypeScript.
## :star: Features ## :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 - Consistent with the default React Native template
- Always latest dependencies :raised_hands: - Minimal additional dependencies
## :arrow_forward: Quick Start ## :arrow_forward: Usage
```bash ```sh
react-native init MyApp --template typescript react-native init MyApp --template typescript
``` ```
## :question: FAQ
### 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)
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.
### Does debugging work?
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)
- ["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)
- ["Configs to make in an existing React Native project to migrate it to Typescript" - Gist by Italo Menezes](https://gist.github.com/italomlp/4d16bf0f19d09f9fae48d272f9e6306e)
## :computer: Contributing ## :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.