1. IDE

There are vary of IDEs that you could use to code RN. I suggest Webstorm or the Atom (atom.io) with better syntax checking and autocomplete. Atom is very cool when developing the stylesheet for the app. You can install Atom following the below package:

- atom-react-native-css: use to generate the SCSS file into JS file.
- Nuclide which is suggested from Facebook

2. Shortcut

on XCode simulator:

Cmd + R: refresh the app
Cmd + D: show the Advance Menu

on Android simulator:

R + R: Reload current screen
Cmd + M: show the Advance Menu

3. Debug

Select "Debug JS Remotely" then it will open the Chrome browser and you should open DevTool from chrome to put the break point from Source tab.

You can also install the "React Native Debugger" which provide more handy tool for inspector - https://github.com/jhen0409/react-native-debugger

4. Inspector

Inspector is quite useful when you want to see how does the DOM render from RN. This could be done by selecting "Show Inspector" right inside the Advance menu, but it a little space to navigate.

For better inspector you may try Nuclide package, start your app and deactivate chrome or safari debugging, then press Cmd+Shift+P in Atom. This will trigger the command palette and you can toggle the dev tools by searching for React Native Inspector.

results matching ""

    No results matching ""