Skip to content

Commit b937346

Browse files
authored
Merge pull request #16 from emin93/rn-0.56
RN 0.56 support
2 parents c11df24 + cd047d5 commit b937346

File tree

5 files changed

+27
-92
lines changed

5 files changed

+27
-92
lines changed

App.tsx

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,17 @@
44
*
55
* Generated with the TypeScript template
66
* https://github.com/emin93/react-native-template-typescript
7+
*
8+
* @format
79
*/
810

9-
import React, { Component } from 'react';
10-
import {
11-
Platform,
12-
StyleSheet,
13-
Text,
14-
View
15-
} from 'react-native';
11+
import React, {Component} from 'react';
12+
import {Platform, StyleSheet, Text, View} from 'react-native';
1613

1714
const instructions = Platform.select({
18-
ios: 'Press Cmd+R to reload,\n' +
19-
'Cmd+D or shake for dev menu',
20-
android: 'Double tap R on your keyboard to reload,\n' +
15+
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
16+
android:
17+
'Double tap R on your keyboard to reload,\n' +
2118
'Shake or press menu button for dev menu',
2219
});
2320

@@ -26,15 +23,9 @@ export default class App extends Component<Props> {
2623
render() {
2724
return (
2825
<View style={styles.container}>
29-
<Text style={styles.welcome}>
30-
Welcome to React Native!
31-
</Text>
32-
<Text style={styles.instructions}>
33-
To get started, edit App.tsx
34-
</Text>
35-
<Text style={styles.instructions}>
36-
{instructions}
37-
</Text>
26+
<Text style={styles.welcome}>Welcome to React Native!</Text>
27+
<Text style={styles.instructions}>To get started, edit App.tsx</Text>
28+
<Text style={styles.instructions}>{instructions}</Text>
3829
</View>
3930
);
4031
}

README.md

Lines changed: 6 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -31,45 +31,24 @@ node setup.js
3131
- [Type definitions for React & React Native](https://github.com/DefinitelyTyped/DefinitelyTyped)
3232
- [TS Jest](https://github.com/kulshekhar/ts-jest)
3333

34-
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.
34+
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.
3535

3636
Lots of :heart: and credits to the owners and maintainers of those packages.
3737

3838
### Why the setup script?
3939

40-
The React Native CLI supports automatic installation of production dependencies only. Since TypeScript and the other dependencies are dev dependencies, the setup script is being used to install those. It also takes care of obsolete files like the `.flowconfig` and the `setup.js` itself after the setup.
40+
It deletes obsolete files like the `.flowconfig` and the `setup.js` itself after the setup.
4141

42-
### How will this template affect the React Native CLI workflow?
42+
### Does debugging work?
4343

44-
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.
44+
Yes it does.
4545

46-
### Does debugging work too?
47-
48-
Yes it does, but you need to enable the `sourceMap` option in the `tsconfig.json`.
49-
50-
Make sure it looks something like this:
51-
```json
52-
{
53-
"compilerOptions": {
54-
"allowSyntheticDefaultImports": true,
55-
"esModuleInterop": true,
56-
"jsx": "react",
57-
"module": "es6",
58-
"moduleResolution": "node",
59-
"noEmit": true,
60-
"noImplicitAny": true,
61-
"target": "es6",
62-
"sourceMap": true
63-
},
64-
"exclude": ["node_modules"]
65-
}
66-
```
67-
68-
This is not enabled by default as it is unknown if it has any negative effects on the transpilation time. For more information make sure to check out the [post by Nicolas Hémonic](https://medium.com/@NicolasHemonic/hi-mo-mac-d18286202602).
46+
[![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)
6947

7048
## :globe_with_meridians: Links
7149

7250
- ["Using React Native with TypeScript just became simple" on Medium](https://medium.com/@emin93/react-native-typescript-b965059109d3)
51+
- ["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)
7352

7453
## :computer: Contributing
7554

__tests__/App.tsx

Lines changed: 0 additions & 12 deletions
This file was deleted.

devDependencies.json

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
[
2-
"@types/jest",
3-
"@types/react",
4-
"@types/react-native",
5-
"@types/react-test-renderer",
6-
"react-native-typescript-transformer",
7-
"ts-jest",
8-
"typescript"
9-
]
1+
{
2+
"@types/jest": "latest",
3+
"@types/react-native": "latest",
4+
"@types/react-test-renderer": "latest",
5+
"@types/react": "latest",
6+
"react-native-typescript-transformer": "latest",
7+
"ts-jest": "latest",
8+
"typescript": "latest"
9+
}

setup.js

Lines changed: 2 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
const fs = require('fs')
22
const path = require('path')
3-
const {execSync} = require('child_process')
43

54
const packageJson = require('./package.json')
65
const jestConfig = require('./jest.json')
7-
const devDependencies = require('./devDependencies.json')
86

97
const deleteFile = (fileName) => {
108
const filePath = path.join(process.cwd(), fileName)
@@ -16,33 +14,12 @@ const deleteFile = (fileName) => {
1614
fs.unlinkSync(filePath)
1715
}
1816
const writeFile = (fileName, data) => fs.writeFileSync(path.join(process.cwd(), fileName), data)
19-
const isYarnAvailable = () => {
20-
try {
21-
execSync('yarn --version', {stdio: 'ignore'})
22-
return true
23-
} catch (exc) {
24-
return false
25-
}
26-
}
27-
28-
const packageManager = isYarnAvailable() ? 'yarn' : 'npm'
29-
const execOptions = {stdio: 'inherit'}
3017

31-
console.log('🔄 Please wait...\n')
18+
console.log('🔄 Setting up...')
3219

3320
packageJson.jest = Object.assign(packageJson.jest, jestConfig)
3421
writeFile('package.json', JSON.stringify(packageJson, null, 2))
3522

36-
console.log(`📦 Installing dependencies with ${packageManager}...\n`)
37-
38-
switch (packageManager) {
39-
case 'yarn':
40-
execSync(`yarn add ${devDependencies.join(' ')} --dev --exact`, execOptions)
41-
break
42-
default:
43-
execSync(`npm i ${devDependencies.join(' ')} --save-dev --save-exact`, execOptions)
44-
}
45-
4623
deleteFile('App.js')
4724
deleteFile('__tests__/App.js')
4825
deleteFile('.flowconfig')
@@ -52,4 +29,4 @@ deleteFile('README.md')
5229
deleteFile('LICENSE')
5330
deleteFile('setup.js')
5431

55-
console.log(`\n✅ Setup completed! You can now start with: ${packageManager} start\n`)
32+
console.log(`✅ Setup completed!`)

0 commit comments

Comments
 (0)