'use strict';

var React = require('react-native');

var {
  View,
  TouchableNativeFeedback,
} = React;

var TouchableIssue = React.createClass({

  render() {
    return (
      <TouchableNativeFeedback background={TouchableNativeFeedback.SelectableBackground()} delayPressIn={0}>
        <View style={styles.root}>

          <TouchableNativeFeedback background={TouchableNativeFeedback.SelectableBackgroundBorderless()} delayPressIn={0}>
            <View style={styles.action} />
          </TouchableNativeFeedback>

          <TouchableNativeFeedback background={TouchableNativeFeedback.SelectableBackgroundBorderless()} delayPressIn={0}>
            <View style={styles.action} />
          </TouchableNativeFeedback>

          <TouchableNativeFeedback background={TouchableNativeFeedback.SelectableBackgroundBorderless()} delayPressIn={0}>
            <View style={styles.action} />
          </TouchableNativeFeedback>

        </View>
      </TouchableNativeFeedback>
    )
  },

});

var styles = React.StyleSheet.create({

  root: {
    flexDirection: 'row',
    height: 200,
    margin: 16,
    alignItems: 'center',
    justifyContent: 'space-around',
    backgroundColor: 'rgba(0, 0, 0, .1)',
  },

  action: {
    width: 48,
    height: 48,
    backgroundColor: 'rgba(255, 0, 0, .5)',
  },

});

module.exports = TouchableIssue;