React Native Cookbook - Second Edition

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';

2. 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,
  }
});

3. 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 ...