Modal

Modal covers the full screen. For a prompt/small version of modal, use Dialog

Usage

Open modal

<Toggle initial={false}>
  {({ on, toggle, set }) => (
    <Box>
      <Modal
        visible={on}
        animationType="slide"
        onRequestClose={() => set(false)}
      >
        <Box height={1800}>
          <Text>Put any content in the modal</Text>
          <Button onPress={() => set(false)} title="Close button one" />
          <Button onPress={() => set(false)} title="Close button two" />
        </Box>
      </Modal>
      <Button onPress={() => set(true)} title="Open modal" />
    </Box>
  )}
</Toggle>

<Toggle initial={false}>
  {({ on, toggle, set }) => (
    <Box>
      <Modal
        visible={on}
        animationType="slide"
        onRequestClose={() => set(false)}
      >
        <Box height={1800}>
          <Text>Put any content in the modal</Text>
          <Button onPress={() => set(false)} title="Close button one" />
          <Button onPress={() => set(false)} title="Close button two" />
        </Box>
      </Modal>
      <Button onPress={() => set(true)} title="Open modal" />
    </Box>
  )}
</Toggle>

Nested

Open outer modal

<Toggle initial={false}>
  {({ on: outerOn, set: outerSet }) => (
    <Box>
      <Modal
        visible={outerOn}
        animationType="fade"
        onRequestClose={() => outerSet(false)}
      >
        <Box height={1800}>
          <Text>Outer modal</Text>
          <Button
            onPress={() => outerSet(false)}
            title="Close outer modal button one"
          />
          <Button
            onPress={() => outerSet(false)}
            title="Close outer modal button two"
          />
          <Toggle initial={false}>
            {({ on: innerOn, set: innerSet }) => (
              <Box>
                <Modal
                  visible={innerOn}
                  animationType="slide"
                  onRequestClose={() => innerSet(false)}
                >
                  <Box height={1800}>
                    <Text>Inner modal</Text>
                    <Button
                      onPress={() => innerSet(false)}
                      title="Close inner modal button one"
                    />
                    <Button
                      onPress={() => innerSet(false)}
                      title="Close inner modal button two"
                    />
                  </Box>
                </Modal>
                <Button
                  onPress={() => innerSet(true)}
                  title="Open inner modal"
                />
              </Box>
            )}
          </Toggle>
        </Box>
      </Modal>
      <Button onPress={() => outerSet(true)} title="Open outer modal" />
    </Box>
  )}
</Toggle>

<Toggle initial={false}>
  {({ on: outerOn, set: outerSet }) => (
    <Box>
      <Modal
        visible={outerOn}
        animationType="fade"
        onRequestClose={() => outerSet(false)}
      >
        <Box height={1800}>
          <Text>Outer modal</Text>
          <Button
            onPress={() => outerSet(false)}
            title="Close outer modal button one"
          />
          <Button
            onPress={() => outerSet(false)}
            title="Close outer modal button two"
          />
          <Toggle initial={false}>
            {({ on: innerOn, set: innerSet }) => (
              <Box>
                <Modal
                  visible={innerOn}
                  animationType="slide"
                  onRequestClose={() => innerSet(false)}
                >
                  <Box height={1800}>
                    <Text>Inner modal</Text>
                    <Button
                      onPress={() => innerSet(false)}
                      title="Close inner modal button one"
                    />
                    <Button
                      onPress={() => innerSet(false)}
                      title="Close inner modal button two"
                    />
                  </Box>
                </Modal>
                <Button
                  onPress={() => innerSet(true)}
                  title="Open inner modal"
                />
              </Box>
            )}
          </Toggle>
        </Box>
      </Modal>
      <Button onPress={() => outerSet(true)} title="Open outer modal" />
    </Box>
  )}
</Toggle>

Using browser history

By using useHistory prop it will mimic Android's back button behavior on web which closes modals. On RN, this will have no effect and will use a regular Modal. Works in nested modals as well.

Note: Uses history state to manipulate modal state

Open outer modal

<Toggle initial={false}>
  {({ on: outerOn, set: outerSet }) => (
    <Box>
      <Modal
        useHistory
        visible={outerOn}
        onRequestClose={() => outerSet(false)}
      >
        <Box height={1800}>
          <Text>Outer modal</Text>
          <Button
            onPress={() => outerSet(false)}
            title="Close outer modal button one"
          />
          <Button
            onPress={() => outerSet(false)}
            title="Close outer modal button two"
          />
          <Toggle initial={false}>
            {({ on: innerOn, set: innerSet }) => (
              <Box>
                <Modal
                  visible={innerOn}
                  useHistory
                  onRequestClose={() => innerSet(false)}
                >
                  <Box height={1800}>
                    <Text>Inner modal</Text>
                    <Button
                      onPress={() => innerSet(false)}
                      title="Close inner modal button one"
                    />
                    <Button
                      onPress={() => innerSet(false)}
                      title="Close inner modal button two"
                    />
                  </Box>
                </Modal>
                <Button
                  onPress={() => innerSet(true)}
                  title="Open inner modal"
                />
              </Box>
            )}
          </Toggle>
        </Box>
      </Modal>
      <Button onPress={() => outerSet(true)} title="Open outer modal" />
    </Box>
  )}
</Toggle>

<Toggle initial={false}>
  {({ on: outerOn, set: outerSet }) => (
    <Box>
      <Modal
        useHistory
        visible={outerOn}
        onRequestClose={() => outerSet(false)}
      >
        <Box height={1800}>
          <Text>Outer modal</Text>
          <Button
            onPress={() => outerSet(false)}
            title="Close outer modal button one"
          />
          <Button
            onPress={() => outerSet(false)}
            title="Close outer modal button two"
          />
          <Toggle initial={false}>
            {({ on: innerOn, set: innerSet }) => (
              <Box>
                <Modal
                  visible={innerOn}
                  useHistory
                  onRequestClose={() => innerSet(false)}
                >
                  <Box height={1800}>
                    <Text>Inner modal</Text>
                    <Button
                      onPress={() => innerSet(false)}
                      title="Close inner modal button one"
                    />
                    <Button
                      onPress={() => innerSet(false)}
                      title="Close inner modal button two"
                    />
                  </Box>
                </Modal>
                <Button
                  onPress={() => innerSet(true)}
                  title="Open inner modal"
                />
              </Box>
            )}
          </Toggle>
        </Box>
      </Modal>
      <Button onPress={() => outerSet(true)} title="Open outer modal" />
    </Box>
  )}
</Toggle>

Props

useHistory

Boolean | undefined