(React Native) Setting Up React Native Project with TypeScript and Redux

3 min readDec 6, 2018

I write this article for the sake of the remainder about what I need to include when I create a React Native project with TypeScript and Redux.

Note:
Make sure you already have everything you need to use React Native such as ‘watchman’, ‘react-native-cli’, etc.

1. Add TypeScript stuff

// Add typescript to devDependencies
yarn add -D typescript// Add react-native-typescript-transformer to build the project's TypeScript files as part of the bundling proces
yarn add -D react-native-typescript-transformer// init typescript
yarn tsc --init --pretty --jsx react// Add types
yarn add -D @types/react @types/react-native// Rename App.js to App.tsx
// This step is optional since you can just delete App.js and make your new App.tsx in the directory you want
mv App.js App.tsx// Add linting stuff
yarn add -D tslint tslint-config-prettier tslint-config-standard tslint-react prettier

2. Add rules to tslint.js from Terminal

Note: You can modify the rules later.

echo "{
  \"defaultSeverity\": "\error\",
  \"extends\": [
    \"tslint:recommended\",
    \"tslint-config-standard\",
    \"tslint-react\",
    \"tslint-config-prettier\"
  ],
  \"jsRules\": {},
  \"rules\": {
    \"ordered-imports\": false,
    \"object-literal-sort-keys\": false,
    \"member-ordering\": false,
    \"jsx-no-lambda\": false,
    \"jsx-boolean-value\": false,
    \"member-access\": [true, "no-public"],
    \"no-console\": false,
    \"no-empty-interface\": false,
    \"interface-name\": [false, \"always-prefix\"]
  },
  \"rulesDirectory\": []
}" >> tslint.json

3. Add rules to prettierrc from Terminal

Note: You can modify the rules later.

echo "{
  \"semi\": false,
  \"singleQuote\": true,
  \"trailingComma\": \"es5\"
}" >> .prettierrc

3. Add Redux stuff

yarn add -D redux react-redux @types/react-redux

An optional way to add all the stuff at once

You can wrap all the steps up into a single ‘.sh’ file as below. When you go for this way, just create a ‘.sh’ file and run the script in the directory you want to create your React Native project.

// react-native.sh
// You can name this file whatever you want.
// $1 would be replaced with the project name when you run the script.react-native init $1
cd $1
yarn add -D typescript
yarn add -D react-native-typescript-transformer
yarn tsc --init --pretty --jsx react
yarn add -D @types/react @types/react-native
mv App.js App.tsx
yarn add -D tslint tslint-config-prettier tslint-config-standard tslint-react prettier
echo "{
  \"defaultSeverity\": "\error\",
  \"extends\": [
    \"tslint:recommended\",
    \"tslint-config-standard\",
    \"tslint-react\",
    \"tslint-config-prettier\"
  ],
  \"jsRules\": {},
  \"rules\": {
    \"ordered-imports\": false,
    \"object-literal-sort-keys\": false,
    \"member-ordering\": false,
    \"jsx-no-lambda\": false,
    \"jsx-boolean-value\": false,
    \"member-access\": [true, "no-public"],
    \"no-console\": false,
    \"no-empty-interface\": false,
    \"interface-name\": [false, \"always-prefix\"]
  },
  \"rulesDirectory\": []
}" >> tslint.json
echo "{
  \"semi\": false,
  \"singleQuote\": true,
  \"trailingComma\": \"es5\"
}" >> .prettierrc
yarn add -D redux react-redux @types/react-redux

After creating the ‘.sh’ file, run the script.

. react-native.sh NewReactNativeProjectName

That’s everything. If you have a better way, please let me know!

References:

Using TypeScript with React Native:
https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native

Stackoverflow:
https://stackoverflow.com/questions/51670121/why-is-typescript-transformer-and-custom-rn-cli-config-needed-for-react-native-t