Unable to make content appear

[anshul-kai]

Hi,

I'm using react 15.2, node 5.6 and npm 3.6. I'm having no luck being able to display the content inside the popover. It appears as though the screen gets an overlay but the Popover content is nowhere to be seen.

Thank you!

[anshul-kai]

It looks like the rectangle being specified for the popover needs to account for its parent Views positioning to render the Popover content properly. I've modified the example code as follows to achieve correct positioning of the Popover despite of where the Component may be placed.

Please note that I'm passing in a ref to the show method which is slightly different than the Example code.

import React, { Component } from 'react';

import {
  View,
  Text,
  StyleSheet
} from 'react-native';

var Popover = require('react-native-popover');

module.exports = React.createClass({
  getInitialState() {
    return {
      isVisible: false,
      layoutX: 0,
      layoutY: 0,
      rect: {}
    };
  },

  onLayout(event) {
    var {x, y, width, height} = event.nativeEvent.layout;
    this.setState({
      layoutX: x,
      layoutY: y
    });
  },

  show(ref) {
    ref.measure((ox, oy, width, height, px, py) => {
      this.setState({
        isVisible: true,
        rect: {x: px - this.state.layoutX, y: py - this.state.layoutY, width: width, height: height}
      });
    });
  },

  close() {
    this.setState({isVisible: false});
  },

  render() {
    return (
      <View onLayout={this.onLayout}>
        <Popover
            isVisible={this.state.isVisible}
            fromRect={this.state.rect}
            onClose={this.close}>
            <View style={styles.popoverContent}>
              <Text style={styles.popoverText}>Content</Text>
            </View>
          </Popover>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  popoverContent: {
    width: 200,
    height: 70,
    justifyContent: 'center',
    alignItems: 'center',
  },
  popoverText: {
    color: '#ccc',
  },
});