This component provides support for common touch gestures – tapping, double-tapping, long-pressing, panning, and pinching. It also handles common mouse-based gestures including double clicking and scroll wheel input.

Information about pending gestures is returned through event handlers. A caller can specify which gestures they are interested in by specifying those event handlers. For example, if you are interested in double taps and horizontal pans, provide an onDoubleTap and onPanHorizontal handler.


// Alternate text for screen readers.
accessibilityLabel: string = undefined;

// Traits used to hint screen readers, etc.
accessibilityTraits: AccessibilityTrait | AccessibilityTrait[] = undefined;

// Expose the element and/or its children as accessible to Screen readers
importantForAccessibility?: ImportantForAccessibility =

// Gestures and attributes that apply only to touch inputs
onPinchZoom: (gestureState: MultiTouchGestureState) => void = undefined;
onRotate: (gestureState: MultiTouchGestureState) => void = undefined;

// Gestures and attributes that apply only to mouse inputs
onScrollWheel: (gestureState: ScrollWheelGestureState) => void = undefined;
mouseOverCursor: GestureMouseCursor = undefined;

// Gestures and attributes that apply to either touch or mouse inputs
onPan: (gestureState: PanGestureState) => void = undefined;
onPanVertical: (gestureState: PanGestureState) => void = undefined;
onPanHorizontal: (gestureState: PanGestureState) => void = undefined;
onTap: (gestureState: TapGestureState) => void = undefined;
onDoubleTap: (gestureState: TapGestureState) => void = undefined;
onContextMenu: (gestureState: TapGestureState) => void = undefined;
onLongPress: (gestureState: TapGestureState) => void = undefined;

// Focus Events
onFocus: (e: FocusEvent) => void = undefined;
onBlur: (e: FocusEvent) => void = undefined;

// Keyboard Events
onKeyPress: (e: KeyboardEvent) => void = undefined;

// We can set vertical or horizontal as preferred
preferredPan: PreferredPanGesture = undefined; // Horizontal or vertical

// How many pixels (in either horizontal or vertical direction) until
// pan is recognized? Default is 10. Can be any value > 0.
panPixelThreshold: number = undefined;

// Something else wants to become responder. Should this view
// release the responder? Setting true allows release.
releaseOnRequest: boolean = false;

// ID that can be used to identify the instantiated element for testing purposes.
testId: string = undefined;


Flexbox Styles

View Styles

Transform Styles


// Sets the accessibility focus to the component.
focus(): void;