Search code examples
javascriptreact-nativemobxscreen-orientation

How to catch when screen orientation change in react native with mobx?


Can you explain me the right way to handle orientation changing in react native app with mobX. For now I have tried make something like this:

@observer
export class ChartSTMWork extends Component {
  currwidth = Dimensions.get("window").width;
  render() {
    this.currwidth = Dimensions.get("window").width;
    return();
  }
}

But this code change the currWidth only if render call. And in situation when I have already rendered table and change orientation of smartphone after this render, there is no effect to currWidth variable.

Or maybe I need to use some small timer to check Dimensions.get("window").width and make currWidth observable?

 @observer
    export class ChartSTMWork extends Component {
      @observable currwidth = Dimensions.get("window").width;
      someTimerEvery200ms(){
         currwidth = Dimensions.get("window").width
      }
 }

But this solution is looks like dirty solution.

How I need to handle this in right way?


Solution

  • Solve by this solution. Maybe it's will be heplful for someone

      eventToDemension = Dimensions.addEventListener("change", (e) => {
        this.currwidth = e.window.width;
      });
      @observable currwidth = Dimensions.get("window").width;