React-Native + Typescript Recipe

Tiba
Tiba
Sep 3, 2018 · 3 min read

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:

  1. List available emulators — ~/Library/Android/sdk/tools/emulator -list-avds
  2. 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

  1. 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.

  1. Run the following: npx react-native-rename <newName> -b <bundleIdentifier>
  2. 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.

TaqtileBR

Tiba

Written by

Tiba

Working in progress… always

TaqtileBR

TaqtileBR

We are lifelong learners whose purpose is to build a workplace where the exchange of knowledge and caring for others are the top priorities.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade