feat: add typescript example from new expo init

This commit is contained in:
Cedric van Putten
2020-02-01 18:11:42 +00:00
parent 51b10088b1
commit 2173e71543
10 changed files with 5594 additions and 0 deletions

View File

@@ -0,0 +1,4 @@
{
"f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd": true,
"89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true
}

19
with-typescript/App.tsx Normal file
View File

@@ -0,0 +1,19 @@
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.tsx to start working on your app!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

21
with-typescript/README.md Normal file
View File

@@ -0,0 +1,21 @@
# [TypeScript Example](https://www.typescriptlang.org/)
TypeScript is a superset of JavaScript which gives you static types and powerful tooling in Visual Studio Code including autocompletion and useful inline warnings for type errors.
### ⚽️ Getting started with TypeScript
#### Creating a new project**
- Install the CLI: `npm i -g expo-cli`
- Create a project: `expo init --template expo-template-blank-typescript`
- `cd` into the project
### Adding TypeScript to existing projects
- Copy the `tsconfig.json` from this repo, or new typescript template
- Add typescript dependencies: `yarn add --dev @types/react @types/react-native typescript`
- Rename files tpo TypeScript, `.tsx` for React components and `.ts` for plain typescript files
## 👀 More info
- [Expo TypeScript guide](https://docs.expo.io/versions/latest/guides/typescript/)

30
with-typescript/app.json Normal file
View File

@@ -0,0 +1,30 @@
{
"expo": {
"name": "with-typescript",
"slug": "with-typescript",
"privacy": "public",
"sdkVersion": "36.0.0",
"platforms": [
"ios",
"android",
"web"
],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

View File

@@ -0,0 +1,6 @@
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};

View File

@@ -0,0 +1,26 @@
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~36.0.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-screens": "2.0.0-alpha.12",
"react-native-web": "~0.11.7"
},
"devDependencies": {
"@types/react": "~16.9.0",
"@types/react-native": "~0.60.23",
"@babel/core": "^7.0.0",
"babel-preset-expo": "~8.0.0",
"typescript": "~3.6.3"
},
"private": true
}

View File

@@ -0,0 +1,11 @@
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"jsx": "react-native",
"lib": ["dom", "esnext"],
"moduleResolution": "node",
"noEmit": true,
"skipLibCheck": true,
"resolveJsonModule": true
}
}

5477
with-typescript/yarn.lock Normal file

File diff suppressed because it is too large Load Diff