touchable-native-fix.js

'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)',
  },

});

exports.framework = 'React';
exports.title = '<TouchableIssue>';
exports.examples = [
  {
    render: () => <TouchableIssue />,
  },
];