React-Native + Typescript Recipe

This is a very straightforward recipe to help you create a React-Native project using Typescript. I've included some tips and troubleshoots as well.
Basic structuring
To start a React-Native application using Typescript, follow the instructions from this tutorial
By now you should have a very simple but working example of a RN application with TS.
Tips
Before going a little bit further, here are a few tips:
Bundler troubleshooting
Using RN’s package bundler can sometimes be quite challenging. If you ever encounter issues when rebuilding your app, follow the next steps:
- close all open command line window’s running the bundler
- ensure there is no bundler running despite closing all related command line windows by killing all processes listening to port 8081
list all processes listening to the port: lsof -i :8081
kill the processes using their PID: kill -9 <PID>
Debugging
You can either follow FB’s official instructions or use a stand-alone version of the debugger.
Using Android
Testing an RN application on Android is usually less straightforward then testing on iOS. When running on Android, RN does not automatically open the simulator. Instead of using the Android Studio to open a simulator, you can run the following commands:
- List available emulators — ~/Library/Android/sdk/tools/emulator -list-avds
- Start a specific model (in this example, we are using Nexus_5X_API_25) — ~/Library/Android/sdk/tools/emulator -no-boot-anim -avd Nexus_5X_API_25 -netdelay none -netspeed full
One more thing, if you need to open the dev menu, you can use ~/Library/Android/sdk/platform-tools/adb shell input keyevent 82.
Supporting iPhone X
All you have to do is to add a safe area. There is an example here.
Using absolute paths
One ugly side of working with internal dependencies is the use of relative paths. It starts with ./sibling-dependency, them goes to ../parent-dependency and when you realize the size of the hole you’re in, you see something like this: ../../../somewhere-in-the-world-dependency. And things get more complicated when you want to re-structure your files.
To avoid this problem we use paths configuration from TS. Following the instructions from here, we make the following modifications:
Add ”baseUrl”: “.” and ”paths”: { “~/*”: [“src/*”] } to tsconfig.json
- Create the source folder called src and a package.json file inside of it with the following content: { “name”: “~” }
With this configuration, we should be able to refer to files and folders with the ~/ indicating our source folder as the root of our application. To test it you can move the App.tsx to the source folder, change the reference from the index.js to import App from ‘~/App’;.
Renaming the application and package name
Even if you’ve named correctly your application when you created it, the Android’s package name and iOS bundle id may not be correct. To fix this, we can use a package to automatically change almost everything that is needed.
- Run the following: npx react-native-rename <newName> -b <bundleIdentifier>
- Open your application XCode project and change manually the bundle id.
You can check if everything has been changed accordingly by comparing the changes with this tutorial.
Adding fonts
Simply follow this tutorial.
Toubleshooting
Here is a list of possible errors you might encounter and how to solve some of them.
Print: Entry, “:CFBundleIdentifier”, Does Not Exist
Check this issue here
Android does not support some JS feature (i.s Proxies)
Update the Javascript core bundled in Android apps by following this tutorial.

