Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Deco Components

What are Deco Components?

Deco Components are templates and dependencies that can be downloaded and inserted into your project through the Deco IDE.

Currently, templates are snippets of JSX with associated metadata. This metadata is used to identify important properties and build up the Deco UI for quickly tweaking the component.

Metadata files should not be created manually - they are created automatically in Deco as you add properties to the property panel through ⌥ Option + click.

Contributing Components

Want to add components to Deco?

Please submit a pull request which adds your component(s) to the package.json, following the schema described below.

For now, we'll review every component to make sure it works as expected in Deco. We plan to expand on the schema and make the "registry" more scalable moving forward :)


What about native modules?
  • We plan to at least automatically run rnpm link after the npm install succeeds. You'll have to reload the simulator manually in order for these components to show up though (can't hot reload binaries... yet). Maybe there's more we can do here to make inserting native modules just as awesome as inserting pure-JS components.
What about components that aren't JSX / React Native?
  • We plan to support other kinds of templates and frameworks. The format and IDE are agnostic to the kind of data and dependencies, but to keep it simple, we're limiting components to React-Native-compatible JSX for now.

Component Schema

  // (String) Component name
  "name": "Activity Indicator IOS",

  // (String) Component publisher
  "publisher": "deco",

  // (String) Semver string of the component schema
  "schemaVersion": "0.0.1",

  // (String[]) Searchable tags
  "tags": ["core", "ui", "react-native"],

  // (String) Image to display in the insert menu
  "thumbnail": "",

  // (String) A brief description
  "description": "A React Native component",

  // (Object) Metadata for the property inspector
  "inspector": {

    // (String) Automatically group properties - can be overriden individually


  // (Object) Where to find the component's text/metadata
  "template": {

    // (String) URL or relative path to the component's text
    "text": "",

    // (String) URL or relative path to the component's metadata
    "metadata": ""

  // (Object) Imports to insert at the top of the file
  "imports": {

    // (String|String[]|Object)
    // => import React from "react-native"
    "react-native": "React",

    // (String|String[]|Object)
    // => import { ActivityIndicatorIOS } from "react-native-2"
    "react-native-2": [

      // (String) Member to import


    // (String|String[]|Object)
    // => import React, * as R, { View, Text as T } from "react-native-3"
    "react-native-3": {

      // (String) Default import name
      default: 'React',

      // (Boolean) Should include *
      star: true,

      // (String) Alias for *
      alias: 'R',

      // ((String|Object)[])
      members: [

        // (String) Member to import

          // (String) Member to import
          name: 'Text',

          // (String) Alias for imported member
          alias: 'T'




  // (Object) Dependencies to install
  "dependencies": {

    // (String) Will run `npm install react-native --save`
    "react-native": "*"



Registry of React Native components, compatible with Deco IDE (




No releases published


No packages published

Contributors 4