react-native-better-buttons

Base components for move-to-cancel and long-press-to-cancel views

Features

• LongPressButton: Cancels actions after longPressTimout elapses
• MoveAwayButton: Cancels actions when user's finger moves outside button
• useLongPress: Hook for changing from pressed to longPressed state
• useMeasurement: Hook for determining the View's dimensions relative to the page (minX, maxX, minY, maxY)
• Ripple: Click effect for buttons. Derived from react-native-material-ripple

Installation

npm install --save react-native-better-buttons

Usage

LongPressButton

<LongPressButton
  style={theme.button}
  pressedStyle={theme.buttonPressed}
  onPressOut={() => {}}>
  <Text>LongPressButton</Text>
</LongPressButton>

MoveAwayButton

const { pressed, setPressed } = useLongPress()

const handleClick = () => {
  if (pressed) {
    onClick()
  }
  setPressed(false)
}

return (
  <MoveAwayButton
    style={[styles.card, pressed && styles.cardPressed]}
    pressed={pressed}
    setPressed={setPressed}
    onPressOut={handleClick}>
    <Text style={[styles.text, pressed && styles.textPressed]}>
      MoveAwayButton
    </Text>
  </MoveAwayButton>
)

useMeasurement

const { dimensions, setRef } = useMeasurement(buffer)

const handlePressIn = (e: GestureResponderEvent) => {
  const { pageX, pageY } = e.nativeEvent
  const { minX, maxX, minY, maxY } = dimensions
  // Do work
}

return (
  <View
    ref={setRef}
    onStartShouldSetResponder={() => true}
    onResponderGrant={handlePressIn}
  />
)

Properties

| name | description | type | default | | :-------------------------- | :--------------------------------------------------- | :------- | :----------- | | rippleColor | Ripple color | String | rgb(0, 0, 0) | | rippleOpacity | Ripple opacity | Number | 0.3 | | rippleDuration | Ripple duration in ms | Number | 400 | | rippleReset | Ripples before resetting. Prevents animation issues. | Number | 10 | | rippleSize | Ripple size restriction | Number | 0 | | rippleContainerBorderRadius | Ripple container border radius | Number | 0 | | rippleCentered | Ripple always starts from center | Boolean | false | | disableRippleFade | Ripple does not fade out | Boolean | false | | disableRipple | View is used instead of Ripple | Boolean | false | | disableRippleOnPressIn | onPressIn ripple is disabled | Boolean | false | | rippleOnPress | Ripples onPress | Boolean | false | | rippleOnPressOut | Ripples onPressOut | Boolean | false | | onPressIn | Touch moved in or started callback | Function | - | | onRippleAnimation | Animation start callback | Function | - | | longPressTimout | Time in ms before action is cancelled | Number | 800 | | moveCancelBuffer | Extra buffer before move away cancels action | Number | 10 |

Other View properties will also work

Copyright and License

MIT License

Copyright 2020 Jordan Wilking. All rights reserved.