React Native Modalfy

The ModalOptions interface defines how a modal is rendered and animated. You can use these options globally in your stack configuration or locally on specific modal components.

Key properties include:

• animateInConfig / animateOutConfig: Configuration for Animated.timing() (e.g., { duration: 450, easing: Easing.inOut(Easing.exp) }).
• animationIn / animationOut: Custom animation functions. animationOut must call the provided callback when the animation finishes.
• backBehavior: Determines behavior for backdrop presses or Android back button. Options: 'pop', 'clear', or 'none' (default: 'pop').
• backdropColor / backdropOpacity / backdropPosition: Controls the appearance and placement of the stack backdrop.
• position: Vertical positioning of the modal. Options: 'center', 'top', or 'bottom' (default: 'center').
• transitionOptions: A function that returns a style object using an Animated.Value for interpolations.
• pointerEventsBehavior: Controls touch response. Options: 'auto', 'none', 'current-modal-only', or 'current-modal-none' (default: 'auto').

// Example of custom animationIn
const animationIn = (modalAnimatedValue, modalToValue, callback) => {
  Animated.timing(modalAnimatedValue, {
    toValue: modalToValue,
    duration: 300,
    easing: Easing.inOut(Easing.exp),
    useNativeDriver: true,
  }).start(() => callback?.());
};

When using react-native-modalfy in a monorepo or an example project structure, you may need to configure metro.config.js to prevent multiple versions of peer dependencies from being loaded. This is achieved by:

1. Adding the root node_modules paths for peer dependencies to the resolver.blacklistRE (or resolver.blockList in newer Metro versions) to prevent Metro from watching/loading them from the root.
2. Using resolver.extraNodeModules to alias those same peer dependencies to the specific versions located within the local example/node_modules folder.

This ensures that only one version of each peer dependency is active in the bundler.

const path = require('path')
const exclusionList = require('metro-config/src/defaults/exclusionList')
const escape = require('escape-string-regexp')
const pak = require('../package.json')

const root = path.resolve(__dirname, '..')

const modules = Object.keys({
  ...pak.peerDependencies,
})

module.exports = {
  projectRoot: __dirname,
  watchFolders: [root],

  resolver: {
    // Exclude peer dependencies from the root node_modules
    blacklistRE: exclusionList(modules.map(m => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`))),

    // Alias peer dependencies to the local example/node_modules
    extraNodeModules: modules.reduce((acc, name) => {
      acc[name] = path.join(__dirname, 'node_modules', name)
      return acc
    }, {}),
  },

  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
}