versioning:

• Clone the repository
• Install Android Studio and try to setup a test project
• If you plan to use an Emulator try to run it with the test project and make sure it works
• Open the project with an IDE of your choice
• Run yarn

• Run yarn start to start the bundler

• Run your Android Emulator or connect a device
• Run yarn android

• Update CocoaPods
• Run yarn ios

Increase the number of inotify watches by running
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

There are 2 ways to fix this:

1. Link /usr/bin/adb to the adb client you installed (usually the one at ~/Android/sdk/platform-tools/adb)
2. Add ~/Android/sdk/platform-tools/adb to your $PATH

Make sure you only have one version of adb installed. Probably your system has one and Android Studio installed a second one. There are 2 ways to fix this:

1. Link /usr/bin/adb to the adb client you installed (usually the one at ~/Android/sdk/platform-tools/adb)
2. Add ~/Android/sdk/platform-tools/adb to your $PATH

Setup udev rules to allow user accounts to access your phone.

For naming we follow the airbnb style. For the JavasScript code style we use the standard style. For git commit messages this style.

with:

• YYYY - Full year - 2006, 2016
• MM - Short month - 1, 2 ... 11, 12
• Minor - The third number in the version. For feature and bugfix releases.

├── __mocks__
├── modules
│   └── app
│       ├── constants
│       ├── assets
│       ├── components
│       ├── containers
│       ├── actions
│       ├── hocs
│       └── reducers
└── routes
    └── route-name
│       ├── assets
│       ├── components
│       ├── containers
│       │   └── RouteNamePage.js
│       ├── actions
│       ├── hocs
│       └── reducers

A component always follows the following structure (Uppercase files always contain a single class):

├── __tests__
│   └── Caption.js
└── Caption.js

Webpack is used to compile and bundle the app.

React is used as frontend framework. This allows us to build a single-page-application easily.

Babel is used to make the app available to a broader audience while allowing the developers to use many new language features. We use flow for type safety.

Redux is used for the global application state. The data which is received through the restful api of the CMS is "cached" and stored in this state container.

• Jest is used for testing.
• is used for testing cross-platform compatibility

For debugging install react-native-debugger

Shake the device or press Ctrl+M to enter the menu. If you are connected though adb to your android device you can also run: adb shell input keyevent 82

You can enter the development menu and click "Reload" or use adb: adb shell input text "RR"

• Start react-native-debugger
• Start the metro bundler
• Connect a real device or run an emulator though adb (e.g. $ANDROID_HOME/emulator/emulator -avd <avd>)
• Setup network connectivity from the emulator/device to the host where the bundler is running (see here)
• Enter the development menu and enable "Remote JS Debugging"
• The app should reload now and the debugger should connect to the device

On Android you have 2 options:

• Setup a tunnel though adb: adb reverse tcp:8081 tcp:8081
• Open the development options of the react-native app (shake device or Ctrl+M) and set a development host

On iOS the post 8081 is tunneled by default. You can not change this. If the emulator is running on an other host you can proxy the port with yarn run proxy <host>

• The linter for JavaScript is eslint

You can run the linter by calling yarn run lint. Some issues can be fixed automatically by running yarn run lint:fix

Flow is used for static type checking.

Go to Settings > Languages & Frameworks > JavaScript and

• choose Flow as Language version
• set Flow package or executable to <project_dir>/node_modules/flow-bin

You can run flow using yarn flow.

Make sure you have at least nodejs 6 installed

We suggest IntellJ IDEA Ultimate as IDE. Just import this project (from existing sources). Run yarn in Terminal and right-click on package.json to show the npm scripts.

Install the following plugins:

• ESLint
• Styled Components

If you want you can associate the *.snap files with the file type JavaScript.

You can view our issues or create new ones on our jira.