Getting started with Deco

Step 1: Download, install, and run Deco

First, make sure you have Xcode installed and you have launched it at least once to complete its first-time setup. Then, run the Deco installer. Once it is installed, you can launch Deco from the Applications folder.

Step 2: Create a new project

After opening Deco, click "Create New Project".

If/when you choose to open an existing project, please make sure it's backed up (via git or other means), since Deco is still in beta and works a little different than other IDEs.

Step 3: Run iOS Simulator

Click "Simulator" to start the iOS Simulator. This opens the iOS Simulator and sets up your project for live previewing. Make sure to enable Hot Loading and Live Reload by using Cmd+D after clicking to focus the iOS Simulator.

It may take a minute to initialize the React Native packager - you can view progress at the bottom of the IDE by clicking "Packager Output".

Step 4: Open index.ios.js

In the file list on the left, click on index.ios.js. This is your main project file.

Step 5: Insert component

Move your cursor to be between the <View> and </View> tags. Then type Cmd+I. The component search will pop up. Search for Segmented Control and then insert it. The component will appear instantly in both your code and your iOS Simulator.

Some components will install npm modules upon insertion.

Step 6: Adjust properties

On the right, you will see properties to customize this component. Try adjusting the tint color. As you make these adjustments, notice that it is modifying your code, and hot reloading your project in the simulator.

Deco achieves this by auto-saving as you work. You can adjusts the auto-save configuration in "Preferences."

Step 7: Have fun, and join our Slack channel!

Now you have all you need to get started. You may want to refer to the React Native documentation. We also highly recommend signing up for our Slack channel, where you can chat with us and other developers.