Comparing Gesture Handling, Modals, and Bottom Sheets in React Native

When building polished React Native apps, you often need more than basic buttons and views. Presenting overlays, capturing gestures, and animating transitions are common requirements. The packages react-native-gesture-handler, react-native-modal, and react-native-raw-bottom-sheet each solve different parts of this puzzle. Let’s break down their roles, capabilities, and trade-offs.

🖐️ Core Purpose: What Problem Does Each Solve?

react-native-gesture-handler is not a UI component — it’s a gesture engine. It gives you access to native gesture recognizers (like pan, pinch, and tap) that run off the main JavaScript thread, enabling buttery-smooth interactions even during heavy UI work. It’s the backbone for libraries like React Navigation’s swipe gestures and Reanimated-driven animations.

// react-native-gesture-handler: Pan gesture example
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';

function DraggableBox() {
  const offsetX = useSharedValue(0);
  const offsetY = useSharedValue(0);

  const panGesture = Gesture.Pan()
    .onChange((event) => {
      offsetX.value += event.changeX;
      offsetY.value += event.changeY;
    });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: offsetX.value }, { translateY: offsetY.value }]
  }));

  return (
    <GestureDetector gesture={panGesture}>
      <Animated.View style={[{ width: 100, height: 100, backgroundColor: 'blue' }, animatedStyle]} />
    </GestureDetector>
  );
}

react-native-modal is a drop-in replacement for React Native’s built-in Modal, but with better defaults and more customization. It handles backdrop taps, hardware back button (Android), and cross-platform animations out of the box.

// react-native-modal: Basic usage
import Modal from 'react-native-modal';

function ConfirmationModal({ isVisible, onConfirm, onCancel }) {
  return (
    <Modal isVisible={isVisible} onBackdropPress={onCancel}>
      <View style={{ padding: 20, backgroundColor: 'white', borderRadius: 10 }}>
        <Text>Are you sure?</Text>
        <Button title="Yes" onPress={onConfirm} />
        <Button title="No" onPress={onCancel} />
      </View>
    </Modal>
  );
}

react-native-raw-bottom-sheet provides a minimal bottom sheet component that slides up from the bottom. It supports basic snapping and gesture dismissal but lacks advanced features found in more mature alternatives.

// react-native-raw-bottom-sheet: Simple bottom sheet
import BottomSheet from 'react-native-raw-bottom-sheet';

function ActionSheet({ ref }) {
  return (
    <BottomSheet ref={ref}>
      <View style={{ padding: 20 }}>
        <Text>Choose an option</Text>
        <Button title="Option 1" />
        <Button title="Option 2" />
      </View>
    </BottomSheet>
  );
}

// Usage elsewhere:
// sheetRef.current.open();

⚙️ Integration Requirements and Dependencies

react-native-gesture-handler requires native linking (automatic via autolink in modern React Native) and must wrap your app root with GestureHandlerRootView on Android for proper behavior.

// App.js – required setup
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* Rest of your app */}
    </GestureHandlerRootView>
  );
}

react-native-modal is pure JavaScript and has no native dependencies. It works immediately after installation and doesn’t require special setup beyond importing and using it.

react-native-raw-bottom-sheet also has no native dependencies, but it internally uses react-native-gesture-handler for its swipe-to-dismiss feature. This means you still need to install and configure react-native-gesture-handler even if you don’t use it directly elsewhere.

🎯 Use Case Alignment: When to Reach for Which?

Scenario 1: Building a Swipeable List Item

You want rows that can be swiped left to reveal delete/archive actions.

• ✅ Best choice: react-native-gesture-handler
• Why? You need precise control over pan gestures, velocity tracking, and spring-back animations. Libraries like react-native-swipe-list-view are built on top of it.

// Simplified swipeable item using RNGH
const translateX = useSharedValue(0);

const pan = Gesture.Pan()
  .onUpdate((e) => {
    translateX.value = Math.max(-100, Math.min(0, e.translationX));
  })
  .onEnd((e) => {
    if (e.velocityX < -1000 || translateX.value < -50) {
      // Snap open
      translateX.value = withSpring(-100);
    } else {
      // Snap closed
      translateX.value = withSpring(0);
    }
  });

Scenario 2: Showing a Login Prompt Over Current Screen

You need a centered modal with fade-in animation and backdrop dimming.

• ✅ Best choice: react-native-modal
• Why? It handles visibility state, backdrop press, and platform-specific quirks (like status bar on iOS) automatically.

<Modal
  isVisible={showLogin}
  animationIn="fadeIn"
  animationOut="fadeOut"
  backdropOpacity={0.6}
  onBackdropPress={() => setShowLogin(false)}
>
  <LoginForm />
</Modal>

Scenario 3: Displaying a Share Menu from Bottom

You want a panel that slides up with sharing options (email, SMS, etc.).

• ⚠️ Not ideal: react-native-raw-bottom-sheet
• Why? While it technically works, the package hasn’t seen active maintenance, lacks accessibility support, and doesn’t handle keyboard avoidance or nested scroll views well. Consider @gorhom/react-native-bottom-sheet instead.

🛑 Maintenance and Production Readiness

As of the latest review:

• react-native-gesture-handler is actively maintained by Software Mansion and is a de facto standard in the React Native ecosystem. It’s used in production by thousands of apps.
• react-native-modal is stable, widely adopted, and receives periodic updates. It’s safe for production use.
• react-native-raw-bottom-sheet shows signs of abandonment: the last npm publish was years ago, GitHub issues are unaddressed, and it lacks compatibility with newer React Native versions. Avoid in new projects.

🔁 Composability: Can They Work Together?

Yes — and often they should. For example, you might use react-native-modal to present a form, and inside that form, use react-native-gesture-handler to build a custom slider or draggable element. Similarly, a well-maintained bottom sheet library (not raw-bottom-sheet) would rely on react-native-gesture-handler under the hood.

However, react-native-raw-bottom-sheet already bundles its own gesture logic, so layering additional gesture handlers inside it may lead to conflicts or unexpected behavior.

📊 Summary Table

💡 Final Recommendation

• For gestures and animations: Always start with react-native-gesture-handler. It’s foundational.
• For modals: react-native-modal is the go-to for simple, reliable overlays.
• For bottom sheets: Skip react-native-raw-bottom-sheet. Instead, evaluate actively maintained alternatives like @gorhom/react-native-bottom-sheet, which offers better performance, accessibility, and feature completeness.

Don’t treat these as interchangeable — they solve different layers of the UI interaction stack. Use them together where appropriate, but always verify maintenance status before committing to a dependency in production.