How to use the react-native-navigation.Navigation.showOverlay function in react-native-navigation

static showOverLayOrModal(componentName, param) {
        if (CommonUtil.isAndroid()) {
            Navigation.showOverlay(NavigationUtil.getRNNOverlayOrModal(componentName, param))
                .then((result) => {
                    console.log({result});
                }).catch((error) => {
                console.log({error});
            });
        } else {
            Navigation.showModal(NavigationUtil.getRNNOverlayOrModal(componentName, param))
                .then((result) => {
                    console.log({result});
                }).catch((error) => {
                console.log({error});
            });
        }
    }

_showDifficultyDialog = () => {
    Navigation.showOverlay({
      component: {
        name: 'Dialog.CampaignDifficulty',
        passProps: {
          difficulty: this.state.difficulty,
          updateDifficulty: this._updateDifficulty,
        },
        options: {
          layout: {
            backgroundColor: 'rgba(128,128,128,.75)',
          },
        },
      },
    });
  };

showOverlay(target, props) {
    addSentryLog("showOverlay", target);
    LOGi.nav("I WANT TO SHOW THIS OVERLAY", target);

    LOGi.nav("is this overlay open?", target, NavState.isThisOverlayOpen(target));

    if (NavState.isThisOverlayOpen(target)) {
      return;
    }

    NavState.showOverlay(target);

    LOGi.nav("WILL SHOW NOW", target);
    Navigation.showOverlay({
      component: {
        id: target,
        name: target,
        passProps: props,
        options: {
          overlay: {
            interceptTouchOutside: true,
            handleKeyboardEvents: true,
          }
        }
      },
    })
  },

export function showAutocompleteOverlay(passProps: IAutocompletePickerOverlayProps) {
  try {
    Navigation.showOverlay({
      component: {
        name: AUTOCOMPLETE_PICKER_OVERLAY_KEY,
        passProps: {
          ...passProps,
          canExtendFullScreen: true,
          hasTextInput: true,
          minHeight: 350
        },
        options: {
          overlay: {
            interceptTouchOutside: false
          },
          layout: {
            backgroundColor: 'transparent'
          }
        }

onClickShowStaticLifecycleOverlay = () => {
    Navigation.showOverlay({
      component: {
        name: 'navigation.playground.StaticLifecycleOverlay',
        options: {
          overlay: {
            interceptTouchOutside: false
          }
        }
      }
    });
  }

alert = (title) => {
    Navigation.showOverlay({
      component: {
        name: Screens.Alert,
        passProps: {
          title
        },
        options: {
          layout: {
            componentBackgroundColor: 'transparent'
          },
          overlay: {
            interceptTouchOutside: true
          }
        }
      }
    });
  };

const onPress = (component: React.ReactNode) => {
    /*
     * To avoid creating multiple screens for each modal,
     * I just pass the modal content as a props to the
     * Modalize screen
     */
    Navigation.showOverlay({
      component: {
        name: MODALIZE,
        passProps: { component },
        options: { overlay: { interceptTouchOutside: false } },
      },
    });
  };

let nextUUID = null;
    if (activeAudioIndex + 1 < audioContent.length) {
      nextUUID = audioContent[activeAudioIndex + 1].uuid;
    }

    try {
      const { duration } = await audioActor().loadAudio({
        audioID: activeAudio.id,
        audioUUID: activeAudio.uuid,
        playAudioAfterLoad,
        autoPlay,
      });

      if (state.bottomPlayer.playerOpen === false) {
        Navigation.showOverlay({
          component: {
            id: 'bottomPlayer',
            name: 'bottomPlayer',
            options: {
              overlay: {
                interceptTouchOutside: false,
              },
            },
          },
        });
      }

      dispatch(
        loadAudioSuccess(
          tourStop,
          tourStop.uuid,

const handleOverlay = name => {
    Navigation.showOverlay({
      component: {
        name,
        options: { overlay: { interceptTouchOutside: true } },
      },
    });
  };

export function showDurationOverlay(passProps: IDurationPickerOverlayProps) {
  try {
    Navigation.showOverlay({
      component: {
        name: DURATION_PICKER_OVERLAY_KEY,
        passProps: {
          ...passProps,
          disabledInteraction: Platform.OS === 'android'
        },
        options: {
          overlay: {
            interceptTouchOutside: false
          },
          layout: {
            backgroundColor: 'transparent'
          }
        }
      }
    });