Popable: Custom Popover & Tooltip in React Native

Popable is a customizable popover and tooltip JavaScript library for React Native applications.

Features:

• Custom trigger events: ‘press’, ‘longpress’, or ‘hover’.
• Optional open/close animations.
• Custom position.
• Custom actions.

How to use it:

1. Install and import.

# Yarn
$ yarn add react-native-popable

# NPM
$ npm i react-native-popableimport { Popable, Popover } from 'react-native-popable';

2. Add a popover to an element.

<Popable content="Content">
  <Text>Text</Text>
</Popable>

3. All possible component props.

action?: 'press' | 'longpress' | 'hover';
animated?: PopoverProps['animated'];
animationType?: PopoverProps['animationType'];
backgroundColor?: PopoverProps['backgroundColor'];
caret?: PopoverProps['caret'];
caretPosition?: PopoverProps['caretPosition'];
children: any;
content: PopoverProps['children'];
numberOfLines?: PopoverProps['numberOfLines'];
onAction?: (visible: boolean) => void;
position?: PopoverProps['position'];
strictPosition?: boolean;
style?: PopoverProps['style'];
visible?: boolean;

Preview:

Download Details:

Author: eveningkid

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/eveningkid/react-native-popable

License: MIT

#react-native #react #reactjs