├── .gitignore ├── App.js ├── README.md ├── app.json ├── assets ├── fonts │ └── SpaceMono-Regular.ttf └── images │ ├── icon.png │ ├── robot-dev.png │ ├── robot-prod.png │ └── splash.png ├── babel.config.js ├── package.json ├── src ├── App.test.tsx ├── App.tsx └── __snapshots__ │ └── App.test.tsx.snap ├── tsconfig.json ├── tslint.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | npm-debug.* 4 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import App from './src/App' 2 | 3 | export default App 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native 0.57.1 app with typescript 2 | 3 | ## See also this repositories: 4 | 5 | - [https://github.com/janaagaard75/expo-and-typescript](https://github.com/janaagaard75/expo-and-typescript) 6 | - [https://github.com/slorber/expo-typescript](https://github.com/slorber/expo-typescript) 7 | 8 | ## Configure Typescript 9 | 10 | `tsc --init` 11 | 12 | `npm i -D @types/react @types/react-native @types/expo @types/expo__vector-icons` 13 | 14 | ## Configure Babel 15 | 16 | babel.config.js 17 | 18 | ``` 19 | module.exports = function(api) { 20 | api.cache(true) 21 | return { 22 | presets: ['babel-preset-expo'], 23 | plugins: [ 24 | [ 25 | 'module-resolver', 26 | { 27 | extensions: [ 28 | '.js', 29 | '.jsx', 30 | '.ts', 31 | '.tsx', 32 | '.android.js', 33 | '.android.tsx', 34 | '.ios.js', 35 | '.ios.tsx', 36 | ], 37 | root: ['./src'], 38 | }, 39 | ], 40 | ], 41 | } 42 | } 43 | ``` 44 | 45 | ## Configure Jest 46 | 47 | package.json 48 | 49 | ``` 50 | "jest": { 51 | "preset": "jest-expo" 52 | } 53 | ``` 54 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "sdkVersion": "31.0.0" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /assets/fonts/SpaceMono-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dalcib/expo-ts-example/789db15f26adf62c14e6fbcefc8eba8fa5adfb6f/assets/fonts/SpaceMono-Regular.ttf -------------------------------------------------------------------------------- /assets/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dalcib/expo-ts-example/789db15f26adf62c14e6fbcefc8eba8fa5adfb6f/assets/images/icon.png -------------------------------------------------------------------------------- /assets/images/robot-dev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dalcib/expo-ts-example/789db15f26adf62c14e6fbcefc8eba8fa5adfb6f/assets/images/robot-dev.png -------------------------------------------------------------------------------- /assets/images/robot-prod.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dalcib/expo-ts-example/789db15f26adf62c14e6fbcefc8eba8fa5adfb6f/assets/images/robot-prod.png -------------------------------------------------------------------------------- /assets/images/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dalcib/expo-ts-example/789db15f26adf62c14e6fbcefc8eba8fa5adfb6f/assets/images/splash.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true) 3 | return { 4 | presets: ['babel-preset-expo'], 5 | plugins: [ 6 | [ 7 | 'module-resolver', 8 | { 9 | extensions: [ 10 | '.js', 11 | '.jsx', 12 | '.ts', 13 | '.tsx', 14 | '.android.js', 15 | '.android.tsx', 16 | '.ios.js', 17 | '.ios.tsx', 18 | ], 19 | root: ['./src'], 20 | }, 21 | ], 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "expo-ts-example", 3 | "version": "0.31.0", 4 | "private": true, 5 | "main": "./node_modules/expo/AppEntry.js", 6 | "scripts": { 7 | "start": "expo start", 8 | "eject": "expo eject", 9 | "android": "expo android", 10 | "ios": "expo ios", 11 | "test": "node node_modules/jest/bin/jest.js --watch" 12 | }, 13 | "devDependencies": { 14 | "@babel/core": "^7.1.2", 15 | "@babel/preset-typescript": "^7.1.0", 16 | "@types/expo__vector-icons": "^6.2.3", 17 | "@types/jest": "^23.3.9", 18 | "@types/react": "^16.4.18", 19 | "@types/react-native": "^0.57.7", 20 | "@types/react-native-vector-icons": "^4.6.4", 21 | "@types/react-test-renderer": "^16.0.3", 22 | "babel-core": "^7.0.0-bridge.0", 23 | "babel-jest": "^23.6.0", 24 | "jest-expo": "31.0.0", 25 | "react-test-renderer": "16.5.0", 26 | "tslint-config-prettier": "1.15.0", 27 | "typescript": "^3.1.6" 28 | }, 29 | "dependencies": { 30 | "@types/expo": "^30.0.0", 31 | "babel-preset-expo": "^5.0.0", 32 | "expo": "^31.0.2", 33 | "react": "16.5.0", 34 | "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz", 35 | "react-native-vector-icons": "^6.0.2" 36 | }, 37 | "jest": { 38 | "preset": "jest-expo", 39 | "cache": false, 40 | "moduleFileExtensions": [ 41 | "js", 42 | "jsx", 43 | "json", 44 | "ts", 45 | "tsx" 46 | ], 47 | "testMatch": [ 48 | "**/*.test.ts?(x)" 49 | ], 50 | "transform": { 51 | "^.+\\.(js|jsx|ts|tsx)$": "babel-jest" 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import App from './App' 3 | 4 | import renderer from 'react-test-renderer' 5 | 6 | it('renders without crashing', () => { 7 | const rendered = renderer.create().toJSON() 8 | expect(rendered).toMatchSnapshot() 9 | expect(rendered).toBeTruthy() 10 | }) 11 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { StyleSheet, Text, View } from 'react-native' 3 | import { /* AppLoading, */ Asset, Font /* , Constants */ } from 'expo' 4 | import Icon from 'react-native-vector-icons/Ionicons' 5 | import { MaterialIcons } from '@expo/vector-icons' 6 | //import { version as reactNativeVersion } from './../node_modules/react-native/package.json' 7 | 8 | export default class App extends React.Component { 9 | state = { 10 | isLoadingComplete: false, 11 | } 12 | 13 | render() { 14 | /* if (!this.state.isLoadingComplete) { 15 | //console.log('Expo', Constants) 16 | return ( 17 | 18 | startAsync= 19 | {this._loadResourcesAsync} 20 | onError= 21 | {this._handleLoadingError} 22 | onFinish= 23 | {this._handleFinishLoading} 24 | 25 | ) 26 | } */ 27 | return ( 28 | 29 | Open up App.ts to start working on your app!!!! 30 | Changes you make will automatically reload. 31 | Shake your phone to open the developer menu. 32 | 33 | 34 | 35 | ) 36 | } 37 | 38 | _loadResourcesAsync = async () => { 39 | return Promise.all([ 40 | Asset.loadAsync([ 41 | require('./assets/images/robot-dev.png'), 42 | require('./assets/images/robot-prod.png'), 43 | ]), 44 | Font.loadAsync({ 45 | // This is the font that we are using for our tab bar 46 | //...(Icon as any).Ionicons.font, 47 | // We include SpaceMono because we use it in HomeScreen.js. Feel free 48 | // to remove this if you are not using it in your app 49 | 'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'), 50 | }), 51 | ]) 52 | } 53 | 54 | _handleLoadingError = (error: string) => { 55 | // In this case, you might want to report the error to your error 56 | // reporting service, for example Sentry 57 | console.warn(error) 58 | } 59 | 60 | _handleFinishLoading = () => { 61 | this.setState({ isLoadingComplete: true }) 62 | } 63 | } 64 | 65 | const styles = StyleSheet.create({ 66 | container: { 67 | flex: 1, 68 | backgroundColor: '#fff', 69 | alignItems: 'center', 70 | justifyContent: 'center', 71 | }, 72 | }) 73 | -------------------------------------------------------------------------------- /src/__snapshots__/App.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`renders without crashing 1`] = ` 4 | 14 | 15 | Open up App.ts to start working on your app!!!! 16 | 17 | 18 | Changes you make will automatically reload. 19 | 20 | 21 | Shake your phone to open the developer menu. 22 | 23 | 24 | 25 | 26 | `; 27 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "outDir": "build/dist", 6 | "sourceMap": true, 7 | "experimentalDecorators": true, 8 | "jsx": "preserve", 9 | "lib": ["es2015", "es2016"], 10 | "allowSyntheticDefaultImports": true, 11 | "moduleResolution": "node", 12 | "esModuleInterop": true, 13 | //"importHelpers": true, 14 | "noEmit": true, 15 | "strict": true, 16 | "isolatedModules": true, 17 | "suppressImplicitAnyIndexErrors": true, 18 | "forceConsistentCasingInFileNames": true, 19 | "noUnusedLocals": true /* Report errors on unused locals. */, 20 | "noUnusedParameters": true /* Report errors on unused parameters. */, 21 | "noImplicitReturns": true /* Report error when not all code paths in function return a value. */, 22 | "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */, 23 | 24 | "resolveJsonModule": true 25 | }, 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | /* 3 | * Possible values: 4 | * - the name of a built-in config 5 | * - the name of an NPM module which has a "main" file that exports a config object 6 | * - a relative path to a JSON file 7 | */ 8 | "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"], 9 | "rules": { 10 | "member-access": false, 11 | "object-literal-sort-keys": false, 12 | "missing-jsdoc": false, 13 | "newline-before-return": false, 14 | //"no-return-await": true, 15 | "interface-name": false, 16 | "no-console": false, 17 | "no-empty": false, 18 | "ordered-imports": false 19 | } 20 | } 21 | --------------------------------------------------------------------------------