A Generic React Native Higher Order Component for a Loading Screen

LoadingView.js

import React from 'react';
import { View, ActivityIndicator, Dimensions } from 'react-native'
import * as Animatable from 'react-native-animatable'; // TODO: Please install react-native-animatable as a dependency

const window = Dimensions.get('window');

export default class LoadingView extends React.Component {
  componentWillUpdate(nextProps) {
    const { loading } = this.props;
    if (this.refs.view && loading !== nextProps.loading) {
      this.refs.view.fadeIn(300);
    }
  }

  render() {
    const { loading, children } = this.props;
    let appliedStyle = {flex: 1};
    return (
      <Animatable.View ref="view" style={appliedStyle}>
        {loading &&
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
          <ActivityIndicator size="large" />
        </View>}
        {!loading && children}
      </Animatable.View>
    );
  }
}