react-native-popup-view

A flexible way to show several types of popup views in React Native.

• Easy to integrate, easy to use
• Less code in component
• Customizable in many ways

Example

example/Main.js

Installation

If using yarn:

yarn add react-native-popup-view

If using npm:

npm i react-native-popup-view

Usage

Wrap App in the PopupProvider

import {PopupProvider} from 'react-native-popup';

export default function App() {
  return (
    <PopupProvider>
      <App />
    </PopupProvider>
  );
}

Declare with usePopup

import {usePopup} from 'react-native-popup';
...
const {showToast} = usePopup();
...
const onPress = () => {
  showToast({
    message: 'This is a toast',
    toastType: TOAST_TYPE.SUCCESS,
  });
};

Documentation

Generic params

| Name | Type | Description
| ---------------- | --------------- | ----------------------------------------------- | showOverlay | Boolean | display a gray translucent full screen overlay
| disableDismiss | Boolean | disable default touch to dismiss feature
| onDismissStart | Function | called on the start of dismiss animation
| onDismissEnd | Function | called on the end of dismiss animation
| onShowStart | Function | called on the start of display animation
| onShowEnd | Function | called on the end of display animation

Actionsheet Params

| Name | Type | Description
| ---------------- | --------------- | ----------------------------------------------- | options | Array | an array of ActionSheetOption, which has title, subtitle, onPress and isDestructive | actionViews | Array | alternative to options, take a list of customized option view. It could be anything | headerView | React element | header view of the action sheet | containerStyle | style object | layout style of the action sheet wrapper

ActionSheetOption Prams

| Name | Type | Description
| ---------------- | --------------- | ----------------------------------------------- | title | String | title of the action | subtitle | String | subtitle of the action | disabled | Boolean | determine if this action is clickable | onPress | Function | callback function | actionStyle | style object | style of the action view | actionTitleStyle | style object | style of title text | actionSubtitleStyle | style object | style of subtitle text

FloatingView Params

| Name | Type | Description
| ---------------- | --------------- | ----------------------------------------------- | anchorPoint | object | coordinate in the form of {x, y} | popupDirection | POPUP_DIRECTION | towards which direction the pop up view should be displayed | customView | React element | the actual view needs to be displayed

Modal Prams

| Name | Type | Description
| ---------------- | --------------- | ----------------------------------------------- | message | String | text message shown in toast | customView | React element | the actual view needs to be displayed

Toast Params

| Name | Type | Description
| ---------------- | --------------- | ----------------------------------------------- | showDismiss | Boolean | determine dismiss button visibility. default true | toastType | TOAST_TYPE | one of the toast type with preset style | toastStyle | style object | customize toast style | duration | Integer | duration before toast is dismissed, in milliseconds, default to 3000 | position | TOAST_POSITION | toast display position, default to top

Tooltip Params

| Name | Type | Description
| ---------------- | --------------- | ----------------------------------------------- | anchorPoint | object | coordinate in the form of {x, y} | popupDirection | POPUP_DIRECTION | towards which direction the pop up view should be displayed | text | String | text to be displayed in the tool tip | style | style object | customize tooltip style

Contributing

Pull requests are welcome! Open a new GitHub issue for any bug or suggestion.

Author

Xiao Ma

License

MIT