CODEWITHSUNDEEP
reactjsreact-nativereactxp
Jonathan
Jonathan

Reputation: 32868

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

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?

Upvotes: 0

Views: 1353

Answers (1)

Jonathan
Jonathan

Reputation: 32868

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.

Upvotes: 2

Related Questions