onLayout not triggered or even crash the app

[F4b1n0u]

Hi guys,
I just create a project from expo XDE
and added

onLayout={(event) => {console.log('event:', event)}}

on the View, it is never triggered ...

I added as well on the Text, it crashed Expo client app

is someone have an idea ?

here is the App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View
        style={styles.container}
        onLayout={(event) => {console.log('event:', event)}}
      >
        <Text
          onLayout={(event) => {console.log('event:', event)}}
        >Open up App.js to start working on your app!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

and the generated package.json

{
  "name": "my-new-project",
  "version": "0.0.0",
  "description": "Hello Expo!",
  "author": null,
  "private": true,
  "main": "node_modules/expo/AppEntry.js",
  "dependencies": {
    "expo": "^19.0.0",
    "react": "16.0.0-alpha.12",
    "react-native": "https://github.com/expo/react-native/archive/sdk-19.0.0.tar.gz"
  }
}

[ide]

The problem may be that the event object has fields that are cyclic or otherwise unserializable. Try logging event.nativeEvent (which is the ViewLayout object) instead.

[w-]

I also ran into this also and spent a lot of time trying to uncover the root cause.
https://forums.expo.io/t/genymotion-suddenly-constantly-crashing/2312/

@ide is this issue specific to xde? i.e. does xde implement a custom console.log?

[ide]

XDE does implement custom.console log since it has to move data from your phone to your computer. It uses pretty-format (https://github.com/facebook/jest/tree/master/packages/pretty-format) to serialize the data.

[w-]

@ide Does it make sense that XDE's custom console.log should handle this case more gracefully?

[Fr33maan]

If object is circular, it would be nice to automatically decycle it instead of crashing.
This do the trick for me
https://github.com/douglascrockford/JSON-js/blob/master/cycle.js

[nicknovitski]

@ide @w- @L1br3 It looks like pretty-format works with object cycles.

Are you all still having the problem?

[w-]

@nicknovitski i am. From what you linked, pretty-format is part of jest? The recommendation is we use that inside of console.log?

[FezVrasta]

For anyone running into this issue, you can use something like json-decycle and do:

import { decycle } from 'json-decycle';

onLayout={evt => console.log(decycle(evt))}