rn-portal-confirm

React Native Confirm

Features

• implement ReactDom.Portal in React Native.
• multiple portalhost support.
• programmatically create components and support refresh.
• position configurable for dynamic components, e.g. center,bottom,top,auto.
• support for Confirm Dialog out of box.

Example Screenshot

Installation And Usage

• install package

npm install rn-portal-confirm --save

• Add the PortalProvider in the Entry Component, e.g App.

// assume we are in render function of App, Wrapper children under PortalProvider
<PortalProvider>
xxx
</PortalProvider>

• Add any PortalHost if needed, elements will be ported under this host. By default, we will create a root Portalhost in the PortalProvider. so you can skip this step, if single portalHost can match your requirement.

<PortalHost name='xxxuniquename'></PortalHost>

Example and API

for detail examples, please refer to the example in the source code. Bellow give two classic usage.

Confirm Dialog usage

call API to create confirm dialog before your process

import {useConfirm} from 'rn-portal-confirm';
const confirm = useConfirm();
confirm({
      message: 'Are you sure to do something?',
      ok: (closeMe)=>{dosomething();closeMe();},
      cancel: (closeMe) => closeMe(),
    });

Params

• useConfirm(portalHost?: string):confirm

Parameter	Description	defaultValue
portalHost	the PortalHost Name in which the elements will be ported	by default it is the rootPortal

• confirm(param:ConfirmProps):[close,update];

export interface ConfirmProps {
  title?: ReactElement | string;
  message?: ReactElement | string;
  okText?: ReactElement | string;
  cancelText?: ReactElement | string;
  ok?: (closeMe: () => void) => void,
  cancel?: (closeMe: () => void) => void,
  dimissOnBackdropClick?: boolean;
  hideCancel?: boolean;
  Dialog?: (typeof React.Component<any>) | (React.FC<any>);
}

close:()=>void;
update:(props:ConfirmProps)=>void;

Here is the some definition of the ConfirmProps

Parameter	Type	Description	defaultValue
dimissOnBackdropClick	boolean	indicate if the Confirm Dialog will be closed if drawback is clicked	false
hideCancel	boolean	indicate if the cancel button is hidden	false
Dialog	React Component	inidcate which Modal will be used to Modal the Confirm,we provide one similar like the Dialog Component in React-native-elements,you can change it if it can't match your requirements	underfined
title	stirng or ReactElement	the title of the confirm Dialog, you can provide a View if the default style can't match your requirements	null
message	string or ReactElement	the message of the confirm Dialog	null
okText	string or ReactElement	text of Ok Btn	Yes
cancelText	string or ReactElement	text of Cancel Btn	No
ok	function	callback function if ok button is clicked	underfined
cancel	function	callback function if cancel button is clicked	underfined

Open Dynamic Components

we use useComponent to open a custom component in the Modal.

import { useComponent } from 'rn-portal-confirm';
const open = useComponent();

let componentRef: ReturnType<typeof open>;
const confirm = () => {
  componentRef?.close();
}
const component = (
      <View>
        <Text>Hello, I am a custom Component</Text>
        <View style={{ marginTop: 20 }}>
          <Button title='Close Me' onPress={confirm}></Button>
        </View>
      </View>
    );

componentRef = open(component);

Architechter Graphics

Support this package

If you like this package, consider giving it a github star ⭐

Also, PR's are welcome!