content: import React from 'react';
  import { StyleSheet, TouchableHighlight, Text } from 'react-native';
  
  const styles = StyleSheet.create({
    button: {
      borderRadius: 5,
      flex: 1,
      height: 44,
      alignSelf: 'stretch',
      backgroundColor: '#ff0000',
      justifyContent: 'center',
      overflow: 'hidden',
    },
    buttonText: {
      fontSize: 18,
      margin: 5,
      textAlign: 'center',
    },
  });
  
  
  const LogoutButton = React.createClass({
    propTypes: {
      onPress: React.PropTypes.func.isRequired,
      children: React.PropTypes.any.isRequired,
    },
  
    getInitialState() {
      return {
        active: false,
      };
    },
  
    _onHighlight() {
      this.setState({ active: true });
    },
  
    _onUnhighlight() {
      this.setState({ active: false });
    },
  
    render() {
      const colorStyle = { color: this.state.active ? '#fff' : '#fffaf0' };
  
      return (
        <TouchableHighlight
          onHideUnderlay = {this._onUnhighlight}
          onPress = {this.props.onPress}
          onShowUnderlay = {this._onHighlight}
          style = {styles.button}
          underlayColor="#8b0000"
        >
            <Text style = { [styles.buttonText, colorStyle] }>{this.props.children}</Text>
        </TouchableHighlight>
      );
    },
  });
  
  module.exports = LogoutButton;
  