react-native-button.js

import React from 'react';
import PropTypes from 'prop-types';
import { Text, View, ViewPropTypes } from 'react-native';
import { GestureHandler } from 'expo';

import styles from './styles';

const { LongPressGestureHandler, State, RectButton } = GestureHandler;

class Button extends React.Component {
  static propTypes = {
    title: PropTypes.string,
    dark: PropTypes.bool,
    longPressMinDuration: PropTypes.number,
    containerStyle: ViewPropTypes.style,
    buttonStyle: ViewPropTypes.style,
    textStyle: ViewPropTypes.style,

    onPress: PropTypes.func,
    onLongPressStarted: PropTypes.func,
    onLongPressCancelled: PropTypes.func,
    onLongPressEnd: PropTypes.func,
    onLongPress: PropTypes.func, // alias for onLongPressEnd
  };

  static defaultProps = {
    title: '',
    dark: false,
    longPressMinDuration: 500,
    containerStyle: undefined,
    buttonStyle: undefined,
    textStyle: undefined,

    onPress: () => {},
    onLongPressStarted: () => {},
    onLongPressCancelled: () => {},
    onLongPressEnd: () => {},
    onLongPress: () => {},
  };

  onPress = () => {
    this.props.onPress(this.props.title);
  }

  onLongPressStateChange = (event) => {
    const { title } = this.props;
    switch (event.nativeEvent.state) {
      case State.ACTIVE:
        this.props.onLongPressStarted(title);
        break;
      case State.CANCELLED:
        this.props.onLongPressCancelled(title);
        break;
      case State.END:
        this.props.onLongPressEnd(title);
        this.props.onLongPress(title);
        break;
      default:
        break;
    }
  }

  render() {
    const {
      title, dark, longPressMinDuration,
      containerStyle, buttonStyle, textStyle,
    } = this.props;
    return (
      <View style={[styles.buttonContainer, containerStyle]}>
        <LongPressGestureHandler
          onHandlerStateChange={this.onLongPressStateChange}
          minDurationMs={longPressMinDuration}
        >
          <RectButton
            style={[styles.button, dark ? styles.buttonDark : undefined, buttonStyle]}
            onPress={this.onPress}
          >
            <Text style={[styles.buttonText, textStyle]}>{title}</Text>
          </RectButton>
        </LongPressGestureHandler>
      </View>
    );
  }
}