Type checking with TypeScript/Flow

React Native Modalfy has type definitions for both TypeScript & Flow projects. The library itself uses Flow types for now. So if you do too: you get type checking out of the box, you're good to go. For TypeScript projects, all the types you need are exposed by the library: let's see how to use them together.

Type checking ModalProvider / createModalStack

We don't need to do anything here: the library automatically covers these!

Note: In createModalStack case, you can type the 2 arguments if you want to, through ModalStackConfig and ModalStackOptions.

Type checking the modal prop

As we've seen in the Opening & closing guide, there are 2 ways to access the modal prop: either from a modal component (provided by the library itself) or anywhere else in our code (via useModal/withModal ).

From a modal component

Given that this component is an item of the modal stack, we'll need to type the modal prop with ModalStackItemProp as so:

import React from 'react'
import { ModalStackItemProp } from 'react-native-modalfy'

interface Props {
  modal: ModalStackItemProp
}

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

Note: If we decide to provide some options from here through static modalOptions, we can also type check it: static modalOptions: ModalStackOptions = {}.

From anywhere else in the code

This time, ModalProp is the interface we'll need:

import React from 'react'
import { ModalProp, withModal } from 'react-native-modalfy'

interface Props {
  modal: ModalStackItemProp
}

const MyComponent = ({ modal }: Props): JSX.Element => (
  // ...
)

export default withModal(MyComponent)

Note: There's no need to do this if you're using the useModal hook as the library already applies the correct type here.

Note: We're using a different interface here as withModal do not give you access to the exact same modal prop as the one from within a modal component. Feel free to have a look at the declaration file if needed.

Type checking static modalOptions

Besides the default modal options passed to createModalStack(), another way to define a modal's options is to used static modalOptions if you're inside a class. Its type is also provided as so:

import React from 'react'
import { ModalStackItemProp, ModalStackOptions } from 'react-native-modalfy'

interface Props {
  modal: ModalStackItemProp
}

class MyModalComponent extends React.Component<Props> {
 static modalOptions: ModalStackOptions = {
    containerStyle: {
      borderWidth: 5,
      borderColor: 'rebeccapurple'
    },
  }
  
  // ...
}


export default MyModalComponent