The ElasticCard preset creates a screen that can be dragged with elastic resistance in any direction, featuring a dynamic backdrop overlay that darkens the previous screen.
Function Signature ElasticCard ( config ?: Partial < ScreenTransitionConfig > & { elasticFactor? : number ; } ): ScreenTransitionConfig
Parameters config
object
default: "{ elasticFactor: 0.5 }"
Configuration object with optional elasticFactor Multiplier for maximum elastic drag distance (0-1). Higher values allow more drag.
0.5 = Can drag up to 50% of screen dimension0.3 = Can drag up to 30% of screen dimension (more resistance)0.7 = Can drag up to 70% of screen dimension (less resistance) ...other
Partial<ScreenTransitionConfig>
Any other screen transition config properties to override
Returns Configuration object with bidirectional gesture and backdrop settings Enables custom transitions
Enables elastic drag gesture
gestureDirection
string
default: "bidirectional"
Allows dragging in any direction
Interpolates scale, translation, and backdrop based on gesture and progress
Spring configuration for animations
Implementation Details Screen Style Interpolator The preset combines scale, elastic translation, and backdrop overlay:
screenStyleInterpolator : ({ current , next , layouts: { screen }, progress , }) => { "worklet" ; // Applies to both screens (previous and incoming) const scale = interpolate ( progress , [ 0 , 1 , 2 ], [ 0 , 1 , 0.8 ]); // Applies to current screen - elastic drag effect const maxElasticityX = screen . width * ( config . elasticFactor ?? 0.5 ); const maxElasticityY = screen . height * ( config . elasticFactor ?? 0.5 ); const translateX = interpolate ( current . gesture . normalizedX , [ - 1 , 0 , 1 ], [ - maxElasticityX , 0 , maxElasticityX ], "clamp" , ); const translateY = interpolate ( current . gesture . normalizedY , [ - 1 , 0 , 1 ], [ - maxElasticityY , 0 , maxElasticityY ], "clamp" , ); // Applies to unfocused screen (previous screen) - backdrop overlay const overlayColor = interpolateColor ( progress , [ 0 , 1 ], [ "rgba(0,0,0,0)" , "rgba(0,0,0,0.5)" ], ); return { contentStyle: { transform: [{ scale }, { translateX }, { translateY }], }, backdropStyle: { backgroundColor: ! next ? overlayColor : "rgba(0,0,0,0)" , }, }; }
Animation behavior:
progress = 0: Screen is scaled to 0 (invisible)progress = 1: Screen is at normal size with backdrop at 50% opacityprogress = 2: Screen scales to 80% as it exitsElastic drag distance is configurable via elasticFactor
Backdrop only appears when there’s no next screen (top of stack)
Transition Spec transitionSpec : { open : { stiffness : 1000 , damping : 500 , mass : 3 , overshootClamping : true , restSpeedThreshold : 0.02 , }, close : { stiffness : 1000 , damping : 500 , mass : 3 , overshootClamping : true , restSpeedThreshold : 0.02 , }, }
Usage Examples Basic Usage
Custom Elasticity
Vertical Only
Custom Backdrop
import Transition from "react-native-screen-transitions" ; < Stack.Screen name = "Card" options = { { ... Transition . Presets . ElasticCard (), } } />
Common Use Cases
iOS-style modals - Elastic feel similar to native iOS sheetsPreview overlays - Quick-look screens with natural drag behaviorSettings panels - Configuration screens with satisfying feedbackDetail views - Product or profile screens with playful interactionPhoto viewers - Image screens with natural drag-to-dismiss
Elastic Behavior Explained The elastic effect means the screen resists being dragged but still follows the gesture:
// With elasticFactor: 0.5 // If screen width is 400px: // - Maximum drag distance = 400 * 0.5 = 200px // - Gesture normalizedX of 1.0 = 200px translation // - Gesture normalizedX of 0.5 = 100px translation // With elasticFactor: 0.3 (more resistance) // - Maximum drag distance = 400 * 0.3 = 120px // - Same gesture feels "stiffer"
Backdrop Behavior The backdrop darkens the previous screen as the new screen appears:
Only visible when screen is on top of stack (!next condition)
Fades from transparent to 50% black overlay
Creates depth perception in the stack
Can be customized with different colors/opacity
Notes The elasticFactor only affects gesture-driven drag, not the enter/exit animation. The scale animation is always tied to the progress value.
For a native iOS feel, use elasticFactor: 0.4 to 0.5. For a more playful, exaggerated effect, use 0.6 to 0.8.
The bidirectional gesture may conflict with horizontal scrolling. Use Transition.ScrollView for proper gesture coordination with scrollable content.
