react native plugins config

react-native-popover.md

import Popover from 'react-native-popover';

this._closePopover = this._closePopover.bind(this)

in constructor

this.state{
  isVisible:false,
        buttonRect:{}
        }

_closePopover() {
    this.setState({isVisible: false});
}


_showPopover(ref) {
    console.log("  this.refs: ", this.refs);
    this.refs.popover.measure((ox, oy, width, height, px, py) => {

        this.setState({
            isVisible: true,
            buttonRect: {
                x: px,
                y: py,
                width: width,
                height: height
            }
        });
    });
}


renderButton(ref, text,icon) {
        console.log("ref: ", ref);
        console.log("text: ", text);
        let textView=<View/>;
        let iconView=<View/>;
        if(text)textView=(<Text style={{fontSize: 12,color:'white',fontWeight: 'bold'}}>{text}</Text>)
        if(icon)iconView=(<Icon name={icon}  size={20} color="#fff" />)
        return (
            <View style={{
                zIndex: 3,
                flex: 1,

            }}>
                <TouchableOpacity ref={ref}
                  style={{width:60, borderWidth:3, borderColor:'rgba(0,0,0,0.2)', alignItems:'center', justifyContent:'center', height:60, backgroundColor:'#ff585b', borderRadius:30, position:'absolute', bottom:20, right:20}}
                   onPress={this._showPopover.bind(this, ref)}>
                {textView}
                {iconView}
                </TouchableOpacity>
            </View>
        );
    }

inside render

{this.renderButton('popover','','directions-boat')}
    <Popover  isVisible={this.state.isVisible} fromRect={this.state.buttonRect} displayArea={{
                x: 100,y: 200,width: width - 10,height: height - 25
            }} onClose={this._closePopover}>
                <View style={{width: 200,height: 70,justifyContent: 'center',alignItems: 'center'}}>
                    <Text style={{color: '#ccc'}}>Content</Text>
                </View>
            </Popover>