Skip to main content

PanResponder

PanResponder allows more fine-grained control of the Gesture Responder System, as the handlers can depend also on gestureState, in addition to the Event.pressEvent which are passed to the Gesture Responder System handlers. In essence, by means of a custom PanResponder, Gesture Responder System handlers are extended to also depend upon the gestureState.

Types​

Event.pressEvent​

see Event

gestureState​

gestureState contains additional information on the state of the Gesture Responder System:

type gestureState = {
  stateID: float,
  moveX: float,
  moveY: float,
  x0: float,
  y0: float,
  dx: float,
  dy: float,
  vx: float,
  vy: float,
  numberActiveTouches: int,
}

t​

Abstract type for a PanResponder, created with create from a config record.

config​

type config = {
  onMoveShouldSetPanResponder?: (Event.pressEvent, gestureState) => bool,
  onMoveShouldSetPanResponderCapture?: (Event.pressEvent, gestureState) => bool,
  onStartShouldSetPanResponder?: (Event.pressEvent, gestureState) => bool,
  onStartShouldSetPanResponderCapture?: (Event.pressEvent, gestureState) => bool,
  onPanResponderReject?: (Event.pressEvent, gestureState) => unit,
  onPanResponderGrant?: (Event.pressEvent, gestureState) => unit,
  onPanResponderStart?: (Event.pressEvent, gestureState) => unit,
  onPanResponderEnd?: (Event.pressEvent, gestureState) => unit,
  onPanResponderRelease?: (Event.pressEvent, gestureState) => unit,
  onPanResponderMove?: (Event.pressEvent, gestureState) => unit,
  onPanResponderTerminate?: (Event.pressEvent, gestureState) => unit,
  onPanResponderTerminationRequest?: (Event.pressEvent, gestureState) => bool,
  onShouldBlockNativeResponder?: (Event.pressEvent, gestureState) => bool,
}

panHandlers​

panHandlers is the abstract type for panHandlers of a PanResponder, which can be accessed by means of the getter method panHandlers

callback<'a>​

callback<'a> is the type of the usual callback function specified for each Gesture Responder System handler defined as

type callback<'a> = Event.pressEvent => 'a

where 'a is either bool or unit

Methods​

create​

create allows creation of a PanResponder given a config

create: config => t

panHandlers​

panHandlers is a getter method to access panHandlers within a PanResponder

panHandlers: t => panHandlers

onMoveShouldSetResponder​

onMoveShouldSetResponder is a getter method to access the onMoveShouldSetResponder callback of a panHandlers object

onMoveShouldSetResponder: panHandlers => callback(bool)

onMoveShouldSetResponderCapture​

onMoveShouldSetResponderCapture is a getter method to access the onMoveShouldSetResponderCapture callback of a panHandlers object

onMoveShouldSetResponderCapture: panHandlers => callback(bool)

onStartShouldSetResponder​

onStartShouldSetResponder is a getter method to access the onStartShouldSetResponder callback of a panHandlers object

onStartShouldSetResponder: panHandlers => callback(bool)

onStartShouldSetResponderCapture​

onStartShouldSetResponderCapture is a getter method to access the onStartShouldSetResponderCapture callback of a panHandlers object

onStartShouldSetResponderCapture: panHandlers => callback(bool)

onResponderReject​

onResponderReject is a getter method to access the onResponderReject callback of a panHandlers object

onResponderReject: panHandlers => callback(unit)

onResponderGrant​

onResponderGrant is a getter method to access the onResponderGrant callback of a panHandlers object

onResponderGrant: panHandlers => callback(unit)

onResponderRelease​

onResponderRelease is a getter method to access the onResponderRelease callback of a panHandlers object

onResponderRelease: panHandlers => callback(unit)

onResponderMove​

onResponderMove is a getter method to access the onResponderMove callback of a panHandlers object

onResponderMove: panHandlers => callback(unit)

onResponderTerminate​

onResponderTerminate is a getter method to access the onResponderTerminate callback of a panHandlers object

onResponderTerminate: panHandlers => callback(unit)

onResponderStart​

onResponderStart is a getter method to access the onResponderStart callback of a panHandlers object

onResponderStart: panHandlers => callback(unit)

onResponderTerminationRequest​

onResponderTerminationRequest is a getter method to access the onResponderTerminationRequest callback of a panHandlers object

onResponderTerminationRequest: panHandlers => callback(bool)

onResponderEnd​

onResponderEnd is a getter method to access the onResponderEnd callback of a panHandlers object

onResponderEnd: panHandlers => callback(unit)

Example​

As props spread is not possible with ReScript JSX for arbitrary objects, each Gesture Responder System callback needs to be separately specified, with the relevant value obtained by means of the associated getter.

While props spread may not be available, copy-paste is probably supported by your editor...

onMoveShouldSetResponder={
  panHandlers->PanResponder.onMoveShouldSetResponder
}
onMoveShouldSetResponderCapture={
  panHandlers->PanResponder.onMoveShouldSetResponderCapture
}
onStartShouldSetResponder={
  panHandlers->PanResponder.onStartShouldSetResponder
}
onStartShouldSetResponderCapture={
  panHandlers->PanResponder.onStartShouldSetResponderCapture
}
onResponderReject={panHandlers->PanResponder.onResponderReject}
onResponderGrant={panHandlers->PanResponder.onResponderGrant}
onResponderRelease={panHandlers->PanResponder.onResponderRelease}
onResponderMove={panHandlers->PanResponder.onResponderMove}
onResponderTerminate={panHandlers->PanResponder.onResponderTerminate}
onResponderStart={panHandlers->PanResponder.onResponderStart}
onResponderTerminationRequest={
  panHandlers->PanResponder.onResponderTerminationRequest
}
onResponderEnd={panHandlers->PanResponder.onResponderEnd}

Then, the custom PanResponder can be used as below:

open ReactNative
open Style

let windowHeight = Dimensions.get(#window).height
let windowWidth = Dimensions.get(#window).width

let containerStyle = s({
  width: windowWidth->dp,
  height: windowHeight->dp,
  justifyContent: #center,
  alignItems: #center,
})

let panResponder = PanResponder.create({
  onMoveShouldSetPanResponder: (_e, _g) => true,
  onPanResponderRelease: (_e, g) =>
    if g.dx > 0. {
      Console.warn("You swiped right")
    } else {
      Console.warn("You swiped left")
    },
})

let panHandlers = panResponder->PanResponder.panHandlers

@react.component
let make = () =>
  <View
    style=containerStyle
    onMoveShouldSetResponder={panHandlers->PanResponder.onMoveShouldSetResponder}
    onMoveShouldSetResponderCapture={panHandlers->PanResponder.onMoveShouldSetResponderCapture}
    onStartShouldSetResponder={panHandlers->PanResponder.onStartShouldSetResponder}
    onStartShouldSetResponderCapture={panHandlers->PanResponder.onStartShouldSetResponderCapture}
    onResponderReject={panHandlers->PanResponder.onResponderReject}
    onResponderGrant={panHandlers->PanResponder.onResponderGrant}
    onResponderRelease={panHandlers->PanResponder.onResponderRelease}
    onResponderMove={panHandlers->PanResponder.onResponderMove}
    onResponderTerminate={panHandlers->PanResponder.onResponderTerminate}
    onResponderStart={panHandlers->PanResponder.onResponderStart}
    onResponderTerminationRequest={panHandlers->PanResponder.onResponderTerminationRequest}
    onResponderEnd={panHandlers->PanResponder.onResponderEnd}>
    <Text> {"Please swipe"->React.string} </Text>
  </View>