Android Predictive Back Gesture

Android 14 introduced Predictive Back, allowing users to preview where they will navigate before the back action is committed. Unlike the traditional back gesture, Predictive Back provides real-time gesture progress so applications can animate their UI while the user is dragging. React Native currently doesn’t expose these native progress callbacks, making it impossible to reproduce Material Design’s Predictive Back animation using JavaScript alone. This implementation bridges Android’s native back dispatcher into React Native and recreates the Predictive Back experience using Reanimated, Gesture Handler, and React Navigation.

Preview

Features

Native Android Support

Uses Android’s native OnBackPressedDispatcher to receive Predictive Back events.

Android 14 Progress

Supports live gesture progress on Android 14 and newer.

Older Android Support

Falls back to a smooth timed animation on Android 13 and below.

React Navigation

Works seamlessly with React Navigation.

Gesture Cancellation

Cancelling the gesture restores the screen exactly where it started.

Material Animation

Matches Google’s Material Design Predictive Back animation.

Back To Home

Preserves Android’s native Home animation on the root screen.

Haptic Feedback

Optional haptic feedback when the back gesture commits.

Demo

How It Works

The complete flow looks like this.

Finger
  │
  ▼
Android Predictive Back Gesture
  │
  ▼
OnBackPressedDispatcher
  │
  ▼
PredictiveBackModule.kt
  │
  ▼
React Native Bridge
  │
  ▼
PredictiveBack.js
  │
  ▼
SwipeableScreen
  │
  ▼
Reanimated Animation
  │
  ▼
React Navigation

The native module continuously sends gesture progress to React Native. SwipeableScreen consumes those events and updates the animation entirely on the UI thread using Reanimated.

Architecture

Android OS
    │
    ▼
OnBackPressedDispatcher
    │
    ▼
PredictiveBackModule.kt
    │
    ▼
PredictiveBackPackage.kt
    │
    ▼
NativeEventEmitter
    │
    ▼
PredictiveBack.js
    │
    ▼
SwipeableScreen.jsx
    │
    ▼
React Navigation

Compatibility

Android Version	Live Progress	Supported
Android 10	❌	✅
Android 11	❌	✅
Android 12	❌	✅
Android 13	❌	✅
Android 14	✅	✅
Android 15	✅	✅
Android 16	✅	✅

Files

File	Purpose
PredictiveBackModule.kt	Native Android bridge
PredictiveBackPackage.kt	Registers native module
PredictiveBack.js	JavaScript bridge
SwipeableScreen.jsx	Handles animation
AppNavigator.jsx	Navigation integration

Installation

Requirements

Dependency	Version
React Native	0.72+
React Navigation	6+
Reanimated	3+
Gesture Handler	2+

Android Dependency

Add the Activity library.

implementation("androidx.activity:activity-ktx:1.9.3")

Android Manifest

Enable Predictive Back inside your application.

<application
    android:enableOnBackInvokedCallback="true">

Without this flag Android never sends Predictive Back events.

Register Native Package

Inside MainApplication.kt

add(PredictiveBackPackage())

Explore the Source

View on GitHub

Browse the complete source code, native implementation, and React Native integration.

Get Started with NPM

Install the package from NPM and explore its native Android implementation and React Native integration.

​Android Predictive Back Gesture

​Preview

​Features

Native Android Support

Android 14 Progress

Older Android Support

React Navigation

Gesture Cancellation

Material Animation

Back To Home

Haptic Feedback

​Demo

​How It Works

​Architecture

​Compatibility

​Files

​Installation

​Requirements

​Android Dependency

​Android Manifest

​Register Native Package

​Explore the Source