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

launchModal: function(target, props = {}) {
    addSentryLog("launchModal", target);
    LOGi.nav("Navigating from", NavState.activeView, "to", target, props);
    NavState.expectModal(target);
    // NavState.modalActive();
    Navigation.showModal({
      stack:{
        children: [
          { component: { name: target, passProps: props }}
        ]
      }
    })
  },

_handleSealTokensPressed = () => {
    const {
      campaignId,
    } = this.props;
    const passProps: SealTokenDialogProps = {
      campaignId: campaignId,
    };
    Navigation.showModal({
      stack: {
        children: [{
          component: {
            name: 'Dialog.SealToken',
            passProps,
          },
        }],
      },
    });
  };

export const replyScreen = (itemId: string, edit: boolean = false) => Navigation.showModal({
  stack: {
    children: [
      {
        component: {
          name: REPLY_SCREEN,
          passProps: {
            itemId,
            edit,
          },
        },
      },
    ],
  },
});

showQRCode() {
    const url = `https://id.uport.me/req/${this.props.shareToken}`

    Navigation.showModal({
      component: {
        name: SCREENS.ProfileQRCode,
        passProps: {
          url,
          title: this.props.name,
          onClose: Navigation.dismissModal,
          componentId: this.props.componentId,
        },
        options: {
          topBar: {
            visible: false,
          },
        },
      },
    })
  }

_showDeckSelector = () => {
    const {
      deckIds,
      deckAdded,
      campaignId,
    } = this.props;
    if (deckAdded) {
      const passProps: MyDecksSelectorProps = {
        campaignId: campaignId,
        onDeckSelect: deckAdded,
        selectedDeckIds: deckIds,
      };
      Navigation.showModal({
        stack: {
          children: [{
            component: {
              name: 'Dialog.DeckSelector',
              passProps,
            },
          }],
        },
      });
    }
  };

showModal() {
    Navigation.showModal({
      component: {
        name: SCREENS.AccountFunding,
        passProps: {
          address: this.props.address,
          accountProfile: this.props.accountProfile,
        },
      },
    })
  }

showNewDeckDialog() {
    Navigation.showModal({
      stack: {
        children: [{
          component: {
            name: 'Deck.New',
          },
        }],
      },
    });
  }

export function* handleRequest(request: DAppModalInfo): Generator<*, *, *> {
  const { modalID } = request;

  const { dApps: { modals } } = yield select();
  const screenRegistered = modals[modalID] != null;
  yield put(storeDAppModal(request));
  if (screenRegistered === false) {
    Navigation.showModal({
      ...screen('DAPP_MODAL_SCREEN'),
      passProps: {
        modalID,
      },
    });
  }
}

showModalWitchStack() {
    Navigation.showModal({
      stack: {
        children: [
          {
            component: {
              name: 'navigation.playground.BackHandlerModalScreen'
            }
          },
          {
            component: {
              name: 'navigation.playground.BackHandlerModalScreen'
            }
          }
        ]
      }
    });
  }

startBetaEnd = () => {
    Navigation.showModal({
      screen: 'democracy.BetaEnd',
      navigatorStyle: {
        navBarHidden: true,
      },
      animationType: 'fade',
      appStyle: {
        orientation: 'portrait',
      },
    });
  };