Find Similar Packages for react-native-modalbox
Search packages..
1 Year
react-native-modalboxSimilar Packages:
Package Weekly Downloads Trend
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
react-native-modalbox12,7572,91121.4 kB161-MIT
Similar Npm Packages to react-native-modalbox

react-native-modalbox is a popular library for creating modal dialogs in React Native applications. It provides a simple and customizable way to display modals, allowing developers to enhance user experience by presenting important information or options without navigating away from the current screen. With features like animations, customizable styles, and various modal types, react-native-modalbox is a versatile choice for handling modals in mobile applications. However, there are several alternatives that also offer modal functionality in React Native:

  • react-native-modal is a highly customizable modal component for React Native that provides a more flexible approach to creating modals. It supports various features such as swipe gestures, backdrop customization, and animations, making it suitable for a wide range of use cases. If you need a modal that can be easily styled and configured, react-native-modal is a great option. Its extensive documentation and community support also make it a reliable choice for developers looking to implement modals in their applications.
  • react-native-modal-datetime-picker is a specialized modal component designed specifically for selecting dates and times in React Native applications. It combines the functionality of a modal with a date and time picker, providing a user-friendly interface for selecting dates and times. If your application requires date and time selection, this library is a perfect fit. It offers a seamless experience for users while maintaining the look and feel of a native modal.

To see how these libraries compare, check out the comparison: Comparing react-native-modal vs react-native-modal-datetime-picker vs react-native-modalbox.

README for react-native-modalbox

react-native-modalbox

npm npm

A react native component, easy, fully customizable, implementing the 'swipe down to close' feature.

Wanna implement IAP in your beautiful modal? 👇

IAPHUB

Preview

Install

npm install react-native-modalbox@latest --save

Example

Check index.js in the Example folder.

Version note

| react-native | react-native-modalbox | | :------------ |:---------------:| | <= 0.57 | <= 1.6.0 | | >= 0.58 | >= 1.6.1 |

Properties

| Prop | Default | Type | Description | | :------------ |:---------------:| :---------------:| :-----| | isOpen | false | bool | Open/close the modal, optional, you can use the open/close methods instead | | isDisabled | false | bool | Disable any action on the modal (open, close, swipe) | | backdropPressToClose | true | bool | Close the the modal by pressing on the backdrop | | swipeToClose | true | bool | Set to true to enable the swipe down to close feature | | swipeThreshold | 50 | number | The threshold to reach in pixels to close the modal | | swipeArea | - | number | The height in pixels of the swipeable area, window height by default | | position | center | string | Control the modal position using top or center or bottom | | entry | bottom | string | Control the modal entry position top or bottom | | backdrop | true | bool | Display a backdrop behind the modal | | backdropOpacity | 0.5| number | Opacity of the backdrop | | backdropColor | black| string | backgroundColor of the backdrop | | backdropContent | null| ReactElement | Add an element in the backdrop (a close button for example) | | animationDuration | 400| number | Duration of the animation | | easing | Easing.elastic(0.8) | function | Easing function applied to opening modal animation | | backButtonClose | false | bool | (Android only) Close modal when receiving back button event | | startOpen | false | bool | Allow modal to appear open without animation upon first mount | | coverScreen | false | bool | Will use RN Modal component to cover the entire screen wherever the modal is mounted in the component hierarchy | | keyboardTopOffset | ios:22, android:0 | number | This property prevent the modal to cover the ios status bar when the modal is scrolling up because the keyboard is opening | | useNativeDriver | true | bool | Enables the hardware acceleration to animate the modal. Please note that enabling this can cause some flashes in a weird way when animating |

Events

| Prop | Params | Description | | :------------ |:---------------:| :---------------:| | onClosed | - | When the modal is close and the animation is done | | onOpened | - | When the modal is open and the animation is done | | onClosingState | state bool | When the state of the swipe to close feature has changed (usefull to change the content of the modal, display a message for example) |

Methods

These methods are optional, you can use the isOpen property instead

| Prop | Params | Description | | :------------ |:---------------:| :---------------:| | open | - | Open the modal | | close | - | Close the modal |

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc or npmjs.com, the official website for the npm registry. Please note that npm is a registered trademark of npm, Inc. For more details, please refer to our Terms & Privacy.