Detox: Touchable inside FullWindowOverlay can't be pressed by Detox

What happened?

We have a custom Toast component that is using FullWindowOverlay (by react-native-screens) so we can display a Toast even above Modals. However when we’re trying to tap on a touchable inside this detox fails to do so. We get the following error message:

Test Failed: View is not hittable at its visible point. Error: Failed to hit view with identifier `toast-pressable` at point {207, 805.5} with hit-test
    - Origin view: <RCTRootView: 0x7fb332b06ee0; frame = (0 0; 414 896); autoresize = W+H; backgroundColor = <UIDynamicSystemColor: 0x600003c57ec0; name = systemBackgroundColor>; layer = <CALayer: 0x600002945a00>>
    - Absolute origin: {0, 0}
    - Hit: <RCTView: 0x7fb322818320; reactTag: 17; frame = (0 48; 414 814); backgroundColor = UIExtendedSRGBColorSpace 1 1 1 1; layer = <CALayer: 0x6000029412c0>>
    - Target view: <RCTView: 0x7fb332a08490; reactTag: 45; frame = (16 0; 382 17); layer = <CALayer: 0x600002f80300>>
    - Relative point: {207, 805.5}

If I replace FullWindowOverlay with a plain View tests works fine.

What was the expected behaviour?

Touchables inside FullWindowOverlay should also be tappable by Detox

Was it tested on latest Detox?

I have tested this issue on the latest Detox release and it still reproduces.

Did your test throw out a timeout?

I have followed the instructions under Identifying which synchronization mechanism causes us to wait too much.

Help us reproduce this issue!

https://drive.google.com/file/d/1owxETvumtwaSicHpp8moAtda3AEdNQ2t/view?usp=sharing

In what environment did this happen?

Detox version: 20.0.3 React Native version: 0.70.6 Node version: v14 latest Device model: iPhone 11 iOS version: 16.0 macOS version: 12.6 Xcode version: 14.0 Test-runner (select one): jest

Detox logs

paste logs here!

Device logs

paste logs here!

More data, please!

No response

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 1
Comments: 26 (13 by maintainers)

Most upvoted comments

@adamivancza in your reproduction project, it seems that you’re using FullWindowOverlay, which doesn’t have a style property but you’re still passing it a style attribute.

See react-native-screens’ documentation: https://github.com/software-mansion/react-native-screens#fullwindowoverlay

You should treat it as a wrapper, providing full-screen, transparent view which receives no props and should ideally render one child View, being the root of its view hierarchy.

Based on their documentation, I made my own reproduction of this component test (with FullWindowOverlay) and it passes the test.

See this commit for a reference: https://github.com/wix/Detox/commit/f652500a30eddde5f0dc48f91a1482997874cb85

`ToastScreen` Component:

const ToastScreen = () => {
  const [showToast, setShowToast] = useState(false);

  return (
    <View style={styles.container}>
      <TouchableOpacity
        testID="toggle-toast-button"
        onPress={() => {
          setShowToast(!showToast);
        }}>
        <Text>Show/Hide Window Overlay Toast</Text>
      </TouchableOpacity>

      <Toast visible={showToast} />
    </View>
  );
};

const Toast = ({visible}) => {
  return visible ? (
    <FullWindowOverlay>
      <View style={styles.toastContainer}>
        <Pressable testID="toast-button" style={styles.toastView}>
          <Text>Toast Button</Text>
        </Pressable>
      </View>
    </FullWindowOverlay>
  ) : null;
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  toastContainer: {
    position: 'absolute',
    width: '100%',
    bottom: 0,
    left: 0,
    right: 0,
    justifyContent: 'center',
    alignItems: 'center',
  },
  toastView: {
    padding: 20,
    margin: 20
  }
});

export default ToastScreen;

Test:

it('should be able to tap on toast button (overlay toast)', async () => {
    await element(by.id('toggle-toast-button')).tap();
    await expect(element(by.id('toast-button'))).toBeVisible();

    await element(by.id('toast-button')).tap();

    await element(by.id('toggle-toast-button')).tap();
    await expect(element(by.id('toast-button'))).not.toBeVisible();
  });

asafkorem on Feb 26, 2023

@asafkorem sorry for the late reply here but my repro project still fails with the same issue even with 20.1.1

adamivancza on Jan 16, 2023

@adamivancza please check the commit I provided you. I see no issue with Touchable inside FullWindowOverlay, so there might be a different issue here. Please use my commit as a reference for working with FullWindowOverlay: https://github.com/wix/Detox/issues/3728#issuecomment-1445395118

asafkorem on Mar 2, 2023

@asafkorem here is a repro project using your template project detoxtemplate.zip

Thank you!!! We will look into it asap

d4vidi on Feb 26, 2023