Can't able to access the popover element in iOS device (Appium)

[Ram2103]

We cannot able to access the popover element in iOS device using Appium, whereas we can able locate the popover element in Android device.

[SteffeyDev]

I'm not familiar with Appium, does it work on a normal iOS device or the official simulator?

[Ram2103]

In official simulator we can't able to access the popover mobile element.

[SteffeyDev]

Ok, I'll need a lot more details if you expect any help with this. As this library has worked for a lot of people, the issue is most likely with your setup. I would be happy to help if you can provide detailed reproduction steps.

[ben-wright]

@Ram2103 @SteffeyDev The bug seems to lie with React Native or Appium. Elements which have position: absolute nested within <Modal> do not seem to appear in appium.

To get round this with this when using react-native-popover-view simply apply add popoverStyle prop with relative position.

eg:
<Popover popoverStyle={{position: 'relative'}}></Popover>

[SteffeyDev]

Interesting, I can add this to the troubleshooting steps. Are there any side affects when you use this work-around in appium?

[ben-wright]

Only downside I see is that it can potentially be awkard to style the modal as it'll need relative positioning

[mochi08]

Running into same issue here. In iOS, elements inside the popover are not selectable in Appium. Adding position:relative does indeed make the elements selectable, but styling will be tricky. I'm struggling to get my popover to size dynamically with position:relative.

Interesting thing I found is that react-native-popover-view works perfectly with Appium in andorid but not in iOS; on the other hand, react-native-modal-popover works correctly with Appium in iOS but not in android. Frustrating.

[SteffeyDev]

That is really interesting @mochi08. I just peaked through the source code of react-native-modal-popover, it also uses position: absolute inside a modal, so maybe there's something else going on?

[quizzyDev]

First of all thanks @SteffeyDev for a great package and responding to us when we need help 🍻
...
This is a really weird issue with Appium as absolutely positioned elements within a rn-modal are sometimes visible in appium desktop and sometimes they're not. (If anyone knows what the pattern is please let us know).

The fix that I used for both v4.1.0 and v5.1.2 was by setting one of the View elements to have position: relative.
For v5.1.2 though I had to do a bit of digging as the issue wasn't caused by the immediate View element around the children.

tldr; Patch for v5.1.2:

diff --git a/node_modules/react-native-popover-view/dist/BasePopover.js b/node_modules/react-native-popover-view/dist/BasePopover.js
index d6c290c..2bb3458 100644
--- a/node_modules/react-native-popover-view/dist/BasePopover.js
+++ b/node_modules/react-native-popover-view/dist/BasePopover.js
@@ -408,7 +408,7 @@ var BasePopover = /** @class */ (function (_super) {
             React.createElement(Animated.View, { pointerEvents: "box-none", style: containerStyle },
                 this.props.showBackground !== false && (React.createElement(TouchableWithoutFeedback, { onPress: this.props.onRequestClose },
                     React.createElement(Animated.View, { style: backgroundStyle }))),
-                React.createElement(View, { pointerEvents: "box-none", style: __assign({ top: 0, left: 0 }, shadowStyle) },
+                React.createElement(View, { pointerEvents: "box-none", style: { position: 'relative', flex: 1 } },
                     React.createElement(Animated.View, { style: transformStyle },
                         React.createElement(View, { ref: this.popoverRef, style: contentWrapperStyle, onLayout: function (evt) {
                                 var layout = __assign({}, evt.nativeEvent.layout);

I'd recommend patching the package before running tests and then unpatching after, rather than using this patch permanently as it may not work as @SteffeyDev intended.

[mochi08]

@quizzyDev your solution is awesome! I'm using v4.1.0 and applied the fix in dist/Popover.js. Now I don't have to add "position: relative" whenever I use the popover and it's working in Appium. What's more is that it doesn't result in the same styling issues as before. I haven't found any problem with any of my popovers yet. Thank you very much!

[SteffeyDev]

I'll run some tests on this patch and see if this works, I would be fine including this change in the repo if there's no downsides.

[quizzyDev]

@SteffeyDev - Just updated to 5.1.4 and I can see the above patch in the compiled BasePopover.js and the BasePopover.tsx file. However I don't see the changes in the master branch atm - Just thought I'd point it out in case this wasn't intentional.

[SteffeyDev]

Thanks for bringing this to my attention, I had been experimenting and forgetting to stash before building. I re-released as 5.1.5 without these changes, I need to do more testing to make sure that won't break anything. However, I suppose you can stick with 5.1.4 if it works for you and fixes the appium issue.

[quizzyDev]

No worries @SteffeyDev - I thought that'd be the case.