gistfile1.c

/**
 * @providesModule TapDemoItem
 * @flow
 */
'use strict';

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

var {
    View,
    Image, 
    Text,
    TouchableHighlight
} = React;


var TapDemoItem = React.createClass({
    numTimesPressed : 0,

    minusImgUrl : {
        uri : 'http://4vector.com/i/free-vector-red-x-cross-wrong-not-clip-art_116715_Red_X_Cross_Wrong_Not_clip_art_hight.png'

    },

    propTypes : {
        title    : React.PropTypes.string,
        bodyText : React.PropTypes.string
    },

    render : function() {
        var description;
        
        var timesPressed = this.numTimesPressed,
            bodyText     = this.props.bodyText;

        if (timesPressed > 0) {
            bodyText = "Num times pressed " + timesPressed;   
        }

        // styles.container.setBorderColor((timesPressed % 2) ? '#ff00ff' : '#ffff00');

        var borderColor = (timesPressed % 2) ? '#ff00ff' : '#9999FF';

        return (
            <View style={[styles.container, { borderColor : borderColor }]}>
            
                {/* Title */}
                <View style={styles.titleContainer}>
                    <Text style={styles.titleText}>
                        {this.props.title}
                    </Text>
                    <TouchableHighlight 
                        underlayColor="rgb(210, 230, 255)" 
                        style={styles.minusImageContainer} >
                           
                            <Image source={this.minusImgUrl} style={styles.minusImage}/>
                    </TouchableHighlight>
                </View>

                {/* Body */}
                <View style={styles.bodyTextContainer}>
                    <Text style={styles.bodyText} onPress={this.onPress}>
                        {bodyText}
                    </Text>
                </View>
            </View>
        );
    },

    onPress : function() {
        this.numTimesPressed++;

        this.forceUpdate(); // Need to call to refresh component
    }
});

module.exports = TapDemoItem;