How to do it...

  1. We'll start by opening App.js and adding the imports we'll be using:
import React from 'react';
import {
  Dimensions,
  StyleSheet,
  Text,
  View
} from 'react-native';
  1. Next, we'll add the empty App class for the component, along with some basic styles:
export default class App extends React.Component {

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  text: {
    fontSize: 40,
  }
});
  1. With the shell of our app in place, we can now add the render method. In the render method, you'll notice we've got a View component using the onLayout property, which will fire off whenever the orientation of the device changes. The onLayout will then run this.handleLayoutChange ...

Get React Native Cookbook - Second Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.