gistfile1.js

/**
 * Copyright 2004-present Facebook. All Rights Reserved.
 *
 * @providesModule DemoApp
 * @flow
 */
'use strict';

var React       = require('react-native'),
    styles      = require('./Styles'),
    TapDemoItem = require('./TapDemoItem/TapDemoItem');

var {
    Bundler,
    StyleSheet,
    TouchableHighlight,
    ScrollView,
    View,
    Text,
    Image
} = React;


var DemoApp = React.createClass({
    plusImgUrl : {
        uri : "http://yellowicons.com/wp-content/uploads/Plus-Icon-5.png"
    },

    childItems: [],

    render : function() {
        var children = this.childItems.map((child, index) => 
            <TapDemoItem title={"Child Component #" + index} bodyText={"Tap this!"}></TapDemoItem>
        );  

        return (
            <View style={styles.container}>
                <View style={styles.addNewItemContainer}>
                    <Text style={styles.addNewItemText} >{"Add new child"}</Text>

                    <TouchableHighlight 
                        underlayColor="rgb(210, 230, 255)" 
                        style={styles.plusImageContainer} 
                        onPress={this.onAddNewChildPress}>
                        
                            <Image source={this.plusImgUrl}  style={styles.plusImage} />
                    </TouchableHighlight>
                </View>
                
                <ScrollView style={styles.scrollViewContainer}>
                    {children}
                </ScrollView>
            </View>
        );

    },

    onAddNewChildPress : function() {
        this.childItems.push({
            something : 'foo'
        });

        console.log('added child #' + (this.childItems.length));

        this.forceUpdate();
    }
});



Bundler.registerComponent('DemoApp', () => DemoApp);

module.exports = DemoApp;