Props Reference

`Interactable.View` Props

`snapPoints` (array of points)

snapPoints={[{x: 0}, {x: -200}]}

A list of points the view will snap to after being dragged by the user. To implement a a drawer for example, provide 2 points - one for the open state and one for the closed state. Points are relative to the view's center (after initial layout). Every element in the array is an object with the following properties:

x - The horizontal position (relative to the center). Optional if a single dimension is needed.
y - The vertical position (relative to the center). Optional if a single dimension is needed.
damping - Amount of damping on the spring connected to this point. Default is 0.7.
tension - Tension of the spring connected to this point. Default is 300.
id - An optional string name for the point to identify it in the onSnap event.

Examples for chat heads, drawer and swipeable card.

`springPoints` (array of points)

springPoints={[{x: 0, tension: 6000, damping: 0.5, influenceArea: {left: 0}}]}

Connect the view's center to a group of constant springs. Every element in the array is an object with the following properties:

x - The horizontal anchor position of the spring (relative to the center). Default is 0.0.
y - The vertical anchor position of the spring (relative to the center). Default is 0.0.
tension - Tension of the spring. Default is 300.
damping - Amount of damping on the spring. Default is 0.0.
influenceArea - Limit the spring influence to a specific area. Optional. An object with the following properties:
- left - The minimum horizontal influence point (relative to the center). Optional.
- right - The maximum horizontal influence point (relative to the center). Optional.
- top - The minimum vertical influence point (relative to the center). Optional.
- bottom - The maximum vertical influence point (relative to the center). Optional.
haptics - Whether to enable haptic feedback on springs with influence area. Default false.

Note: For the springs to affect the view while dragging, make sure dragging is performed via a spring using the dragWithSpring prop.

`gravityPoints` (array of points)

gravityPoints={[{x: 0, y: 0, strength: 8000, falloff: 40, damping: 0.5}]}

Attract/repel the view's center with a group of constant gravity wells. Every element in the array is an object with the following properties:

x - The horizontal position of the well (relative to the center). Default is 0.0.
y - The vertical position of the well (relative to the center). Default is 0.0.
strength - Strength of the field (positive attracts, negative repels). Default is 400.
falloff - Distance of decay for the field strength. Default is 40.
damping - Amount of damping on the field strength. Default is 0.0.
influenceArea - Limit the field influence to a specific area. Optional. An object with the following properties:
- left - The minimum horizontal influence point (relative to the center). Optional.
- right - The maximum horizontal influence point (relative to the center). Optional.
- top - The minimum vertical influence point (relative to the center). Optional.
- bottom - The maximum vertical influence point (relative to the center). Optional.
haptics - Whether to enable haptic feedback on fields with influence area. Default false.

Note: For the gravity to affect the view while dragging, make sure dragging is performed via a spring using the dragWithSpring prop.

`frictionAreas` (array of areas)

frictionAreas={[{damping: 0.5, influenceArea: {top: 0}}]}

Add friction to the view's movement with a group of friction regions. Every element in the array is an object with the following properties:

damping - Amount of friction (0.0-1.0). Default is 0.0.
influenceArea - Limit the friction influence to a specific area. Optional. An object with the following properties:
- left - The minimum horizontal influence point (relative to the center). Optional.
- right - The maximum horizontal influence point (relative to the center). Optional.
- top - The minimum vertical influence point (relative to the center). Optional.
- bottom - The maximum vertical influence point (relative to the center). Optional.
haptics - Whether to enable haptic feedback on regions with influence area. Default false.

Note: For the friction to affect the view while dragging, make sure dragging is performed via a spring using the dragWithSpring prop.

`alertAreas` (array of areas)

alertAreas={[{id: 'myArea', influenceArea: {top: 0}}]}

Send alert event when the view's center enters/leaves any region within the group. Every element in the array is an object with the following properties:

id - A required string name for the area to identify it in the onAlert event.
influenceArea - Limit the alert to a specific area. Optional. An object with the following properties:
- left - The minimum horizontal alert point (relative to the center). Optional.
- right - The maximum horizontal alert point (relative to the center). Optional.
- top - The minimum vertical alert point (relative to the center). Optional.
- bottom - The maximum vertical alert point (relative to the center). Optional.

`horizontalOnly` (boolean)

horizontalOnly={true}

Optional, whether the view should be locked to horizontal movement only. Default false.

`startOnFront` (boolean) [Android Only]

startOnFront

Optional, whether the view should call view.bringToFront() when the view is first loaded. Usually using zIndex does the trick. Use this in cases it doesn't

`verticalOnly` (boolean)

verticalOnly={true}

Optional, whether the view should be locked to vertical movement only. Default false.

`boundaries` (object)

boundaries={{left: -100, right: 100, bounce: 0.5}}

Optional, an object providing limits to movement relative to the view's center (after initial layout). Contains following properties:

left - The minimum horizontal position (relative to the center). Optional.
right - The maximum horizontal position (relative to the center). Optional.
top - The minimum vertical position (relative to the center). Optional.
bottom - The maximum vertical position (relative to the center). Optional.
bounce - The amount of bounce when hitting the limit (0.0-1.0). Optional.
haptics - Whether to enable haptic feedback on bounce. Default false.

`onSnap` (function)

onSnap={this.onDrawerSnap}

Optional, a function called whenever the view finishes snapping to a snapPoints point (after being dragged). Example for drawer. When the function is called, an event object is passed as argument, containing the following properties:

index - The zero-based index of the point in the snapPoints array.
id - The string id of the point in the snapPoints array (assuming it was provided).

`onSnapStart` (function)

onSnapStart={this.onDrawerSnapStart}

Optional, a function called whenever the view starts snapping to a snapPoints point (after being dragged). When the function is called, an event object is passed as argument, containing the following properties:

index - The zero-based index of the point in the snapPoints array.
id - The string id of the point in the snapPoints array (assuming it was provided).

`onStop` (function)

onStop={this.onStopInteraction}

Optional, a function called whenever the interaction stops (views freeze momentarily). When the function is called, an event object is passed as argument, containing the following properties:

x - The horizontal position of the view (relative to the center).
y - The vertical position of the view (relative to the center).

`onDrag` (function)

onDrag={this.onDragEvent}

Optional, a function called whenever the user starts or stops dragging the view. When the function is called, an event object is passed as argument, containing the following properties:

state - start or end, whether the user started or finished dragging.
x - The horizontal position of the view (relative to the center).
y - The vertical position of the view (relative to the center).
targetSnapPointId - For end state, the string id of the target point in the snapPoints array (assuming it was provided).

`onAlert` (function)

onAlert={this.onAlertEvent}

Optional, a function called whenever the view's center enters/leaves an alert area (see alertAreas). When the function is called, an event object is passed as argument, containing the following properties:

key: id - The string name of the area that was entered/left.
value: enter or leave (depending if entering or leaving the area).

`dragEnabled` (boolean)

dragEnabled={true}

Optional, whether the user can drag the view or not. Default true.

`dragWithSpring` (object)

dragWithSpring={{tension: 2000, damping: 0.5}}

Optional, specify in order to make dragging behavior of the view occur using a spring. If not given, drag will be done using a pinned anchor point. Contains following properties:

tension - Tension of the spring.
damping - Amount of damping on the spring used for dragging. Optional.

`dragToss` (number)

dragToss={0.1}

Time in seconds the view is allowed to be tossed before snapping to a point. Default is 0.1.

`animatedValueX` (Animated.Value)

animatedValueX={this._deltaX}

Animated.Value that will contain the delta from the center as the view moves (x axis). See this for more details on how to animate other views according to the movement of this view.

`animatedValueY` (Animated.Value)

animatedValueY={this._deltaY}

Animated.Value that will contain the delta from the center as the view moves (y axis). See this for more details on how to animate other views according to the movement of this view.

`animatedNativeDriver` (boolean)

animatedNativeDriver={false}

Whether integration with Animated should use native driver. Default false since Animated native driver is still a bit experimental. Try it out as eventually the quirks will be resolved and then we'll have a 100% native driver end to end with 60 FPS on derived animations as well.

`initialPosition` (point)

initialPosition={{x: -140, y: -280}}

Optional, used to initialize the view's position to a position different than it's original center. This is mostly useful when you want to provide snapPoints points relative to the center calculated by React Native layout, but want the view itself to start from a different position. See chat heads example.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!