Skip to content

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

License

Notifications You must be signed in to change notification settings

jordanwilking/react-native-better-buttons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-better-buttons

npm license

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

LongPressButton
MoveAwayButton
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.