react-native-ls-modals-controller
TypeScript icon, indicating that this package has built-in type declarations

1.1.4 • Public • Published

react-native-ls-modals-controller

Codacy Badge npm version Node.js Package

A React Native library to control multiple modals as a queue or a stack and avois some errors, specially on iOS

Install

npm i react-native-ls-modals-controller

or

yarn add react-native-ls-modals-controller

Usage

  1. Wrap your app content with the ModalQueueProvider or ModalStackProvider
import { ModalQueueProvider, ModalStackProvider } from 'react-native-ls-modals-controller'

export default App = () => {
    return (
        <ModalQueueProvider>
            <ModalStackProvider>
                ...
            </ModalStackProvider>
        </ModalQueueProvider>
    )
}
  • PS: We strongly recomend using just one controller, ModalQueueProvider or ModalStackProvider. Since the state of both are not shared between each other, just use in case you really know how you'll control between the modals in each provider. We are planing to create a better way to manage that in the future.
  1. Create a ModalQueue or a ModalStack and add some ModalQueueItem or ModalStackItem childs as you want
const defaultModalProps = { animationType: 'slide' }

<ModalQueue>
    <ModalQueueItem id={1} component={...} {...defaultModalProps} />
    <ModalQueueItem id={2} component={...} {...defaultModalProps} />
    <ModalQueueItem id={3} component={...} {...defaultModalProps} />
    ...
</ModalQueue>

<ModalStack>
    <ModalStackItem id={1} component={...} {...defaultModalProps} />
    <ModalStackItem id={2} component={...} {...defaultModalProps} />
    <ModalStackItem id={3} component={...} {...defaultModalProps} />
    ...
</ModalStack>
  1. Use the useModalQueue or useModalStack hooks to have access for state and methods
    const { state, currentId, enqueue, dequeue, clear } = useModalQueue()
    ...
    
    const { state, currentId, add, remove, clear } = useModalStack()
    ...

Types

type ModalControllerState = {
    queue: Array<number | string>
}

type ModalControllerContextProps = {
    state: ModalControllerState
    setState: React.Dispatch<React.SetStateAction<ModalControllerState>>
}

type ModalQueueItemProps = ModalProps & {
    id: number | string
    component: React.ReactNode
    timeoutThreshold?: number
}

type ModalStackItemProps = ModalProps & {
    id: number | string
    component: React.ReactNode
    timeoutThreshold?: number
}

type ModalQueueProps = {
    timeoutThreshold?: number
    children:
        | React.ReactElement<ModalQueueItemProps>[]
        | React.ReactElement<ModalQueueItemProps>
}

type ModalStackProps = {
    timeoutThreshold?: number
    children:
        | React.ReactElement<ModalStackItemProps>[]
        | React.ReactElement<ModalStackItemProps>
}

Package Sidebar

Install

npm i react-native-ls-modals-controller

Weekly Downloads

1

Version

1.1.4

License

MIT

Unpacked Size

17.5 kB

Total Files

35

Last publish

Collaborators

  • leandrosimoes