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`

t is the abstract type for a PanResponder, which can be created by means of the create method, given a config object

`config`

config is the abstract type for a custom PanResponder configuration; it can be created by means of the config constructor

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=?,
    unit
  ) => config

`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 the ReasonML JSX 3 syntax, 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;

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

let containerStyle =
  Style.(
    style(
      ~width=windowWidth->dp,
      ~height=windowHeight->dp,
      ~justifyContent=`center,
      ~alignItems=`center,
      (),
    )
  );

let config =
  PanResponder.config(
    ~onMoveShouldSetPanResponder=(_e, _g) => true,
    ~onPanResponderRelease=
      (_e, g) =>
        g##dx > 0.
          ? "You swiped right"->Js.Console.warn
          : "You swiped left"->Js.Console.warn,
    (),
  );

let panResponder = PanResponder.create(config);

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>;
};