Project Structure

The main project folder is the App folder:

Common File

File locate: App/Common`

  • Config.js: main config variables for the app
  • Colors.js: config theme color for the app
  • Constants.js: Config wordpress URL, icons, categories...
  • Images.js: list of all images use for the app
  • `Languages.js: main language file config

Components

  • Files locate in: App/Components
  • Common components that could be used many time, this could be a custom button, comment component, icon input...
  • App/Containers most container/pages of the app is putting here, you could change or re-structure by matching with your own project design.
  • App/Navigation Wrapper function for react-nativigation and main screens of navigation

Services

  • File locate: App/Services
  • magentoWorder.js: content most of the basic function to connect to the Magento API

Redux

  • Files locate: App/Redux
  • Contain main action and reducers

Which IDE to use?

There are many different IDE that you could use to code React Native, but there are some IDEs that shine better than others.

1. Webstorm

One of my most favorite. Webstorm support javascript harmony beautifully. Mass refactor code, linking resource manager, error checking.

The downside is Webstorm is not a free IDE and it kind of laggy when running on a low-end machine.

Available on Mac OS, Windows and Linux.

2. Visual Studio Code

Free. Open source. Runs everywhere. Have extensions market.

Available on Mac OS, Windows and Linux.

3. Nuclide or Atom

One of the best React Native IDE on Mac OS. Nuclide is built as single packet on top of Atom.

Debug the app

To enable the debugger tools, open the common/constants.js file and change these config 

Debug: true,
useReactotron: true

1. Reacttotron

Link download on desktop:https://github.com/infinitered/reactotron/blob/master/docs/installing.md

It's already config with the project, after installed the Reacttotron you can see list of Log, Image, connection, API, Redux actions....

2. React Native Debugger

This is a standalone app for debugging React Native apps, follow this guide to install the app https://github.com/jhen0409/react-native-debugger