@rasreee/react-native-modal-popover v2.0.3

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.

Requirements

Previously (version 0.0.6) this module required react version >16.2.0 to work (which corresponds to react-native version >0.52.0).

Version 0.0.7 does not reqire React.Fragment anymore, so you can use with reasonably old versions of react and react-native.

Install

yarn add react-native-modal-popover

Usage

This module exports two react components, Popover and PopoverController. Popover works pretty much like original Popover, and PopoverController is a convenience component that uses React Render Props pattern.

Important this example uses React.Fragment to wrap children, but if you use react-native version older than 0.52, then you should reaplce React.Fragment with View

import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import { Popover, PopoverController } 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}>
    <PopoverController>
      {({
        openPopover,
        closePopover,
        popoverVisible,
        setPopoverAnchor,
        popoverAnchorRect,
      }) => (
        <React.Fragment>
          <Button
            title="Press me!"
            ref={setPopoverAnchor}
            onPress={openPopover}
          />
          <Popover
            contentStyle={styles.content}
            arrowStyle={styles.arrow}
            backgroundStyle={styles.background}
            visible={popoverVisible}
            onClose={closePopover}
            fromRect={popoverAnchorRect}
            supportedOrientations={['portrait', 'landscape']}>
            <Text>Hello from inside popover!</Text>
          </Popover>
        </React.Fragment>
      )}
    </PopoverController>
  </View>
);

export default App;

Props

Popover

PopoverController

PopoverController accepts function as children. This function is called with one argument of type PopoverControllerRenderProps and returns react element. The children of this element are your UI handle to open popover (Button, Toggle, whatever) and Popover element itself. Pass properties to you handle and Popover, and PopoverController will make them work together behind the scenes. All the props are required to make controller work.

PopoverControllerRenderProps:

Rect

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

Using without PopoverController

In this case you have to handle refs, measure UI handle and manage popover visibility manually:

import React from 'react';
import {
  findNodeHandle,
  NativeModules,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import Button from './Button';
import Popover from './popover';

const styles = StyleSheet.create({
  app: {
    ...StyleSheet.absoluteFillObject,
    padding: 10,
    backgroundColor: '#c2ffd2',
    alignItems: 'center',
  },
});

export default class App2 extends React.Component {
  state = {
    showPopover: false,
    popoverAnchor: { x: 0, y: 0, width: 0, height: 0 },
  };

  setButton = (e) => {
    const handle = findNodeHandle(this.button);
    if (handle) {
      NativeModules.UIManager.measure(handle, (x0, y0, width, height, x, y) => {
        this.setState({ popoverAnchor: { x, y, width, height } });
      });
    }
  };

  openPopover = () => {
    this.setState({ showPopover: true });
  };

  closePopover = () => this.setState({ showPopover: false });

  render() {
    return (
      <View style={styles.app}>
        <Button
          ref={(r) => {
            this.button = r;
          }}
          icon="arrow-up"
          onPress={this.openPopover}
          onLayout={this.setButton}
        />
        <Popover
          visible={this.state.showPopover}
          fromRect={this.state.popoverAnchor}
          onClose={this.closePopover}
          placement="bottom">
          <Text>Hi</Text>
        </Popover>
      </View>
    );
  }
}

Contributing

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