Describes instructions for building a React Native application using TypeScript.
In the root directory, running npm install
would install all the dependencies.
For setting up TypeScript with React Native, the jsx
flag needs to be set to react-native
. All the typescript code could be organized inside a single folder (ts
), and the resultant javascript code can be organised inside another folder (js
). These folders can be mentioned in the rootDir
and outDir
flags respectively.
tsc -w
would run the typescript compiler in watch mode, monitoring the rootDir
for any changes and instantly compiling to outDir
.
During the first run, all the packages need to be installed. So in the root folder, run:
npm install
npm install -g react-native
(in casereact-native
does not exist)react-native link
would link the required assets to the projectreact-native run-android
(this command should install the app on your device, with the assumption thatadb
works on your system, and USB debugging has been enabled on your device)
Connect the physical device and run react-native run-android
. In another terminal window, run react-native start
, in the root folder. This would create a development server that creates incremental builds and deploys them on the device.
Also, once the app has loaded on the device, long press the menu key, and an alert window would open with a bunch of option. Select Enable Hot Reloading
in the menu. This should now automatically pick up any changes made to the js
files (which at this point, would be compiled from ts/*.tsx files, if the typescript compiler is being run in the watch mode). If hot reloading doesn't work, reinstall the app using react-native run-android
with react-native start
still running. This should fix the issue. Now edit ts/app.tsx
and see the changes live on your device.
To make the build process easier, use ts/app.tsx
as the main
file that exports one single function. This function can then be imported in index.android.js
or index.ios.js
. Thus, the index.*.js
files need not be touched. All new functionality could be added in multiple source files in ts/
directory.
To create icons for different platforms, place your icon under resources folder in root directory or replace the existing icon.png with your file.
npm install
brew install imagemagick
Cmd/Ctrl + Shift + P
~> This will open a task runner. Typetask
and chooseShip Icons
from the options shown.- Press enter as confirmation of your project name shown and then on asking permission for overwrite type
y
and hit enter.