How to detect screen size change / device rotation in ReactXP?

Question

Is there, say, an event I can hook up to, to detect a screen size change, so that I can make my elements responsively resize themselves?

I'm half-way there, in that I can retrieve the current size of my top-level element, through the UserInterface API:

  UserInterface.measureLayoutRelativeToWindow(that).then(dimensions => {
    // dimensions.width, dimensions.height
  });

But this is just a one-off call. I now want to subscribe a handler that will get called whenever the "window" resizes. E.g. a desktop user resizes the browser window or a mobile user rotates the device 90°.

Does ReactXP have an API for this yet?

please refer to this package https://github.com/yamill/react-native-orientation — Harrison, Jul 25 '18 at 14:01
+Harrison thanks , I’ll check that out. However I’m wondering if ReactXP itself implements this. I would prefer to use a ReactXP interface that works across web and native, as opposed to hacking in a react-native call. — Jonathan, Jul 25 '18 at 14:13

Jonathan · Accepted Answer · 2018-08-09T19:16:10.383

Ok, found the solution: subscribing to the onLayout event of the View component causes the handler to fire whenever the window or screen size changes (including rotation).

Code:

onLayout() {
  UserInterface
    .measureLayoutRelativeToWindow(this)
    .then(screenSize =>
      console.log("event", event));
}

onLayout(event: ViewOnLayoutEvent) {
    console.log("event", event);
}

...
<View onLayout={this.onLayout}>
    ...
</View>

Output:

event {x: 0, y: 0, width: 840, height: 1639}

I guess this is consistent with the onLayout event of ReactNative's View component.

For this to work, the View has to be the top-level element of the React tree. It won't work for a View nested within something else.

How to detect screen size change / device rotation in ReactXP?

1 Answers1