View pointerEvents not working on release builds only

[slorber]

• glamorous-native version: 1.1.3 or 2.0.0
• react-native version: 50 (Expo SDK23)
• react version: 16

I have a Glamorous View in my app with pointerEvents="none" that is fullscreen (it's an invisible layer on top of my app on which I use to display toasts)

I upgraded from Expo SDK 22(RN49, React 16 alpha6) to SDK23 (RN 50, React 16.0.0), and that invisible View started to intercept all touch events instead of letting them pass to the underlying layer. Note my Expo project is detached (not sure it's relevant).

It affects both Android and iOS, and ONLY in release mode. When the apps are run in Android debug or iOS debug, it does not happen.

Note that as of React 16 upgrade I had to bump Glamorous-native too (from 1.0.0 to 1.1.3).

I suspect this bug is related to Glamorous-native because:

This only works in debug:

const ToastSurface = ({ children }) => (
  <View
    position="absolute"
    zIndex={1}
    width="100%"
    height="100%"
    pointerEvents="none"
    justifyContent="flex-end"
    paddingBottom={55}
  >
    {children}
  </View>
);

This always works in both debug + release:

const ToastSurface = ({ children }) => (
  <ReactNativeView
    style={{
      position: 'absolute',
      zIndex: 1,
      width: '100%',
      height: '100%',
      pointerEvents: 'none',
      justifyContent: 'flex-end',
      paddingBottom: 55,
    }}
    pointerEvents="none"
  >
    {children}
  </ReactNativeView>
);

This looks related to #81

[atticoos]

Hey @slorber, thanks for the detailed report.

As a heads up, I won't have too much time this week to investigate this.

I'd like to verify and try something if you do have some time:

• To verify, pointerEvents is a view property, not a style right?

Secondly, does anything change at all when you create a View through the factory function? Main difference here is that we don't try to detect "style properties" (like glamorous.View) to avoid forwarding them:

const StyledView = glamorous.view({
      position: 'absolute',
      zIndex: 1,
      width: '100%',
      height: '100%',
      justifyContent: 'flex-end',
      paddingBottom: 55
})

...

<StyledView pointerEvents="none" />

Your mention that this only happens in release mode has me feeling that this doesn't change anything.. but would like to still rule it out.

The only difference between release modes in glamorous-native is freezing the theme from the ThemeProvider

[slorber]

Hi,

Yes pointerEvents is supposed to be a View prop only, not even in layout/style props of RN:

https://github.com/facebook/react-native/blob/36ad8138997c195b8728906ceb51bd31338b6a24/Libraries/Components/View/ReactNativeViewAttributes.js

Just tried the factory function and I also get the bug with it.

And yes, it really only affects releases, not debug. So it's not even easy to debug because for example with Expo you have to publish before being able to see the issue.

I suspect no commit in this lib broke anything but rather there's something different in RN50 on which you can't rely anymore

[slorber]

@ajwhite I'll try to make another bug report for that, but I get currently a serious bug in our application that happens only in production bundle.

All our <TouchableWithoutFeedback> of our app never fire the onPress callback, only in release mode. Replacing them as-in with <TouchableOpacity> does always work. Note that this is the case for both glamorous-native and react-native imports. In all cases my children is a glamorous view. The difference between the 2 components is that one is cloning the children view, while the other is wrapping it in another view.

I'll try to give more details as soon as possible as this bug is critical for our release, but there's definitively something wrong going on here imho :)

[chrismllr]

I've upgraded to version 1.3.0, the fix in #85 seems to have resolved the issue for me 👍

[atticoos]

Thanks @chrismllr, looks to be the case 👍