React Native Modalfy
v3.x
v3.x
  • Getting started
  • Installation
  • ๐Ÿค“Guides
    • Creating a stack
    • Opening & closing
    • Passing params
    • Triggering a callback
    • Type checking with TypeScript
    • Subscribing to events
    • Using outside React
    • Upgrading from v2.x
  • ๐Ÿ“šAPI Reference
    • Types
      • ModalStackConfig
      • ModalOptions
      • ModalProp
      • ModalComponentProp
      • ModalProps
      • ModalComponentWithOptions
    • ModalProvider
    • createModalStack
    • useModal
    • withModal
    • modalfy
  • ๐Ÿ“ฐBlog
    • Unveiling Modalfy v3
    • Announcing Modalfy v2
    • Stacks on stacks in React Native
    • Introducing a Modal Citizen
  • ๐Ÿ—ƒ๏ธOthers
    • Help
    • Contributing
    • Changelog
    • GitHub
Powered by GitBook
On this page

Was this helpful?

  1. API Reference

createModalStack

PreviousModalProviderNextuseModal

Last updated 9 months ago

Was this helpful?

createModalStack() is the function that's going to turn your configuration into a usable modal stack.

const createModalStack = (
  config: ModalStackConfig,
  customDefaultOptions?: ModalOptions
) => ModalStack

Example:

./App.js
import { Dimensions } from 'react-native'
import { PokedexEntryModal } from './modals/PokedexEntryModal'

const { height } = Dimensions.get('screen')

createModalStack({ PokedexEntryModal }, {
  animateInConfig: {
    easing: Easing.inOut(Easing.exp),
    duration: 900,
  },
  animateOutConfig: {
    easing: Easing.inOut(Easing.exp),
    duration: 900,
  },
  backdropOpacity: 0.9,
  backropColor: 'deeppink',
  backBehavior: 'clear',
  position: 'bottom',
  containerStyle: {
    backgroundColor: 'rebeccapurple',
  },
  transitionOptions: animatedValue => ({
    transform: [
      {
        translateY: animatedValue.interpolate({
          inputRange: [0, 1, 2],
          outputRange: [height, 0, height],
        }),
      },
      {
        scale: animatedValue.interpolate({
          inputRange: [0, 1, 2],
          outputRange: [0, 1, 0.9],
        }),
      },
    ],
  }),
},
)

Argument: config - Modal stack configuration.

Argument: customDefaultOptions - Configuration options to apply to all modals by default (optional).

Returns: Modal stack configuration object to provide to 's stack prop.

๐Ÿ“š
ModalStackConfig
ModalOptions
<ModalProvider/>
react-native-modalfy/createModalStack.ts at main ยท colorfy-software/react-native-modalfyGitHub
Logo