Takeaways

Want to migrate your ReactNative App Project from FlowType to TypeScript? You’re at the right place! This article is intended to make it a piece of cake for you. The conversion laid ensures that:

• App’s files Git History retains after file conversion to .tsx
• VSCode configuration
• Shortcuts for cleaning up lint errors

Note: This guide is based on RN 0.62.2 (as long as you are around this version, you shouldn’t face any problem).

Step by Step Instructions

1. Git Changes

Git Changes section is a reference from the excellent work done by Daniel Hauser in this article

Checkout a new branch

You don’t want to mess with your working branch. Right! Try to avoid check-ins to the original branch to minimize the chances of conflicts.

git checkout -b "moving-from-flow-to-ts"

Checkout a new branch

If you simply rename .js to .tsx, git will mark the previous file as deleted and add a new file with .tsx extension. What does this mean?

You will loose all git history of your components and other files

To avoid this, we’ll use git mv command which renames file and maintains history. Run the following command in your root directory.

ls ./src/**/*.js | 
    while read line; do git mv -- $line ${line%.js}.ts; done;

We’re iterating through all .js files within .src folder and renaming all .js extension to .ts extension. You would need to change src to any other folder you’re using.

find ./src -type f -name "*.ts" |
    xargs grep 'import React[ ,]' |
    cut -d: -f1 |
    uniq | 
    while read line; do git mv -- $line ${line%.ts}.tsx; done;

Change App.js to tsx

In our command above, we didn’t touch files at root level. Of all, we are interested to change only App.js to tsx (Rest remain as-is)

git mv App.js App.tsx

Commit the new branch

git commit -m "rename js files to ts and tsx"

2. Project Setup

React Native official project uses ESLint (with TS plugin) and not tslint. You can validate by creating a new project using ReactNative Typescript template. All the following steps ensure that our project is aligned with the official template.

Update package.json

This is standard js template. Try to keep the versions aligned, especially for the bold items.

{
...
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"dependencies": {
"react": "16.11.0",
"react-native": "0.62.2"
},
"devDependencies": {
"@babel/core": "^7.6.2",
"@babel/runtime": "^7.6.2",
"@react-native-community/eslint-config": "^1.0.0",
"@types/jest": "^24.0.24",
"@types/react-native": "^0.62.0",
"@types/react-test-renderer": "16.9.2",
"@typescript-eslint/eslint-plugin": "^2.27.0",
"@typescript-eslint/parser": "^2.27.0",
"babel-jest": "^24.9.0",
"eslint": "^6.5.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.58.0",
"react-test-renderer": "16.11.0",
"prettier": "^2.0.4",
"typescript": "^3.8.3"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}
}

Ensure to install all missing packages. As you’ve updated package.json, we don’t need to run each install separately.

yarn install
cd ios && pod install
cd ..

Checkpoint – Let’s ensure our app is still working

Run following commands to install all libraries (I assume you’re using pods for ios)

2. Linting

We’ll use ESlint instead of TSlint. Why?

React-Native TypeScript Template uses ESLint with TypeScript Plugin. To Keep our project aligned to the Template, we’ll take this route!

Remove Flow

If you were using flowbin, remove flow related libraries (leaving them causes no harm but better to do some housekeeping)

yarn remove flow-bin

Delete .flowconfig file and remove flowTyped if you have.

Update .eslintrc.js

Update following attribute which adds TypeScript linting capability to ESlint:

...
extends: '@react-native-community',
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
...

VSCode has TypeScript default by enable so no changes needed on that front. However if you have been using listing using flow, remove the plugin and install

1. If you were using flow extensions, remove them from VSCode.
2. Install and enable ESlint VS Plugin (if not already installed and used)

Finding and Solving Linting Erros

If you were not using any linting, the first thing is to configure your project and VSCode, such that linting works

The lint command we added in package.json does the linting. You can run it to find linting error in your project

yarn lint

If you were not using any lint tool earlier, you’ll be overwhelmed with number of errors and soon will realize that most are related to unused imports and loval variables

Some tools at your rescue:

Alt/Command + Shift + O – This VS shortcut removes unused import

Prettier – If you add Prettier to execute on file save, it too will solve a lot of errors.

Following command can fix several auto-fixable errors

"lint": "eslint . --ext .js,.jsx,.ts,.tsx"

If you want to fix errors related to unused variables or imports later, you can disable them in .eslintrc.js (0=Off, 1=Warn, 2=On)

rules: {
'@typescript-eslint/no-unused-vars': 1,
'@typescript-eslint/no-unused-vars': 2,
},

Use https://flow-to-ts.netlify.com to understand TypeScript version of flow code to remove errors. For example,

import {type MyType} from '../../'

works in TypeScript without type keyword.

3. Closing

Run your app and ensure it is working fine. If you have tests, and you want to convert them to tsx, run the commands in section 1 for that folder.

Finally, checkin all code and create tsx files for your nre components.

If this article helped you, share your satisfaction in comment. Feel free to share problems you’re having.