react-native-little-modal

1.0.10 • Public • Published

react-native-little-modal npm version


Features

  1. Pure javascript solution, easy to install.
  2. Both android and ios platform you can use.
  3. Like the antd modal and you can create multiple modals.

Install

npm install react-native-little-modal

Usage

import Modal from 'react-native-little-modal';
Modal.open({
    animationType: "slide",
    maskClosable: true,
    contentWrapperStyle: {
      paddingBottom: 0,
    }
}, <CustomView />)
Modal.hide()

or

Modal.alert("title", "text", [
    {
        text: "confirm",
        onPress: () => {},
        style: {color: "#333"}
    },
    {
        text: "cancel"
    }
])

Available props

Modal.open(options, content)

  • options
Name Type Default Description
animationType "slide" or "fade" or "node" "none" Modal show animation
maskClosable Boolean false Close the modal when maskClosable is true
contentWrapperStyle Style Extra style for content wrapper
modalKey String "react-native-little-modal" A special key for the modal and you need to hide with this key
onModalClose Function Callback when the modal will be closed
backgroundColor "black" or "transparent" black Background color for modal
useRNModal Boolean android: true, ios: false warning: use it when you want to create top view, but on ios cannot create mutiple react native modals!
  • content - any react element

Modal.alert(title, text, btns, modalKey?: string)

Name Type Default Description
title String or React.element "" title
text String or React.element "" text
btns {text: string, onPress?: () => void, style?: TextStyle}[] buttons
modalKey String "react-native-little-modal" modal key

Modal.hide(modalKey?: string)

  • modalKey default value is "react-native-little-modal"

Modal.removeAll()

  • remove all modal elements

Warning

  • On ios platform (if you don't use "useRNModal"), modal element created by this library can`t cover other native Modal elements,like: Official Modal Element
  • When you set useRNModal = true on ios platform, DO NOT CREATE MUTIPLE MODALS ON IOS PLATFORM at the same time, or the app will crash because of a react-native bug! 🙃

Package Sidebar

Install

npm i react-native-little-modal

Weekly Downloads

1

Version

1.0.10

License

MIT

Unpacked Size

25.5 kB

Total Files

8

Last publish

Collaborators

  • fangrm