glamorous.View onLayout is not called in production Android builds

[esamattis]

• glamorous-native version: 1.20
• react-native version: 0.50
• react version: 16.1.0

Relevant code:

import React, {Component} from "react";
import {AppRegistry, Text, View} from "react-native";

import g from "glamorous-native";

class Glamorous extends React.Component {
    state = {
        num: 0,
    };

    render() {
        return (
            <g.View
                padding={50}
                onLayout={() => {
                    this.setState({num: this.state.num + 1});
                }}
            >
                <g.Text>Glamorous {this.state.num}</g.Text>
            </g.View>
        );
    }
}

class Native extends React.Component {
    state = {
        num: 0,
    };

    render() {
        return (
            <View
                style={{padding: 50}}
                onLayout={() => {
                    this.setState({num: this.state.num + 1});
                }}
            >
                <Text>Native {this.state.num}</Text>
            </View>
        );
    }
}

const App = () => (
    <View>
        <Native />
        <Glamorous />
    </View>
);

AppRegistry.registerComponent("app", () => App);

In the example code both numbers should be in the initial view 1 and they should increase when ever the device is rotated.

This works with iOS (dev&prod) and with Android development but not with productions builds. The number stays at 0.

The issue is with factory generated views too

const MyView = g.view({
    padding: 50,
});

[kay-is]

Got the same problem with version 1.1.1 after updating to Expo 22.

Did a few hours of research.

It worked with RN 0.46 but doesn't with 0.49

@epeli what was the last RN version that worked for you?

It works when I replace the View with TouchableOpacity (but I can't use buttons anymore) or ScrollView (which messes up the layout)

I saw most of the code hasn't changed since may, so it seems to have something todo with RN. Somehow the View behaves differently now.

Also, most of the glamorous-native code is the same for all components, so it has to be something that only changed for the View

[atticoos]

Great report, and thanks for taking a look @kay-is.

I wonder if onLayout is getting treated like ref where it doesn't forward the same way as other props. However, that still wouldn't explain it never becoming called.

I'd like to experiment with onLayout on a simple higher order component of a View and see if that becomes called:

function Parent (props) {
  return <View {...props} />
}

<Parent style={{width: 50, height: 50}} onLayout={e => console.log('reached', e} />

[atticoos]

Didn't mean to close!

[kay-is]

Oh, and glamorous.View doesn't seem to render at all in my app. When I just render <glamorous.View><Text>Hello</Text></glamorous.View> I get a white screen. When I replace it with <View><Text>Hello</Text></View> it renders Hello.

[kay-is]

I just upgraded to 1.2.0 and now it works again, lol...

[atticoos]

Ah!

There was an incompatibility with React 16, which was fixed in #72. Apparently passing children as properties via React.createElement stops working in 16. That was released in 1.1.3.

With that upgrade, @kay-is, does onLayout now become called?

[esamattis]

@kay-is

@epeli what was the last RN version that worked for you?

I have only used glamorous-native with 0.49 and 0.50 and if I recall correctly it was broken on 0.49 too.

[slorber]

@epeli I have encountered a similar bug, after upgrading to Expo SDK 23 (detached, React 1.0.0, RN50) where it seems the pointerEvents view attribute does not work, only on release builds, for both Android and iOS. Using regular RN view solved the problem. #83

[atticoos]

Fixed by #85