Nutrient Packed Morsels

    react-titanium

    0.4.0 • Public • Published

    react-titanium

    A React custom renderer for Appcelerator® Titanium™ SDK.

    This renderer should currently be considered as experimental and subject to change since it works on a beta version of React (0.14.0-beta3).

    Installation

    cd Titanium_Workspace/MyApp
     
    # Initialize a node package here 
    $ npm init
     
    # Let you use transformers (such as Babel) and npm packages 
    $ npm install --save-dev titaniumifier
    $ node_modules/.bin/install-titaniumifier-plugin
    $ node_modules/.bin/install-titaniumifier-plugin --no-simulate
     
    # React-titanium requires v0.14 
    $ npm install --save react@0.14.0-beta3 react-titanium
    # Let’s write in ES2015! 
    $ npm install --save-dev babelify babel-runtime

    Edit your package.json file so it looks like this:

    {
      // This is the starting point of our app
      "main": "Resources/app.js",
     
      // Hook Babel transformation into Titaniumifier
      "titaniumifier": {
        "transforms": {
          "babelify": {
            "stage": 0,
            "optional": [ "runtime" ],
            "plugins": [ "react-titanium/lib/babel-plugin:before" ]
          }
        }
      }
    }

    Test your installation:

    $ [appc] ti build --platform ios

    Example

    import React, { Component } from 'react';
    import { render } from 'react-titanium';
     
    class App extends Component {
      state = { counter: 0 };
     
      increment = () => this.setState({
        counter: this.state.counter + 1
      });
     
      open = window => {
        if (this.opened || !window) return;
     
        this.opened = true;
        window.open();
      }
     
      render() {
        return (
          <window
            onClick={ this.increment }
            ref={ this.open }
          >
            <label color="#09f">
              We got to: { this.state.counter }
            </label>
          </window>
        );
      }
    }
     
    render(<App />);

    Building and Development

    Setup

    $ git clone git@github.com:yuchi/react-titanium.git
    cd react-titanium
    $ npm install

    Compiling (ES2015 to ES5)

    $ npm run compile

    Testing (temporary solution)

    cd Titanium_Workspace
    $ titanium create # Follow the instructions to create an app 
    cd MyApp
    $ npm init
    $ npm install --save-dev titaniumifier
    $ node_modules/.bin/install-titaniumifier-plugin
    $ node_modules/.bin/install-titaniumifier-plugin --no-simulate
    $ npm install --save-dev babelify babel-runtime # Edit the package.json!! 
    $ npm install --save react@0.14.0-beta3
    $ ln -s /path/to/my/react-titanium node_modules/react-titanium
    # Then compile and... 
    $ titanium build --platform ios # ...have fun! 

    Acknowledgements

    I was finally able to grok how to implement a custom renderer thanks to Yomguithereal’s fantastic react-blessed.

    Go thank him with a follow or a star! 👍

    License

    MIT

    Install

    npm i react-titanium

    DownloadsWeekly Downloads

    9

    Version

    0.4.0

    License

    MIT

    Last publish

    Collaborators

    • yuchi