### Define and Register Modals with React Native Modalfy

Source: https://colorfy-software.gitbook.io/react-native-modalfy/index

This snippet demonstrates the initial setup for React Native Modalfy, showing how to define your modal components and register them with the library's provider. This allows modals to be called from anywhere in your application.

```JavaScript
import React from 'react';
import { View, Text, Button } from 'react-native';
import { createModalfy, ModalProvider } from 'react-native-modalfy';

const MyFirstModal = ({ modal: { closeModal } }) => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white' }}>
    <Text>Hello from MyFirstModal!</Text>
    <Button title="Close" onPress={closeModal} />
  </View>
);

const MySecondModal = ({ modal: { closeModal } }) => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'lightgray' }}>
    <Text>This is MySecondModal!</Text>
    <Button title="Close" onPress={closeModal} />
  </View>
);

const modals = {
  MyFirstModal,
  MySecondModal,
};

const modalfy = createModalfy(modals);

export default function App() {
  return (
    <ModalProvider stack={modalfy}>
      {/* Your app content goes here */}
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>App Content</Text>
      </View>
    </ModalProvider>
  );
}
```

--------------------------------

### Install Modalfy and Gesture Handler for Expo Projects

Source: https://colorfy-software.gitbook.io/react-native-modalfy/installation

This command installs both `react-native-modalfy` and its required dependency `react-native-gesture-handler` specifically for Expo managed projects, simplifying the setup process.

```bash
npx expo install react-native-modalfy react-native-gesture-handler
```

--------------------------------

### Install React Native Modalfy for Bare Projects

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/installation

Installs the `react-native-modalfy` package using either Yarn or npm for bare React Native projects. This is the first step before installing `react-native-gesture-handler`.

```Shell
yarn add react-native-modalfy
```

```Shell
npm install --save react-native-modalfy
```

--------------------------------

### Install React Native Modalfy Package

Source: https://colorfy-software.gitbook.io/react-native-modalfy/installation

Instructions for installing the `react-native-modalfy` package using either Yarn or npm for bare React Native projects. This is the first step in setting up the library.

```yarn
yarn add react-native-modalfy
```

```npm
npm install --save react-native-modalfy
```

--------------------------------

### Customize Modal Animations and Transitions in React Native Modalfy

Source: https://colorfy-software.gitbook.io/react-native-modalfy/index

This example illustrates how to apply custom animations and transitions to modals in React Native Modalfy. It shows how to define a custom transition style for a modal, giving developers complete control over the visual presentation.

```JavaScript
import React from 'react';
import { View, Text, Button, Animated, Dimensions } from 'react-native';
import { createModalfy, ModalProvider } from 'react-native-modalfy';

const { height } = Dimensions.get('window');

const BottomSheetModal = ({ modal: { closeModal, animatedValue } }) => {
  const translateY = animatedValue.interpolate({
    inputRange: [0, 1],
    outputRange: [height, 0],
  });

  return (
    <Animated.View
      style={{
        position: 'absolute',
        bottom: 0,
        width: '100%',
        height: height * 0.5,
        backgroundColor: 'white',
        transform: [{ translateY }],
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
        padding: 20,
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <Text>This is a custom animated bottom sheet!</Text>
      <Button title="Close" onPress={closeModal} />
    </Animated.View>
  );
};

const modals = {
  BottomSheetModal: {
    component: BottomSheetModal,
    options: {
      backdropOpacity: 0.5,
      transition: 'bottom',
      // You can also define custom transition functions here
      // transition: (animatedValue) => {
      //   return {
      //     transform: [
      //       {
      //         translateY: animatedValue.interpolate({
      //           inputRange: [0, 1],
      //           outputRange: [height, 0],
      //         }),
      //       },
      //     ],
      //   };
      // },
    },
  },
};

const modalfy = createModalfy(modals);

export default function App() {
  return (
    <ModalProvider stack={modalfy}>
      {/* Your app content */}
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>App Content</Text>
        <Button title="Open Bottom Sheet" onPress={() => modalfy.openModal('BottomSheetModal')} />
      </View>
    </ModalProvider>
  );
}
```

--------------------------------

### Open and Close Modals using React Native Modalfy Hooks

Source: https://colorfy-software.gitbook.io/react-native-modalfy/index

This example illustrates how to programmatically open and close modals using the `useModalfy` hook provided by React Native Modalfy. It shows a basic interaction where a button press triggers a modal to appear.

```JavaScript
import React from 'react';
import { View, Text, Button } from 'react-native';
import { useModalfy } from 'react-native-modalfy';

const HomeScreen = () => {
  const { openModal, closeModal } = useModalfy();

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Welcome to the App!</Text>
      <Button title="Open First Modal" onPress={() => openModal('MyFirstModal')} />
      <Button title="Open Second Modal" onPress={() => openModal('MySecondModal')} />
      <Button title="Close All Modals" onPress={closeModal} />
    </View>
  );
};

// Assuming HomeScreen is rendered within the ModalProvider from the previous snippet
```

--------------------------------

### Install React Native Modalfy and Gesture Handler for Expo

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/installation

Installs both `react-native-modalfy` and its dependency `react-native-gesture-handler` with a single command for Expo managed projects.

```Shell
expo install react-native-modalfy react-native-gesture-handler
```

--------------------------------

### Example Usage of createModalStack in React Native

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/api/createmodalstack

Demonstrates how to use `createModalStack` in a React Native application, configuring a modal stack with a `PokedexEntryModal` and applying extensive custom animation, backdrop, position, and container styling options. This example showcases a practical implementation of the function.

```JavaScript
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],
        }),
      },
    ],
  }),
})
```

--------------------------------

### Example Usage of createModalStack in React Native

Source: https://colorfy-software.gitbook.io/react-native-modalfy/api/createmodalstack

Illustrates how to implement `createModalStack` within a React Native application. This example demonstrates configuring a modal stack with a `PokedexEntryModal` and applying extensive custom default options, including animation configurations, backdrop properties, position, and complex transform transitions using `animatedValue` interpolation.

```JavaScript
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],
        }),
      },
    ],
  }),
},
)
```

--------------------------------

### Stack Multiple Modals in React Native Modalfy

Source: https://colorfy-software.gitbook.io/react-native-modalfy/index

This snippet demonstrates Modalfy's ability to display multiple modals simultaneously, stacking them on top of each other. It shows how to open a second modal while a first one is still active, creating a layered modal experience.

```JavaScript
import React from 'react';
import { View, Text, Button } from 'react-native';
import { useModalfy } from 'react-native-modalfy';

const MyFirstModal = ({ modal: { closeModal, openModal } }) => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white', padding: 20 }}>
    <Text>This is the first modal.</Text>
    <Button title="Open Second Modal" onPress={() => openModal('MySecondModal')} />
    <Button title="Close First Modal" onPress={closeModal} />
  </View>
);

const MySecondModal = ({ modal: { closeModal } }) => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)', padding: 20 }}>
    <Text style={{ color: 'white' }}>This is the second modal, stacked!</Text>
    <Button title="Close Second Modal" onPress={closeModal} />
  </View>
);

// ... (modals and modalfy setup as in Snippet #1)
// Ensure MyFirstModal and MySecondModal are registered in the 'modals' object.
```

--------------------------------

### Example: Integrating ModalProvider in React Native App

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/api/modalprovider

This example demonstrates how to integrate `ModalProvider` into a React Native application. It shows how to import necessary components, define modal configurations, create a modal stack, and wrap the main navigation component with `ModalProvider`. Note that `ModalProvider` wraps its children inside a `View` component.

```React JSX
import React from 'react'
import { ModalProvider, createModalStack } from 'react-native-modalfy'

import Navigation from './navigation'
import { ErrorModal } from './components/Modals'

const modalConfig = { ErrorModal }
const defaultOptions = { backdropOpacity: 0.6 }

const stack = createModalStack(modalConfig, defaultOptions)

const App = () => (
  <ModalProvider stack={stack}>
    <Navigation />
  </ModalProvider>
)

export default App
```

--------------------------------

### React Native Modalfy: Basic ModalProvider Setup in App.js

Source: https://colorfy-software.gitbook.io/react-native-modalfy/api/modalprovider

This code snippet demonstrates how to set up `ModalProvider` in a React Native application. It shows the necessary imports, how to define a modal configuration, create a modal stack using `createModalStack`, and then wrap the main navigation component with `ModalProvider`.

```jsx
import React from 'react'
import { ModalProvider, createModalStack } from 'react-native-modalfy'

import Navigation from './navigation'
import { ErrorModal } from './components/Modals'

const modalConfig = { ErrorModal }
const defaultOptions = { backdropOpacity: 0.6 }

const stack = createModalStack(modalConfig, defaultOptions)

const App = () => (
  <ModalProvider stack={stack}>
    <Navigation />
  </ModalProvider>
)

export default App
```

--------------------------------

### Basic ModalProvider Setup in React Native

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/guides/stack

This snippet demonstrates the basic integration of ModalProvider from react-native-modalfy by wrapping the root component of a React Native application. It shows how to display simple text content within the provider's scope.

```React JSX
import React from 'react'
import { Text, View } from 'react-native'
import { ModalProvider } from 'react-native-modalfy'

const App = () => (
  <ModalProvider>
    <Text>Welcome to React Native!</Text>
    <Text>To get started, edit App.js</Text>
  </ModalProvider>
)

export default App
```

--------------------------------

### React Native Example: Subscribing to Modal Animation Events with addListener

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/api/types/modalcomponentprop

Illustrates how to implement `addListener` within a React Native functional component. The example demonstrates subscribing to the 'onAnimate' event using `useEffect` to log the animation value, and ensures proper cleanup of the listener when the component unmounts.

```React JSX
import React from 'react'

const EmptyModal = ({ modal: { addListener } }) => {
  const modalListener = React.useRef()

  const handleAnimation = (value) => {
    console.log('Modal animatedValue:', value)
  }

  React.useEffect(() => {
    modalListener.current = addListener('onAnimate', handleAnimation)

    return () => {
      modalListener.current?.remove()
    }
  }, [])

  return (
    //...
  )
}

export default EmptyModal
```

--------------------------------

### Example: Closing All Modals with closeAllModals

Source: https://colorfy-software.gitbook.io/react-native-modalfy/api/types/modalprop

Demonstrates how to use the `closeAllModals` method to close all open modals, both with and without a callback function for post-closure actions.

```JavaScript
modalfy().closeAllModals()

modalfy().closeAllModals(() => console.log('All modals closed'))
```

--------------------------------

### Define Modal Configuration

Source: https://colorfy-software.gitbook.io/react-native-modalfy/guides/opening-closing

Shows an example of the `modalConfig` object, which maps unique keys to their corresponding React Native modal components. These keys are then used with `openModal()` to specify which modal to display.

```React JSX
import { ErrorModal, MessageSentModal } from './components/Modals'

const modalConfig = {
  NoConnection: ErrorModal,
  APITimeout: ErrorModal,
  TokenExpired: ErrorModal,
  MessageSentModal,
}
```

--------------------------------

### Configure React Native Modalfy Stack with Type-Safe Options

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/guides/typing

This TypeScript example demonstrates how to set up a modal stack using `createModalStack` from `react-native-modalfy`. It utilizes `ModalStackConfig` and `ModalOptions` interfaces to ensure type safety when defining modal configurations and default options, wrapping the application with `ModalProvider`.

```TypeScript
import React from 'react'
import {
  ModalOptions,
  ModalStackConfig,
  createModalStack,
  ModalProvider,
} from 'react-native-modalfy'

import Navigation from './navigation'
import { ErrorModal } from './components/Modals'

const modalConfig: ModalStackConfig = { ErrorModal }
const defaultOptions: ModalOptions = { backdropOpacity: 0.6 }

const stack = createModalStack(modalConfig, defaultOptions)

const App = () => (
  <ModalProvider stack={stack}>
    <Navigation />
  </ModalProvider>
)

export default App
```

--------------------------------

### Custom Parallel Animation for Modal In

Source: https://colorfy-software.gitbook.io/react-native-modalfy/api/types/modaloptions

Example demonstrating a custom `animationIn` function using `Animated.parallel` to animate both the modal's `animatedValue` and another custom value simultaneously. The animation starts and then optionally calls a provided callback.

```TypeScript
animationIn: (modalAnimatedValue, modalToValue, callback) => {
  Animated.parallel([
    Animated.timing(modalAnimatedValue, {
      toValue: modalToValue,
      duration: 300,
      easing: Easing.inOut(Easing.exp),
      useNativeDriver: true,
    }),
    Animated.timing(myOtherAnimatedValue, {
      toValue: 1,
      duration: 300,
      easing: Easing.inOut(Easing.exp),
      useNativeDriver: true,
    }),
  ]).start(() => callback?.())
}
```

--------------------------------

### Defining a Modal Component with Class (TypeScript)

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/guides/typing

This example illustrates how to define a modal component using React Class components and the `ModalComponentProp` interface. It defines the `Props` type, similar to the Hooks example, and shows the basic structure of a class-based modal component.

```TypeScript
import React from 'react'
import { ModalComponentProp } from 'react-native-modalfy'

import { ModalStackParams } from 'App'

type Props = ModalComponentProp<
  ModalStackParams,
  void,
  'PokedexEntryModal',
>

class PokedexEntryModal extends React.Component<Props> {
  render() {
    return (
      // ...
    )
  }
}

export default PokedexEntryModal
```

--------------------------------

### API Interface: ModalStackConfig

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/guides/typing

Describes the `ModalStackConfig` interface, which is essential for configuring the modal stack in Modalfy v2, typically required only once during application setup.

```APIDOC
ModalStackConfig:
  - Purpose: Interface of the modal stack configuration (needed once).
```

--------------------------------

### TypeScript: Utilize Modalfy for Autocomplete with Params

Source: https://colorfy-software.gitbook.io/react-native-modalfy/api/modalfy

This TypeScript example demonstrates how to use the `modalfy()` function with a custom `ModalStackParamsList` type. By providing the type parameter, developers can enable strong typing and autocompletion for modal names and their associated parameters, enhancing code reliability and developer experience.

```TypeScript
import { ModalStackParamsList } from 'App'
// ...
const { openModal } = modalfy<ModalStackParamsList>()
```

--------------------------------

### Example: Closing Specific or Latest Modal with closeModal

Source: https://colorfy-software.gitbook.io/react-native-modalfy/api/types/modalprop

Illustrates various ways to use the `closeModal` method: closing the latest modal, closing a specific named modal, and closing the latest modal with a callback.

```JavaScript
modalfy().closeModal()

modalfy().closeModal('UserModal', () => console.log('Latest UserModal modal closed'))

modalfy().closeModal(undefined, () => console.log('Latest modal closed'))
```

--------------------------------

### Open Modal with Parameters (Login Screen)

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/guides/params

Demonstrates how to open a modal (`ErrorModal`) and pass an object of parameters (e.g., `message`) as the second argument to `openModal()`. This example shows a login button triggering the modal with a specific error message.

```JavaScript
import React from 'react'
import { Button, Text, View } from 'react-native'
import { useModal } from 'react-native-modalfy'

const Login = () => {
  const { openModal } = useModal()
  const onPressLogin = () =>
    openModal('ErrorModal', { message: "No Internet connection" })

  return (
    <View>
      <Text>Welcome!</Text>
      <Button onPress={onPressLogin} title="Login" />
    </View>
  )
}

export default Login
```

--------------------------------

### Custom Modal In Animation with React Native Animated

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/api/types/modaloptions

Example implementation of a custom `animationIn` function using `Animated.parallel` to control modal opening animation and other animated values simultaneously.

```JavaScript
animationIn: (modalAnimatedValue, modalToValue) => {
  Animated.parallel([
    Animated.timing(modalAnimatedValue, {
      toValue: modalToValue,
      duration: 300,
      easing: Easing.inOut(Easing.exp),
      useNativeDriver: true,
    }),
    Animated.timing(myOtherAnimatedValue, {
      toValue: 1,
      duration: 300,
      easing: Easing.inOut(Easing.exp),
      useNativeDriver: true,
    }),
  ]).start()
}
```

--------------------------------

### Granular Parameter Access with getParam() (ErrorModal)

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/guides/params

Shows how to use `getParam()` for more granular and robust access to modal parameters, including providing default values if a parameter is not found. This example retrieves `origin` and `message` with fallbacks.

```JavaScript
import React from 'react'
import { Button, Text, View } from 'react-native'

const TITLES = {
  login: 'We could not log you in',
  signup: 'We could not create your account',
  unknown: 'An error has occurred!',
}

const ErrorModal = ({ modal: { closeModal, getParam } }) => {
  // We didn't pass any `origin` key to our params
  // so `'unknown'` will be used by default
  const origin = getParam('origin', 'unknown')
  const message = getParam('message', 'Something went wrong... 🤔')

  return (
    <View>
      {/* 'An error has occurred!' */}
      <Text>{TITLES[origin]}</Text>
      {/* 'No Internet connection' */}
      <Text>{message}</Text>
      <Button onPress={closeModal} title="OK" />
    </View>
  )
}

export default ErrorModal
```

--------------------------------

### Directly Configure Modal Stack Options in TypeScript

Source: https://colorfy-software.gitbook.io/react-native-modalfy/guides/typing

This snippet illustrates a more concise way to configure a modal stack by directly passing configuration objects to `createModalStack`. While it omits explicit interface variables, `createModalStack` still handles type checking internally, making it suitable for simpler setups.

```TypeScript
createModalStack({ ErrorModal }, { backdropOpacity: 0.6 })
```

--------------------------------

### Custom Modal Out Animation with React Native Animated

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/api/types/modaloptions

Example implementation of a custom `animationOut` function using `Animated.parallel` to control modal closing animation and other animated values simultaneously.

```JavaScript
animationOut: (modalAnimatedValue, modalToValue) => {
  Animated.parallel([
    Animated.timing(modalAnimatedValue, {
      toValue: modalToValue,
      duration: 300,
      easing: Easing.inOut(Easing.exp),
      useNativeDriver: true,
    }),
    Animated.timing(myOtherAnimatedValue, {
      toValue: 1,
      duration: 300,
      easing: Easing.inOut(Easing.exp),
      useNativeDriver: true,
    }),
  ]).start()
}
```

--------------------------------

### Integrate ModalProvider with Redux and Apollo Providers

Source: https://colorfy-software.gitbook.io/react-native-modalfy/guides/stack

This example illustrates how to nest ModalProvider within other common providers like Redux's Provider and ApolloProvider. Placing ModalProvider inside ensures that modal components have access to data and state managed by these external providers.

```React JSX
import React from 'react'
import { Provider } from 'react-redux'
import { ApolloProvider } from 'react-apollo'
import { ModalProvider } from 'react-native-modalfy'

import Navigation from './navigation'
import reduxStore from './redux'
import client from './graphql'

const App = () => (
  <ApolloProvider client={client}>
    <Provider store={reduxStore}>
      <ModalProvider>
        <Navigation />
      </ModalProvider>
    </Provider>
  </ApolloProvider>
)

export default App
```

--------------------------------

### TypeScript Usage of modalfy for Type Safety

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/api/modalfy

This TypeScript example demonstrates how to leverage the `modalfy` function with a `ModalStackParamsList` type. This approach enables robust type checking and autocompletion for modal names and their associated parameters, enhancing code reliability and developer experience.

```TypeScript
import { ModalStackParamsList } from 'App'
// ...
const { openModal } = modalfy<ModalStackParamsList>()
```

--------------------------------

### Opening Modals with Callbacks in React Native Modalfy

Source: https://colorfy-software.gitbook.io/react-native-modalfy/guides/triggering-a-callback

Demonstrates how the `openModal()` function accepts an optional third argument for a callback. This callback is executed after the modal has fully opened, including any animation time. The example shows logging a message and chaining modal operations.

```TypeScript
openModal('WelcomeModal', undefined, () => {
  console.log(`✅ Opened WelcomeModal`)
})

openModal('ErrorModal', { titleColor: 'red' }, () => {
  closeModal('WelcomeModal')
})
```

--------------------------------

### Guidance: Avoid ModalProp with useModal() Hook

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/guides/typing

This snippet provides a crucial warning against using `ModalProp` with the `useModal()` Hook. It advises that the hook inherently handles typing, and users should instead pass their parameters interface directly to the hook, for example, `useModal<ModalStackParams>()`, to maintain type safety.

```typescript
// ❌ Don't use ModalProp with the useModal() Hook. If you want to fully type it
// simply proviede your params interface as such: useModal<ModalStackParams>()
// (ModalStackParams is explained below).
```

--------------------------------

### Integrating ModalProvider with Redux and Apollo in React Native

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/guides/stack

This example illustrates how to integrate ModalProvider within a more complex React Native application that already uses Redux's Provider and Apollo's ApolloProvider. It shows that ModalProvider can be nested inside other providers, allowing modal components to access data from them.

```React JSX
import React from 'react'
import { Provider } from 'react-redux'
import { ApolloProvider } from 'react-apollo'
import { ModalProvider } from 'react-native-modalfy'

import Navigation from './navigation'
import reduxStore from './redux'
import client from './graphql'

const App = () => (
  <ApolloProvider client={client}>
    <Provider store={reduxStore}>
      <ModalProvider>
        <Navigation />
      </ModalProvider>
    </Provider>
  </ApolloProvider>
)

export default App
```

--------------------------------

### React Native Modalfy: Example Interpolation for Modal Opacity

Source: https://colorfy-software.gitbook.io/react-native-modalfy/api/types/modaloptions

Illustrates how to use `animatedValue.interpolate` within the `transitionOptions` function to dynamically adjust a modal's opacity based on its position in the modal stack. The `inputRange` values correspond to the modal's depth, where `0` means not rendered, `1` is on top, and increasing values represent deeper positions.

```javascript
opacity: animatedValue.interpolate({
  inputRange: [0, 1, 2, 3, 4],
  outputRange: [0, 1, 0.9, 0.6, 0]
})
```

--------------------------------

### React Native Modalfy: `openModal` API Definition

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/api/types/modalprop

This API definition describes the `openModal` function, which is used to programmatically open a modal. It takes the `modalName` (type `M`) to identify the modal component from the provider's stack, and an optional `params` object (type `P[M]`) to pass data to the opened modal. The function returns `void`.

Example: `modal.openModal('PokedexEntryModal', { id: 619, name: 'Lin-Fu' })`

```APIDOC
openModal: (modalName: M, params?: P[M]) => void
```

--------------------------------

### React Native Functional Modal Component with ModalProps

Source: https://colorfy-software.gitbook.io/react-native-modalfy/guides/typing

This example shows a functional React Native component (`PokedexEntryModal`) using the simplified `ModalProps` type, introduced in `v3.5.0`. It demonstrates how to define the component's props based on its modal name, making it compatible with Modalfy's rendering mechanism.

```TypeScript
import React from 'react'
import { ModalProps } from 'react-native-modalfy'

type Props = ModalProps<'PokedexEntryModal'>

const PokedexEntryModal = (props: Props) => {
  return (
    // ...
  )
}

export default PokedexEntryModal
```

--------------------------------

### Controlling Modalfy Stack Outside React with modalfy()

Source: https://colorfy-software.gitbook.io/react-native-modalfy/blog/modalfy-v2

This JavaScript snippet demonstrates how to use the new `modalfy()` function in Modalfy v2 to interact with the modal stack outside of React components. It shows an example of logging an error to console and Firebase Crashlytics, then conditionally opening an 'ErrorModal' if no other modal is currently active, leveraging the ability to control modals from plain JavaScript.

```JavaScript
import { modalfy } from 'react-native-modalfy'
import crashlytics from '@react-native-firebase/crashlytics'

const { openModal } = modalfy()

export default function(origin, error) {
  console.log(error)

  crashlytics().recordError(error)

  if (!modalfy().currentModal) {
    openModal('ErrorModal', { origin, error })
  }
}
```

--------------------------------

### React Native Modalfy API Reference Overview

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/blog

An overview of the core API elements available in React Native Modalfy v2.x, including various configuration types and key functions/components for interacting with the modal system.

```APIDOC
API Reference for React Native Modalfy v2.x:

Types:
  - ModalStackConfig
  - ModalOptions
  - ModalProp
  - ModalComponentProp
  - ModalComponentWithOptions

Components & Hooks:
  - ModalProvider
  - createModalStack
  - useModal
  - withModal
  - modalfy
```

--------------------------------

### Modal Options Provisioning Methods

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/guides/stack

This section details the three distinct methods available for configuring options for modals within React Native Modalfy, allowing for flexibility from global defaults to specific component overrides.

```APIDOC
Modal Options Provisioning:
  1. Through `defaultOptions` in `createModalStack()`:
     - Applies options globally to all modals in the stack.
     - Example: `const defaultOptions = { backdropOpacity: 0.6 }`
  2. Inside `modalConfig`:
     - Pass a `modalOptions` object directly instead of just the component.
     - Example: `const modalConfig = { MyModal: { component: MyModalComponent, modalOptions: { backdropOpacity: 0.8 } } }`
  3. Inside the modal component file itself:
     - For Class Components: Use `static modalOptions` property.
     - For Functional Components: Use `MyModalComponent.modalOptions` property.
```

--------------------------------

### createModalStack() API Reference

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/guides/stack

Documentation for the `createModalStack()` function, which is central to initializing the modal system in React Native Modalfy. It accepts configuration for modals and global options, returning a stack object for `ModalProvider`.

```APIDOC
createModalStack(modalConfig: object, defaultOptions?: object)
  Description: Initializes the modal stack for React Native Modalfy.
  Parameters:
    modalConfig (mandatory): An object where keys are modal names and values are React components or modal option objects. Example: `{ ErrorModal }` or `{ MyCustomErrorModalName: ErrorModal }`.
    defaultOptions (optional): An object containing default options applied to all modals in the stack, e.g., `{ backdropOpacity: 0.6 }`.
  Returns: A stack object to be passed as the `stack` prop to the `<ModalProvider>` component.
```

--------------------------------

### Initialize Modal Stack with createModalStack() and ModalProvider

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/guides/stack

This snippet demonstrates how to set up the modal system in a React Native application using `createModalStack()` and `ModalProvider`. It shows how to define a `modalConfig` object for registering modal components like `ErrorModal` and how to provide `defaultOptions` for global modal settings. The `stack` output from `createModalStack()` is then passed to the `ModalProvider` component.

```React JSX
import React from 'react'
import { ModalProvider, createModalStack } from 'react-native-modalfy'

import Navigation from './navigation'
import { ErrorModal } from './components/Modals'

const modalConfig = { ErrorModal }
const defaultOptions = { backdropOpacity: 0.6 }

const stack = createModalStack(modalConfig, defaultOptions)

const App = () => (
  <ModalProvider stack={stack}>
    <Navigation />
  </ModalProvider>
)

export default App
```

--------------------------------

### APIDOC: UsableModalProp Interface Methods

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/api/types/modalprop

Detailed API documentation for the methods and properties available on the `modal` prop, part of the `UsableModalProp` interface. These functions allow programmatic control over the modal stack.

```APIDOC
closeAllModals: () => void
  Description: This function closes every open modal.
  Example: modal.closeAllModals()
```

```APIDOC
closeModal: (modalName?: M) => void
  Description: This function closes the currently displayed modal by default. Incidentally, you can also provide a `modalName` if you want to close a different modal than the latest opened.
  Example: modal.closeModal()
```

```APIDOC
closeModals: (modalName: M) => boolean
  Description: This function closes all the instances of a given modal. You can use it whenever you have the same modal opened several times, to close all of them at once.
  Example: modal.closeModals('ErrorModal')
  Returns: boolean indicating whether or not Modalfy found any open modal corresponding to the provided `modalName` (and then closed them).
```

```APIDOC
currentModal: M | null
  Description: This value returns the current open modal (`null` if none).
  Example: modal.currentValue
```

--------------------------------

### Modalfy API Properties Reference

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/api/types/modaloptions

Detailed reference for all configurable properties of the Modalfy library, including animation settings, modal behavior, and styling options.

```APIDOC
animateInConfig?: Pick<Animated.TimingAnimationConfig, 'duration' | 'easing'>
Description: Animation configuration used to animate a modal in, at the top of the stack. It uses `Animated.timing()` so if you want to use another animation type, see `animationIn`.
Note: only `easing` and `duration` are needed.
Default: { easing: Easing.inOut(Easing.exp), duration: 450 }
```

```APIDOC
animationIn?: (
  animatedValue: Animated.Value,
  toValue: number,
) => Animated.CompositeAnimation | void
Description: Function that receives the `animatedValue` used by the library to animate the modal opening, and a `toValue` argument representing the modal position in the stack. Useful to implement your own animation type and/or composition functions.
Note: If you just want to use `Animated.timing()`, check `animateInConfig`.
Default: -
```

```APIDOC
animateOutConfig?: Pick<Animated.TimingAnimationConfig, 'duration' | 'easing'>
Description: Animation configuration used to animate a modal out (underneath other modals or when closing the last one).
Note: only `easing` and `duration` are needed.
Default: { easing: Easing.inOut(Easing.exp), duration: 450 }
```

```APIDOC
animationOut?: (
  animatedValue: Animated.Value,
  toValue: number,
) => Animated.CompositeAnimation | void
Description: Function that receives the `animatedValue` used by the library to animate the modal closing, and a `toValue` argument representing the modal position in the stack. Useful to implement your own animation type and/or composition functions.
Note: If you just want to use `Animated.timing()`, check `animateOutConfig`.
Default: -
```

```APIDOC
backBehavior?: 'clear' | 'pop' | 'none'
Description: How you want the modal stack to behave when users press the backdrop, but also when the physical back button is pressed on Android.
Note:
- `'clear'` means that you want the whole stack to be cleared, whatever the amount of modals opened.
- `'pop'` means that you only want the modal at the top of the stack to be removed.
- `'none'` means that you don't want anything to happen, ie: users have to perform an action inside that modal before you programmatically remove it via `closeModal`.
Default: `'pop'`
```

```APIDOC
backdropColor?: ViewStyle['backgroundColor']
Description: Color of the modal stack backdrop.
Default: `'black'`
```

```APIDOC
backdropOpacity?: number
Description: Number between `0` and `1` that defines the backdrop opacity.
Default: `0.6`
```

```APIDOC
containerStyle?: ViewStyle
Description: Styles applied to the `<View>` directly wrapping your modal component.
Default: `{}`
```

```APIDOC
disableFlingGesture?: boolean
Description: Disable fling gesture detection to close the modal.
Note: the fling gesture handler is not enabled when `position` is `center`.
Default: `false`
```

```APIDOC
modal?: React.ComponentType<any>
Description: React component that will be rendered when you'll open the modal.
Note: only needed when you're using this inside `createModalStack()` 1st argument.
Default: -
```

```APIDOC
position?: 'center' | 'top' | 'bottom'
Description: Vertical positioning of the modal.
Default: `'center'`
```

--------------------------------

### Get Parameter from Modal Props

Source: https://colorfy-software.gitbook.io/react-native-modalfy/api/types/modalcomponentprop

The `getParam` function retrieves a value from the modal's `params` object based on the provided `paramName`. If the parameter is not found, it returns an optional `defaultValue`.

```APIDOC
getParam: <N extends keyof P[M], D extends P[M][N]>(
  paramName: N,
  defaultValue?: D,
) => D extends P[M][N] ? P[M][N] : undefined
```

```React JSX
import React from 'react'
import { Button, Text, View } from 'react-native'

const TITLES = {
  login: 'We could not log you in',
  signup: 'We could not create your account',
  unknown: 'An error has occurred!',
}

const ErrorModal = ({ modal: { closeModal, getParam } }) => {
  const origin = getParam('origin', 'unknown')
  const message = getParam('message', 'Something went wrong... 🤔')

  return (
    <View>
      {/* 'An error has occurred!' */}
      <Text>{TITLES[origin]}</Text>
      {/* 'Your token has expired user' */}
      <Text>{message}</Text>
      <Button onPress={closeModal} title="OK" />
    </View>
  )
}

export default ErrorModal
```

--------------------------------

### Modalfy `modal.addListener()` API Reference

Source: https://colorfy-software.gitbook.io/react-native-modalfy/guides/events

API documentation for the `addListener` method available on the `modal` prop, which allows developers to hook into internal Modalfy events. It specifies the currently supported events, their callback signatures, and the parameters they provide.

```APIDOC
modal.addListener(eventName: string, callback: Function): { remove: () => void }

Supported Events:
- 'onAnimate':
    Description: Triggered during modal animation.
    Callback Signature: (value: number) => void
    Parameters:
      value: The animated value used by Modalfy under the hood.

- 'onClose':
    Description: Triggered when the modal is about to be closed by Modalfy.
    Callback Signature: (closingAction: { type: string, origin: string }) => void
    Parameters:
      closingAction: An object detailing how the modal was closed.
        type: The type of closing action (e.g., 'backdropPress', 'programmatic').
        origin: The origin of the closing action.
```

--------------------------------

### ModalProvider Component API Reference

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/api/modalprovider

Defines the `<ModalProvider>` React component, which serves as the root wrapper for an application to enable modal display via React Context API. It notes that the component internally wraps its children in a `View`.

```APIDOC
ModalProvider Component:
  Description: A React component that wraps the entire application to enable modal display using React Context API.
  Props:
    stack:
      Type: ModalStack
      Description: The modal stack created by `createModalStack`.
      Required: true
  Notes:
    - Internally wraps its `children` inside a `View` component.
    - Allows multiple siblings as children without needing an additional `View/Fragment`.
```

--------------------------------

### createModalStack Function API Definition

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/api/createmodalstack

Defines the TypeScript signature for the `createModalStack` function, detailing its parameters (`config`, `customDefaultOptions`) and return type (`ModalStack`). This API documentation helps with type checking and understanding the function's expected inputs and outputs, along with descriptions for each argument and the return value.

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

Arguments:
  config: ModalStackConfig
    Description: Modal stack configuration.
  customDefaultOptions?: ModalOptions
    Description: Configuration options to apply to all modals by default (optional).

Returns: ModalStack
  Description: Modal stack configuration object to provide to <ModalProvider>'s `stack` prop.
```

--------------------------------

### ModalProvider API Reference

Source: https://colorfy-software.gitbook.io/react-native-modalfy/guides/stack

Documentation for the ModalProvider component, which serves as the root for all modals in a React Native Modalfy application. It requires a 'stack' prop to function correctly.

```APIDOC
ModalProvider:
  Props:
    stack: object
      Description: The modal stack object returned by createModalStack(). This prop is mandatory.
      Type: object
```

--------------------------------

### Close Modal from within a React Native Modal Component

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/guides/opening-closing

This example shows how to close a modal from within the modal component itself. Components registered in `modalConfig` receive the `modal` prop directly, allowing destructuring of `closeModal` to dismiss the modal.

```React JSX
import React from 'react'
import { Button, Text, View } from 'react-native'

const MessageSentModal = ({ modal: { closeModal }}) => (
  <View>
    <Text>Your message was sent!</Text>
    <Button onPress={closeModal} title="OK" />
  </View>
)

export default MessageSentModal
```

--------------------------------

### createModalStack() API Reference

Source: https://colorfy-software.gitbook.io/react-native-modalfy/guides/stack

Documentation for the createModalStack() function, used to define and configure the stack of available modals. It accepts a mandatory modal configuration object and an optional default options object.

```APIDOC
createModalStack(modalConfig: object, defaultOptions?: object): object
  Description: Creates a modal stack configuration for ModalProvider.
  Parameters:
    modalConfig: object (Mandatory)
      Description: An object where keys are modal names (strings) and values are either React components or objects containing a component and modalOptions.
      Example: { ErrorModal, MyCustomErrorModalName: ErrorModal }
    defaultOptions: object (Optional)
      Description: An object containing default options that apply to all modals in the stack, unless overridden.
  Returns: object
    Description: A configured modal stack object to be passed to the ModalProvider's 'stack' prop.
```

--------------------------------

### Type System Change: Flow to TypeScript Migration

Source: https://colorfy-software.gitbook.io/react-native-modalfy/v/2.x/guides/upgrading

The Modalfy library has been completely rewritten from Flow to TypeScript. Flow support has been dropped in favor of TypeScript. Users requiring Flow definitions are encouraged to contribute to the `flow-typed` repository.

```APIDOC
Type System Migration:
  - Old: Flow
  - New: TypeScript

Support:
  - Flow support dropped.
  - Community contributions for Flow definitions are welcome.
```

--------------------------------

### createModalStack Function API Definition

Source: https://colorfy-software.gitbook.io/react-native-modalfy/api/createmodalstack

Documents the `createModalStack` function, which transforms a `ModalStackConfig` into a usable modal stack. It details the `config` and `customDefaultOptions` arguments, including their types and descriptions, and specifies the `ModalStack` return type.

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

```APIDOC
createModalStack(config: ModalStackConfig, customDefaultOptions?: ModalOptions) => ModalStack
  Arguments:
    config: ModalStackConfig - Modal stack configuration.
    customDefaultOptions?: ModalOptions - Configuration options to apply to all modals by default (optional).
  Returns:
    ModalStack - Modal stack configuration object to provide to <ModalProvider/>'s stack prop.
```

--------------------------------

### ModalComponentProp API: addListener Method

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/guides/events

Documentation for the `addListener` method available via `ModalComponentProp`, which allows subscribing to internal Modalfy events for synchronized animations or other custom logic.

```APIDOC
ModalComponentProp:
  addListener(eventName: string, callback: Function): { remove: () => void }
    eventName: The name of the event to subscribe to.
      Supported events:
        - 'onAnimate': Triggered during modal animation, providing the animatedValue.
    callback: The function to be called when the event occurs.
    Returns: An object with a `remove` method to unsubscribe the listener.
```

--------------------------------

### `ModalProp` Interface API Documentation

Source: https://colorfy-software.gitbook.io/react-native-modalfy/guides/typing

This API documentation provides a structured overview of the `ModalProp` interface from `react-native-modalfy`. It details its purpose for type-checking the `modal` prop, outlines specific usage considerations (e.g., when to use it vs. `ModalComponentProp` or `useModal()`), explains its generic parameters, and describes its integration with `React.Component` for type safety in class components.

```APIDOC
ModalProp Interface:
  Purpose: Type checks the 'modal' prop for components using 'withModal()' HOC.
  Usage Considerations:
    - For modal components, use 'ModalComponentProp' instead.
    - Do not use with 'useModal()' Hook; provide params interface directly to 'useModal<ModalStackParams>()'.
    - Primary use case: React Class components.
  Generics:
    - T (ModalStackParams): Interface representing the complete tree of modals and their expected parameter types.
    - P (OwnProps): Optional interface for the component's own props.
  Returns: A type that merges the component's own props with the 'modal' prop provided by 'withModal()'.
  Integration with React.Component:
    - Provided as the first generic argument to 'React.Component<Props, State>'.
    - If a 'State' interface exists, it should be provided as the second argument to 'React.Component', not 'ModalProp'.
    - If component expects no props, the second argument to 'ModalProp' can be omitted.
    - Basic usage: 'class PokedexCard extends React.Component<ModalProp>'
```

--------------------------------

### Configure Modal Options for Class Components (React Native Modalfy)

Source: https://colorfy-software.gitbook.io/react-native-modalfy/guides/typing

This example shows how to set modal options for class-based components in React Native Modalfy. It defines a static `modalOptions` property typed with `ModalOptions` directly within the class, allowing configuration of properties like `backdropColor`.

```TypeScript
import React from 'react'
import {
  ModalComponentProp,
  ModalOptions
} from 'react-native-modalfy'

import { ModalStackParams } from '../types/modals.ts'

type Props = ModalComponentProp<
  ModalStackParams,
  void,
  'PokedexEntryModal',
>

class PokedexEntryModal extends React.Component<Props> {
  static modalOptions: ModalOptions = {
    backdropColor: 'rebeccapurple'
  }

  render() {
    return (
      // ...
    )
  }
}

export default PokedexEntryModal
```

--------------------------------

### Define Props with ModalComponentProp for a Specific Modal

Source: https://colorfy-software.gitbook.io/react-native-modalfy/guides/typing

This TypeScript example demonstrates how to define the props type for a React Native modal component using `ModalComponentProp`. It specifies `ModalStackParams` for the overall modal stack, `void` for additional own props, and the exact modal name ('PokedexEntryModal') for type safety and autocompletion.

```TypeScript
type Props = ModalComponentProp<
  ModalStackParams,
  void,
  'PokedexEntryModal',
>
```

--------------------------------

### ModalProp API for Regular Components

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/guides/opening-closing

The `ModalProp` is accessible in regular components via the `useModal()` hook or `withModal()` HOC. It provides methods for interacting with the modal stack, including `openModal()` to display a modal and `closeModal()` to dismiss the current modal.

```APIDOC
ModalProp (available via useModal() or withModal()):
  openModal(modalKey: string, params?: object): void
    modalKey: The key of the modal to open, as defined in modalConfig.
    params: Optional parameters to pass to the opened modal.
  closeModal(): void
    Closes the currently active modal.
```

--------------------------------

### Modal Component with HOC and Redux Props (TypeScript)

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/guides/typing

This example shows how `ModalComponentProp` can be used with Higher-Order Components (HOCs) like Redux's `connect` to pass additional props to the modal component. It defines an `OwnProps` interface for props coming from the HOC and integrates it into the `ModalComponentProp` type definition.

```TypeScript
// ...

import { connect } from 'react-redux'

// ...

import { ReduxState } from 'App'

interface OwnProps {
  favouritePokemon: ReduxState['user']['favouritePokemon']
}

type Props = ModalComponentProp<
  ModalStackParams,
  OwnProps,
  'PokedexEntryModal',
>

class PokedexEntryModal extends React.Component<Props> {
  //...
}

const mapStateToProps = (state: ReduxState): OwnProps => {
  favouritePokemon: state.user.favouritePokemon
}

export default connect(mapStateToProps)(PokedexEntryModal)
```

--------------------------------

### Modalfy Core API Interfaces

Source: https://colorfy-software.gitbook.io/react-native-modalfy/guides/opening-closing

Documentation for the primary API interfaces (`ModalProp` and `ModalComponentProp`) used to interact with the modal stack in React Native Modalfy, detailing their availability and key methods.

```APIDOC
ModalProp:
  Description: API interface available to regular React components via useModal() hook or withModal() HOC.
  Methods:
    openModal(modalKey: string):
      Description: Opens a modal identified by its unique key defined in modalConfig.
      Parameters:
        modalKey: string - The key of the modal to open.
      Returns: void

ModalComponentProp:
  Description: API interface available directly as a prop to components registered in the modalConfig.
  Methods:
    closeModal():
      Description: Closes the currently active modal component.
      Parameters: None
      Returns: void
```

--------------------------------

### modalfy Function API Reference

Source: https://colorfy-software.gitbook.io/react-native-modalfy/2.x/api/modalfy

Comprehensive API documentation for the `modalfy` function, detailing its purpose, return type, and the methods available on the returned object for managing modals outside of React components. It also highlights important usage notes and limitations.

```APIDOC
modalfy(): UsableModalProp<P>
  Description: Function that exposes Modalfy's API outside of React's context.
  Notes:
    - Do not use if you're inside a React component. Consider useModal() or withModal() instead.
    - Cannot pass a modalName to closeModal() to close a modal that's not the currently displayed one due to API limitations.
  Returns: An object covered in ModalProp (UsableModalProp<P> in TypeScript).
    Properties of the returned object:
      - closeAllModals: () => void
        Description: Closes all currently open modals.
      - closeModal: () => void
        Description: Closes the currently displayed modal.
      - closeModals: (modalName: M) => void
        Description: Closes all modals with the specified name.
        Parameters:
          - modalName: M (keyof P)
            Description: The name of the modal to close.
      - currentModal: ModalState<P>['currentModal']
        Description: Provides access to the currently displayed modal's state.
      - openModal: (modalName: M, params?: P[M]) => void
        Description: Opens a new modal with the specified name and optional parameters.
        Parameters:
          - modalName: M (keyof P)
            Description: The name of the modal to open.
          - params?: P[M]
            Description: Optional parameters to pass to the modal component.
```