steffeydev / react-native-popover-view Goto Github PK

So I just started trying to use this, and immediately got an error:

Unable to resolve ../../react-navigation/src/navigators/createKeyboardAwareNavigator" from ".//node_modules/react-native-popover-view/src/PopoverStackNavigator.js`: The module `../../react-navigation/src/navigators/createKeyboardAwareNavigator` could not be found"

Not sure what I did wrong here.

This doesn't really need description

Describe the bug
I am using the component with tooltip mode. It is shown under text. z index won't help. Does anyone know what I might be doing wrong?
Thank you!

Screenshots

in this case, no screen place to display the popover view, the forcedContentSize.height < 0

I have different situations where the default animation is acting strange. I'd like the ability to adjust duration, easing, or turn it off altogether.

Shouldn't it be false?

hi, thanks for this library.
Do you support with option to have a sound when the popover show? if not can you please tell me how can I do that?

Thanks

Describe the bug
In popoverDoneClosing I want to open the Alert dialog. On iOS, the alert closes straight after it showed and after that the app freezes. You can't tap anything, my guess is that popover modal doesn't close properly and overlays the entire screen (like in #16). If you wrap Alert in setTimeout with 0 (zero) interval you may get this behavior after the second hit. You can try it out in this Expo Snack: https://snack.expo.io/HJFjG-G9V With 100 interval, it's pretty much ok, but it still freezes occasionally.
Expected bevavior: I call Alert in popoverDoneClosing and it displays without closing and freezing the app, without the need to set a timeout.

Device/Setup Info:

• Device: any iPhone
• OS: iOS 12.2
• react-native version: 0.58.5
• react-native-popover-view version: 1.0.19

Debug Output
This bug does not reproduce when Remote Debug is enabled.

See example here: https://snack.expo.io/Hy8bKJDJ4
the popover itself is clickable but its container component will stop responding to clicks.

Device/Setup Info:

• Device: any
• OS: iOS
• react-native version: 0.57.4, expo
• react-native-popover-view version: 1.014

Describe the bug
If the popover size gets bigger as the view is animating in (for example, if content is loaded async and then re-rendered just before or during animation), the popover appears to be originating from a location that is below the actual fromRect.

Device/Setup Info:

• Device: iPad Pro 12.9"
• OS: iOS 12
• react-native version: 0.57
• react-native-popover-view version: 1.0.16

Screenshots
See CC Orlando App - Bible Tab - Top right button

Debug Output

measureContent - Showing Popover - Animating In
getTranslateOrigin - popoverOrigin: {"x":908,"y":30}
getTranslateOrigin - popoverSize: {"width":380,"height":911}
getTranslateOrigin - anchorPoint: {"x":1296,"y":42}
getTranslateOrigin - shift: {"hoizontal":198,"vertical":-443.5}
measureContent - new requestedContentSize: {"y":0,"width":380,"x":0,"height":984} (used to be {"y":0,"width":380,"x":0,"height":911})
handleGeomChange - requestedContentSize: : {"y":0,"width":380,"x":0,"height":984}
computeGeometry - displayArea: {"x":10,"y":30,"width":1346,"height":984}
computeGeometry - fromRect: {"x":1296,"y":22,"width":70,"height":40}
computeGeometry - displayArea: {"x":10,"y":30,"width":1346,"height":984}
computeGeometry - fromRect: {"x":1296,"y":22,"width":70,"height":40}

I want to change the background color of popover view to grey and text color to white. But it seems not to be possible. How can I achieve that?

Hi, is it possible to make the clicked element that was used to trigger the popover visibility appear "above" the modal background of the popover? At the same level as the popover.
I tried messing around with z-indexes but with no luck.

Thank you.

Here is my sample code you can look into it.

showPopover() {
   this.setState({isVisible: true});
 }

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

 render() {
    return (

   <View>        
    <TouchableHighlight ref={ref => this.touchable = ref} style={styles.button} onPress={() => this.showPopover()}> <Text>Press me</Text> </TouchableHighlight> 
    <Popover
      isVisible={this.state.isVisible}
      fromView={this.touchable}
      onClose={() => this.closePopover()}>
      <Text>I'm the content of this popover!</Text>
    </Popover>
  </view>

 );
}

Describe the bug
What is it that you are seeing? Please be detailed in your description so that I can help fix your issue as quickly as possible.

Device/Setup Info:

• Device: [e.g. iPhone 6]
• OS: [e.g. iOS 8.1]
• react-native version: [e.g. 0.57.1]
• react-native-popover-view version: [e.g. 1.0.7]

Screenshots
If there is a visual issue, add screenshots or a video so that I can see what is going on.

Debug Output
Pass the debug={true} prop into the Popover, and then paste the contents of the log here.

If I want to open Popover when start the screen so I set isVisible: “true” and it have a bug.
Can you help me fix it ?
Many thanks.

Sorry for my bad English.
I want to use react-native-popover-view as a guide for new user. If user read the first guide and they click "Ok" it will open the second guide. My code is below.
Thank you for your help !
"react-native-popover-view": "version": "1.0.9",
"react-native": "version": "0.57.4",

export default class App extends Component<Props> {
  componentDidMount() {
    this.setState({ isVisible: true });
  }
  state = {
    isVisible: false,
    isVisible2: false
  };

  showPopover() {
    this.setState({ isVisible: true });
  }
  showPopover2() {
    this.setState({ isVisible2: true });
    this.setState({ isVisible: false });
  }

  closePopover() {
    this.setState({ isVisible: false });
  }
  render() {
    return (
      <View style={styles.container}>
        <Popover
          isVisible={this.state.isVisible}
          fromView={this.touchable}
          onClose={() => this.closePopover()}
        >
          <Text style={styles.test}>The first guide</Text>
          <TouchableHighlight
            style={styles.button}
            onPress={() => this.showPopover2()}
          >
            <Text>go to second</Text>
          </TouchableHighlight>
        </Popover>
        <Popover
          isVisible={this.state.isVisible2}
          fromView={this.touchable2}
          onClose={() => this.closePopover()}
        >
          <Text style={styles.test}>The second guide</Text>
          <TouchableHighlight
            style={styles.button}
            onPress={() => this.showPopover()}
          >
            <Text>Press me</Text>
          </TouchableHighlight>
        </Popover>

        <TouchableHighlight
          ref={ref => (this.touchable = ref)}
          style={styles.button}
          onPress={() => this.showPopover()}
        >
          <Text>Press me</Text>
        </TouchableHighlight>
        <Text
          ref2={ref2 => (this.touchable2 = ref2)}
          tyle={styles.instructions}
        >
          text 1
        </Text>
      </View>
    );
  }
}

Plese, add @types to this lib.
Thanks.

Event componentWillRecieveProps will deprecate after updating react.
Use getDerivedStateFromProps() and componentDidUpdate() instead componentWillReceiveProps();

Hi, im getting this error sometimes and I don't understand what does it mean and how to solve it... I would like for some explanation

• Before keyboard show:
  
• After keyboard hide:
  

Thank you for this beautiful work
I know that this library have problems with android
I tryed this library on my project (android) and i noticed that the pop over is displayed only if i rotate the display after call the show pop over function
Maybe this can help you to fix
When do you think this library will support android?

Hi,
verticalOffset still required on Android on version 2.x when running on expo, and may update the popover height according the vertical offset too (for better experience on large popovers like the image attached)

here snippet and screenshots, thanks and awesome work !!!

btw: on iOS works as expected.

<TouchableOpacity
  ref={ref => (this._controls_button_ref = ref)}
  style={{
    position: 'absolute',
    top: 0,
    right: 0
  }}
  onPress={this._showControls}
>
  <Text>Button</Text>
</TouchableOpacity>
<Popover
  isVisible={showControls}
  fromView={this._controls_button_ref}
  onRequestClose={this._onPressCancel}
  verticalOffset={
    Platform.OS === 'android' ? -Constants.statusBarHeight : 0
  }
>
  <View>Stuff here</View>
</Popover>

If the popover has to shift to accommodate the keyboard, and then the screen is rotated with the popover and keyboard still open, the popover tends to get confused about where it should be. Need to investigate.

<Text> <Text style={styles.sectionTitle} onPress={() => this.setState({isVisible: true})} ref={(ref) => (this.touchable = ref)}> Click here to show PopOver </Text> <View style={styles.popover}> <Popover isVisible={this.state.isVisible} fromView={this.touchable} placement={'bottom'} onRequestClose={() => this.closePopover()}> <Text>ReactNativePopOverViewSuccessfull</Text> </Popover> </View> </Text>

code shown above is from my poc . In my actual project all of my components are dynamically created and i need to show popover to a particular text component, so i tried wrapping up the popover inside the text component but it fires error while clicking the text component

Device/Setup Info:

• OS: Android 10
• react-native version: 0.61.5
• react-native-popover-view version: 2.1.0

Screenshots

Open app and refresh ctrl+R (working)

setDefaultDisplayArea - newDisplayArea: {"x":10,"y":10,"width":391.4285583496094,"height":639.4285888671875} blob:http://localhost:8081/3a732971-c4ed-43dd-a0b0-e8e189bfa30e:142043 measureContent - Showing Popover - requestedContentSize: {"height":55.42856979370117,"width":151.42857360839844,"y":0,"x":0} blob:http://localhost:8081/3a732971-c4ed-43dd-a0b0-e8e189bfa30e:142043 computeGeometry - displayArea: {"x":10,"y":10,"width":391.4285583496094,"height":639.4285888671875} blob:http://localhost:8081/3a732971-c4ed-43dd-a0b0-e8e189bfa30e:142043 computeGeometry - fromRect: {"x":350,"y":20.571428298950195,"width":40.85714340209961,"height":40.85714340209961} blob:http://localhost:8081/3a732971-c4ed-43dd-a0b0-e8e189bfa30e:142043 computeGeometry - displayArea: {"x":10,"y":10,"width":391.4285583496094,"height":639.4285888671875} blob:http://localhost:8081/3a732971-c4ed-43dd-a0b0-e8e189bfa30e:142043 computeGeometry - fromRect: {"x":350,"y":20.571428298950195,"width":40.85714340209961,"height":40.85714340209961} blob:http://localhost:8081/3a732971-c4ed-43dd-a0b0-e8e189bfa30e:142043 measureContent - Showing Popover - geom: {"popoverOrigin":{"x":190.57142639160156,"y":13.285715103149414},"anchorPoint":{"x":350,"y":41},"placement":"left","forcedContentSize":{"height":639.4285888671875,"width":332},"viewLargerThanDisplayArea":{"height":false,"width":false}} blob:http://localhost:8081/3a732971-c4ed-43dd-a0b0-e8e189bfa30e:142043 measureContent - Showing Popover - Animating In blob:http://localhost:8081/3a732971-c4ed-43dd-a0b0-e8e189bfa30e:142043 setDefaultDisplayArea (inside calculateRect callback) - fromRect: {"x":350,"y":20.571428298950195,"width":40.85714340209961,"height":40.85714340209961} blob:http://localhost:8081/3a732971-c4ed-43dd-a0b0-e8e189bfa30e:142043 setDefaultDisplayArea (inside calculateRect callback) - getDisplayArea(): {"x":10,"y":10,"width":391.4285583496094,"height":639.4285888671875} blob:http://localhost:8081/3a732971-c4ed-43dd-a0b0-e8e189bfa30e:142043 setDefaultDisplayArea (inside calculateRect callback) - displayAreaStore: {"x":10,"y":10,"width":391.4285583496094,"height":639.4285888671875} blob:http://localhost:8081/3a732971-c4ed-43dd-a0b0-e8e189bfa30e:26989 Running application "BoostMerchantApp" with appParams: {"rootTag":61}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF

Close app and open again (not working)
setDefaultDisplayArea - newDisplayArea: {"x":10,"y":10,"width":391.4285583496094,"height":639.4285888671875} blob:http://localhost:8081/3a732971-c4ed-43dd-a0b0-e8e189bfa30e:142043 measureContent - Waiting for resize to finish blob:http://localhost:8081/3a732971-c4ed-43dd-a0b0-e8e189bfa30e:142043 setDefaultDisplayArea (inside calculateRect callback) - fromRect: {"x":350,"y":20.571428298950195,"width":40.85714340209961,"height":40.85714340209961} blob:http://localhost:8081/3a732971-c4ed-43dd-a0b0-e8e189bfa30e:142043 setDefaultDisplayArea (inside calculateRect callback) - getDisplayArea(): {"x":10,"y":10,"width":391.4285583496094,"height":639.4285888671875} blob:http://localhost:8081/3a732971-c4ed-43dd-a0b0-e8e189bfa30e:142043 setDefaultDisplayArea (inside calculateRect callback) - displayAreaStore: undefined

It would be cool if the popoverStyle prop (and all other style props, would accept an array as all other RN elements with style prop do. The background here is to apply different styles through a hook (e.g. react-navigations useTheme hook).

const { colors } = useTheme()
<View style={[styles.modal, { backgroundColor: colors.background }]}>

I am showing popup but when i switched to arabic language. application direction get changed as below :

if(language == "arabic"){
I18nManager.allowRTL(true);
}

After allowing RTL when i tried to show popup screen stuck.

Hi,

I keep running in the same crash, takes a few seconds to popup but it always does.

Can't quite work out what's causing it.

I'm running it with Expo (v28).

Not sure what else to provide. Let me know what could help?

Ben

I had version 1.0.18 so i uninstalled and installed newest version 2.0.4, and onRequestClose wasn't working but onClose(deprecated) was working. How can i solve this?
The "Example" folder shows the use of onClose still

Unable to resolve module .../../react-navigation/src/views/CardStack/CardStackTransitioner

\node_modules\react-native-popover-view\src\PopoverStackNavigator.js`: Module does not exist in the module map

I have "react-navigation": "^1.5.11", installed

Hi,

Can you please suggest me how to add arrow style for rn-modal

<Popover
                        isVisible={this.state.isVisible}
                        mode={
                            'rn-modal'}
                        onRequestClose={() => this.closePopover()}>
                        <View style={{
                            backgroundColor: '#2f2f2f',
                            padding: 20,
                            width: normalize(260),
                        }}>

                         <Text>text</Tex>
                        </View>
                    </Popover>

So I've got a bit of a weird bug going on that I can't quite seem to figure out. On iOS devices, this popover appears correctly at the top of the view. But on android devices, it gets shoved into the middle, and the arrow is dead center on the screen:

However, this popover which is attached to an absolutely positioned element on the screen shows up correctly on both devices?

Sorry about the cropping, its not an open project. Happy to provide as much information as I can, just not sure exactly where to start in terms of providing helpful content.

Describe the bug
My app is set up to render under a translucent status bar but modals always avoid it. I'm using the rn-modal mode and it works alright but I can see the status bar area does not fade and the popover shifts around vertically after animating in sometimes. I suspect this is due to the status bar differences.

I see there is a statusBarTranslucent prop for Modal but there is no way for me to pass that in. I have tried the other modes but they do not work for my use case.

Device/Setup Info:

• Device: Moto e5 cruise, Samsung Galaxy S7 edge, Samsung Galaxy S10+
• OS: Android 8 to 10
• react-native version: 0.61 (Expo SDK 37)
• react-native-popover-view version: 2.0.7

Debug Output

componentWillReceiveProps - Awaiting popover show
setDefaultDisplayArea - newDisplayArea: {"x":10,"y":34,"width":340,"height":524}
setDefaultDisplayArea - displayAreaOffset: {"x":0,"y":0}
setDefaultDisplayArea (inside calculateRect callback) - fromRect
setDefaultDisplayArea (inside calculateRect callback) - getDisplayArea(): {"x":10,"y":34,"width":340,"height":524}
setDefaultDisplayArea (inside calculateRect callback) - displayAreaStore: {"x":10,"y":10,"width":340,"height":548}
setDefaultDisplayArea (inside calculateRect callback) - Triggering state update
handleGeomChange - requestedContentSize: : {"y":0,"height":290,"width":178.5,"x":0}
computeGeometry - displayArea: {"x":10,"y":34,"width":340,"height":524}
computeGeometry - fromRect: {}
handleGeomChange - Triggering popover move to: {"x":90.75,"y":151}
setDefaultDisplayArea - newDisplayArea: {"x":10,"y":10,"width":340,"height":548}
setDefaultDisplayArea - displayAreaOffset: {"x":0,"y":0}
setDefaultDisplayArea (inside calculateRect callback) - fromRect
setDefaultDisplayArea (inside calculateRect callback) - getDisplayArea(): {"x":10,"y":10,"width":340,"height":548}
setDefaultDisplayArea (inside calculateRect callback) - displayAreaStore: {"x":10,"y":34,"width":340,"height":524}
setDefaultDisplayArea (inside calculateRect callback) - Triggering state update
handleGeomChange - requestedContentSize: : {"y":0,"height":290,"width":178.5,"x":0}
computeGeometry - displayArea: {"x":10,"y":10,"width":340,"height":548}
computeGeometry - fromRect: {}
handleGeomChange - Triggering popover move to: {"x":90.75,"y":139}
measureContent - Showing Popover - requestedContentSize: {"y":0,"height":290,"width":178.5,"x":0}
computeGeometry - displayArea: {"x":10,"y":10,"width":340,"height":548}
computeGeometry - fromRect: {}
measureContent - Showing Popover - geom: {"popoverOrigin":{"x":90.75,"y":139},"anchorPoint":{"x":180,"y":284},"forcedContentSize":{"width":340,"height":548},"viewLargerThanDisplayArea":{"width":false,"height":false},"showArrow":false}
measureContent - Showing Popover - Animating In
getTranslateOrigin - popoverOrigin: {"x":90.75,"y":139}
getTranslateOrigin - popoverSize: {"width":178.5,"height":290}
getTranslateOrigin - anchorPoint: {"x":180,"y":284}
getTranslateOrigin - shift: {"hoizontal":0,"vertical":0}
animateIn - onOpenComplete - Calculated Popover Rect: {"x":91,"y":139,"width":178.5,"height":290}

This is the output from when the popover moved after animating in. We can see it started at Y=151 but then moved to Y=139. The status bar height is 24 and this is a difference of 12. This makes sense because the modal is set to be centered.

Describe the bug
There are two bugs that cause the initial calculation of the popover to frequently be incorrect and cause incorrect animate slide in effects.

• https://github.com/SteffeyDev/react-native-popover-view/blob/master/src/Popover.js#L912
  There is a race condition here with https://github.com/SteffeyDev/react-native-popover-view/blob/master/src/Popover.js#L902
  Line 902 gets triggered twice. If line 912 executes before the second event the bug happens. If the it executes after the second event the code acts correctly. I was able to fix this race condition by adding a setTimeout to line 912 with a delay of 1 to get it put the animation at the end of the call stack.

• https://github.com/SteffeyDev/react-native-popover-view/blob/master/src/Popover.js#L13
  That is calculated on import and therefore is not recalculated with the device rotates. This should be moved to a dynamically calculated value.

Device/Setup Info:

• Device: iPad Air Simulator
• OS: iOS 13.3
• react-native version: 0.61
• react-native-popover-view version: 2.04

Screenshots

Hi,
I'm facing some reference issue while placing common popover for all text box presented in screen. Any solution?

I think this may be related to #16 . Ever since I updated to react-native 0.57, whenever I try to open the popover the entire app just "freezes". I suspect that there is some sort of invisible overlay blocking all user interaction because I can still shake to refresh and access dev menu.

How can I change arrow position ? this is so important for my UI

Thanks for the great work.

It'd be great if it could change the arrow color of the popover.
What do you think about accepting style prop?

I have had 0 issues using it, it worked flawlessly, the documentation is clear and concise, the usage is obvious, and within minutes I had popups working in my app.

This is seriously the best RN component I've ever used.

It's promising but the demo app didn't work on Android at all.
Any plan to support Android?

Thanks for all the work put into this repo. It works really well. However I tried upgrading to react-navigation v2.12.1 and I keep getting this error:

error: bundling failed: Error: Unable to resolve module ../../react-navigation/src/views/StackView/StackView from /.../node_modules/react-native-popover-view/src/PopoverStackNavigator.js: The module ../../react-navigation/src/views/StackView/StackView could not be found from /..../node_modules/react-native-popover-view/src/PopoverStackNavigator.js. Indeed, none of these files exist:

I am not using this library for react navigation integration, I just want the component. Is there a way to turn off this react-navigation integration option? It is causing more headaches than it solves.

I'm using v1.0.5 of this repo.

Hello!

It works perfectly in the iOS simulator; however, I have tested on a physical device (both iPhone and iPad) and it does not render.

In fact, trying to present the popover actually crashes the app with no error... it just freezes. I really liked this library but this is a deal-breaker. I am building with Xcode 9.4.1

For some reason, on Android only, when the popover is showing when the device is landscape, the arrow is smaller than it should be when it is set to a non-standard size.

I want to open pop over without dim effect, I have tried to use mode = {'tooltip} but after using mode popover is not opening. It's working fine with 'rn-modal' .

<Popover isVisible={this.state.modalVisible} mode={"tooltip"} popoverStyle={{ backgroundColor: 'transparent' }} onRequestClose={() => this.setState({ modalVisible: false, selectedItem: "" }) } >

I am testing out this package in Expo by running the full example, but it does not seem to be working: https://snack.expo.io/@jadchaar/popover-demo. Any ideas?

Setting animationConfig to {duration: 100} results in a TS error. Maybe something changed on the RN side of the type definitions?

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<PopoverViewProps>): Popover', gave the following error.
    Property 'toValue' is missing in type '{ duration: number; }' but required in type 'TimingAnimationConfig'.
  Overload 2 of 2, '(props: PopoverViewProps, context?: any): Popover', gave the following error.
    Property 'toValue' is missing in type '{ duration: number; }' but required in type 'TimingAnimationConfig'.

• react-native version: 0.60.5
• react-native-popover-view version: 2.0.5
• typescript version: 3.6.3

edit: small additional unrelated TS issue, Popover.MODE constants aren't in the .d.ts file resulting in TS errors when they are referenced.

Running on React Native 0.55.4

I noticed that the default styles for the popover include a box shadow around the view. Unfortunately, this doesn't seem to be displaying.

It seems that the issue might be a conflict with Animated.View and the boxShadow styles. If I manually hack it so that the styles get applied to a regular View child below the Animated.View, the shadow displays as expected.

I pasted the "Standalone" example into my project. At the top of the file:

import Popover from 'react-native-popover-view'

In render:

<Popover
      isVisible={this.state.isVisible}>
      <Text>Hello, world.</Text>
</Popover>

It simply does not work... there are no errors but nothing shows up. I am using an iOS simulator (yes, this.state.isVisible is true). Is there some other setup required or what? I thought the width and size props were optional.