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.