Question 1

How to dismiss a react-native-modal by swiping?

Accepted Answer

Set the swipeDirection prop to a direction like 'down' and use onSwipeComplete to update the isVisible state. Note that useNativeDriver must be false for smooth dragging, as per known issues.

Question 2

react-native-modal vs React Native's built-in Modal: which should I use?

Accepted Answer

Use react-native-modal if you need animations, swipe gestures, or extensive customization. Stick with the built-in Modal for simple, no-frills modals to minimize bundle size and avoid dependency overhead.

Question 3

Why does my react-native-modal flash on Android?

Accepted Answer

This is a known issue with useNativeDriver. Try setting hideModalContentWhileAnimating to true or avoid assigning backgroundColor directly to the Modal component, as mentioned in the FAQ.

Question 4

How to make a modal scrollable in react-native-modal?

Accepted Answer

Use the propagateSwipe prop to allow swipe events to pass to child ScrollViews. You may need to adjust scrollOffset and scrollTo props for finer control, as shown in the example directory.

Question 5

Can I show multiple modals at once with react-native-modal?

Accepted Answer

No, due to React Native's limitations. You must wait for one modal to fully hide using onModalHide before showing another, as multiple modals are not supported simultaneously, per the FAQ.

Question 6

How to customize the backdrop color and opacity?

Accepted Answer

Use the backdropColor and backdropOpacity props directly on the Modal. For instance, set backdropColor='gray' and backdropOpacity={0.5} for a semi-transparent gray backdrop.

react-native-modal

What is react-native-modal?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions