blah.js

var React         = require('react-native'),
    windowDims    = require('Dimensions').get('window'),
    multiplier    = 1000000000000000,
    Icon          = require('react-native-vector-icons/Entypo')

var {
    StyleSheet,
    Text,
    View,
    ScrollView,
    MapView,
    Text,
    TouchableWithoutFeedback,
    TouchableHighlight,
    AlertIOS,
    Animated,
    LayoutAnimation,
    TouchableOpacity,
} = React;



var dayMap = {
    0 : 'Sun',
    1 : 'Mon', 
    2 : 'Tue',
    3 : 'Wed',
    4 : 'Thu',
    5 : 'Fri',
    6 : 'Sat'
};

var monthMap = [
    "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];





var BottomItem = React.createClass({
    getInitialState : function() {
        return {
            yValue : new Animated.Value(0),
        }
    },

    componentWillMount : function() {
        // LayoutAnimation.linear();
    },

    show : function() {
        // debugger;
        if (this.visible) {
            return;
        }
        // clearTimeout(this.hideTimout);
        // delete this.hideTimeout;

        Animated.timing(
            this.state.yValue,
            {
                toValue  : -80,
                duration : 200,
                // deceleration 
            }
        ).start();

        this.visible = true;
    },

    hide : function() {
        if (! this.visible) {
            return;
        }

        console.log('deselect')
        // this.hideTimout = setTimeout(() => {
            Animated.timing(
                this.state.yValue,
                {
                    toValue  : 0,
                    duration : 200,
                    delay    : 100
                }
            ).start();

            this.visible = false;

        // }, 75);
    },

    render() {
        var state     = this.state,
            data      = state.data,
            style = {
                // borderWidth : 1, 
                // borderColor : '#AEAEAE',
                height      : 50,
                width       : windowDims.width,
                flex        : 1,
                padding     : 10,
                justifyContent : 'center',
                position    : 'absolute',
                transform   : [
                    {
                        translateY : state.yValue
                    }
                ]
            };

        var title, 
            body,
            numEvents,
            eventStr;

        if (data) {
            numEvents = data.length,
            eventStr  = numEvents > 1 ? 'events' : 'event';

            title = <Text style={{fontWeight: '600', fontSize: 17}}>{data[0].locationName}, {data[0].stateName}:</Text>
            body  = <Text style={{}}>{numEvents} {eventStr}</Text>
        }
                        

        return (
            <Animated.View style={style}>
                <View style={styles.innerCt}>
                    <View style={styles.textCt}>
                        {title}
                        {body}
                    </View>
                    <TouchableOpacity activeOpacity={.6} style={styles.goButton} onPress={this.onGoButtonPress}>
                        <Icon name="arrow-with-circle-right" size={30} color="#009900" style={{marginTop : 7}}/>
                    </TouchableOpacity>
                </View>
            </Animated.View>
        );
    },

    onGoButtonPress : function() {
        this.props.onGoButtonPress && this.props.onGoButtonPress(this.state.data);
    }
});

var styles= StyleSheet.create({
    innerCt : {
        flexDirection   : 'row',
        justifyContent  : 'space-between',
        backgroundColor : '#FFFFFF', 
        borderWidth     : 1,
        borderColor     : '#EFEFEF',
        shadowColor     : '#AEAEAE', 
        shadowOpacity   : .5,
        shadowOffset    : { 
            width  : 5, 
            height : 5
        }, 
    },
    textCt : {
        flex            : 1,
        padding         : 5,
        paddingLeft     : 7, 
    },

    goButton : {
        width           : 50,
        justifyContent : 'space-around',
        flexDirection  : 'row',
        // backgroundColor : '#009900',
        // borderWidth    : 1,
        // borderColor    : '#FF0000'
    }
})

// BankGothicBold
// BankGothicBT-Medium"


module.exports = BottomItem;