@wli/react-native-modal-popover v0.0.7

react-native-modal-popover

Pure JS popover component for react-native

About this module

The original react-native-popover is now outdated, so I decided to publish my own module to avoid using github url in my package.json. Something got lost in the process of rewriting, but now it uses Modal and native animation drivers, and also has cool helper to use with Touchables. Thanks to @jeanregisser and to the authors of hanging PRs for their code.

Install

yarn add react-native-modal-popover

Usage

This module exports two react components, Popover and PopoverTouchable. Popover works pretty much like original Popover, and PopoverTouchable is a nice wrapper. Render it with two children - something with onPress and Popover and it'll manage the popover for you.

import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import Popover, { PopoverTouchable } from 'react-native-modal-popover';

const styles = StyleSheet.create({
  app: {
    ...StyleSheet.absoluteFillObject,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#c2ffd2',
  },
  content: {
    padding: 16,
    backgroundColor: 'pink',
    borderRadius: 8,
  },
  arrow: {
    borderTopColor: 'pink',
  },
  background: {
    backgroundColor: 'rgba(0, 0, 255, 0.5)'
  },
});

const App = () => (
  <View style={styles.app}>
    <PopoverTouchable onPopoverDisplayed={() => console.log('Popover displayed!')}>
      <Button title="Press me!" onPress={() => console.log('I don\'t work')}/>
      <Popover
        contentStyle={styles.content}
        arrowStyle={styles.arrow}
        backgroundStyle={styles.background}
      >
        <Text>Hello from inside popover!</Text>
      </Popover>
    </PopoverTouchable>
  </View>
);

export default App;

Props

Popover

PopoverTouchable

Rect

Rect is an object with the following properties: {x: number, y: number, width: number, height: number}

Contributing

If you want to add some features, feel free to submit PR.