react-native-better-buttons v1.2.1

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

Other View properties will also work

Copyright and License

MIT License

Copyright 2020 Jordan Wilking. All rights reserved.