Create Expo + ReactNative + Typescript Manually

I can make Expo + ReactNative + Typescript via below script easily.

]$ create-react-native-app {{APP_NAME}} --scripts-version=react-native-scripts-ts

But, Sometimes I need setup typescript manually.

Here the solution !

]$ yarn add -D typescript tslib @types/react @types/react-native @types/expo

Write App.js file below..

import AppContainer from "./src/AppContainer";

export default AppContainer;

Make src folders for all typescript sources and create App Component in AppContainer.tsx file used in App.js in root path.

import React from "react";

import { Text, View } from "react-native";

const AppContainer: React.SFC<{}> = () => {

return (

<View>

<Text>Hello World</Text>

</View>

);

};

export default AppContainer;

And add the tsconfig.json file and tslint.json file for develop(Optional)

// tsconfig.json

{

"compilerOptions": {

"module": "commonjs",

"target": "es5",

"lib": ["es6", "dom", "esnext.asynciterable"],

"sourceMap": false,

"jsx": "react-native",

"moduleResolution": "node",

"forceConsistentCasingInFileNames": true,

"noImplicitReturns": true,

"noImplicitThis": true,

"noImplicitAny": false,

"importHelpers": true,

"strict": true,

"strictNullChecks": true,

"suppressImplicitAnyIndexErrors": true,

"noUnusedLocals": true,

"esModuleInterop": true,

"skipLibCheck": true

},

"exclude": [

"node_modules",

"build",

"scripts",

"acceptance-tests",

"webpack",

"jest",

"src/setupTests.ts"

]

}

// tslint.json

{

"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],

"rules": {

"max-classes-per-file": false,

"jsx-no-lambda": false,

"no-console": false

},

"linterOptions": {

"exclude": [

"config/**/*.js",

"node_modules/**/*.ts",

"coverage/lcov-report/*.js",

"src/countries.ts"

]

}

}

Make these config json files write in your taste.