[Feature Request/Bug] Back button handling

[deniz-blue]

I've tried to use BackHandler from react-native myself both outside and inside the ModalBottomSheet (nativeOverlay) but for some reason it can't detect back presses when the sheet is open. The app just exits lol.

Would be nice to have a way to handle it ourselves or have the library handle it by closing the modal

[patrickmichalik]

Hello! Could you provide a minimal reproducible example? BackHandler should work with both regular and nativeOverlay modal sheets; the native overlay forwards the back event to the host activity so consumer handlers can process it.

The request for an onRequestClose-style API is tracked in #65. If the example demonstrates a separate problem with BackHandler forwarding, we can investigate that independently.

[deniz-blue]

Reproduction

It does seem to work when nativeOverlay prop isn't set.

App.tsx:

import { Button, Text, View, BackHandler } from "react-native";
import { ModalBottomSheet, BottomSheetProvider } from "@swmansion/react-native-bottom-sheet";
import { useEffect, useState } from "react";

export default function App() {
	const [index, setIndex] = useState<number>(0);

	useEffect(() => {
		const unsub = BackHandler.addEventListener("hardwareBackPress", () => {
			console.log("Back button pressed");
			setIndex(0);
			return true;
		});
		return () => unsub.remove();
	}, []);

	return (
		<BottomSheetProvider>
			<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
				<Button title="Open Bottom Sheet" onPress={() => setIndex(1)} />
				<ModalBottomSheet
					index={index}
					onIndexChange={setIndex}
					nativeOverlay
					surface={
						<View
							style={{
								flex: 1,
								backgroundColor: "white",
							}}
						/>
					}
				>
					<View>
						<Text style={{ margin: 60 }}>Bottom Sheet Content</Text>
					</View>
				</ModalBottomSheet>
			</View>
		</BottomSheetProvider>
	);
}

[patrickmichalik]

Thanks for the example. This is a bug in the nativeOverlay back-event forwarding on Android 15 and earlier: It bypasses React Native’s BackHandler path and falls through to closing the activity. We’ll fix it.