> For the complete documentation index, see [llms.txt](https://colorfy-software.gitbook.io/react-native-modalfy/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://colorfy-software.gitbook.io/react-native-modalfy/2.x/guides/params.md).

# Passing params

#### [> ModalProp API](/react-native-modalfy/2.x/api/types/modalprop.md)

#### [**> ModalComponentProp API**](/react-native-modalfy/2.x/api/types/modalcomponentprop.md)

One of the reason we love React so much is how easy it is to reuse the same component wherever it makes sense. We might want to do something similar here: calling different modals, but rendering the same React component under the hood. Being able to change the content depending on which context that modal was called from is a major key to success, hence the need for `params`!

They are a two-step-use tool:

1. We pass params to a modal by putting them as `openModal()` second argument, ie: `openModal('ErrorModal', { message: 'No Internet connection' })`
2. We access the params in the modal component through `modal.params`.

{% tabs %}
{% tab title="Step 1" %}
{% code title="./screens/Login.js" %}

```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

```

{% endcode %}
{% endtab %}

{% tab title="Step 2" %}
{% code title="./modals/ErrorModal.js" %}

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

const ErrorModal = ({ modal: { closeModal, params } }) => (
  <View>
    <Text>An error occured!</Text>
    <Text>{params.message}</Text>
    <Button onPress={closeModal} title="OK" />
  </View>
)

export default ErrorModal
```

{% endcode %}
{% endtab %}
{% endtabs %}

Now with Modalfy v2, you can even have granular access to your params if you used an object as `params` (which you should by default) and even provide a default value:

{% tabs %}
{% tab title="React JSX" %}
{% code title="./modals/ErrorModal.js" %}

```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

```

{% endcode %}
{% endtab %}
{% endtabs %}

{% hint style="info" %}
Checkout the [**ModalComponentProp**](/react-native-modalfy/2.x/api/types/modalcomponentprop.md) API reference to learn more about `getParam().`
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://colorfy-software.gitbook.io/react-native-modalfy/2.x/guides/params.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.