Use componentDidUpdate instead of componentWillReceiveProps on Backdr…

…op component

src/components/Backdrop.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React, { Component } from 'react';
-import { StyleSheet, TouchableOpacity, Animated, Dimensions } from 'react-native';
+import { StyleSheet, TouchableOpacity, Animated } from 'react-native';
 import type { BackdropProps } from '../type';
 
 export default class Backdrop extends Component<BackdropProps> {
@@ -14,10 +14,15 @@ export default class Backdrop extends Component<BackdropProps> {
     onPress: () => {},
   };
 
-  componentWillReceiveProps(nextProps: BackdropProps) {
-    const { visible, useNativeDriver, animationDuration: duration } = this.props;
-    if (visible !== nextProps.visible) {
-      const toValue = nextProps.visible ? nextProps.opacity : 0;
+  componentDidUpdate(prevProps: BackdropProps) {
+    const {
+      visible,
+      useNativeDriver,
+      opacity,
+      animationDuration: duration,
+    } = this.props;
+    if (prevProps.visible !== visible) {
+      const toValue = visible ? opacity : 0;
       Animated.timing(this.opacity, {
         toValue,
         duration,
@@ -35,17 +40,13 @@ export default class Backdrop extends Component<BackdropProps> {
   render() {
     const { onPress, pointerEvents, backgroundColor } = this.props;
     const { opacity } = this;
-    const { width, height } = Dimensions.get('window');
     return (
       <Animated.View
         pointerEvents={pointerEvents}
-        style={{
-          width: width * 3,
-          height: height * 3,
-          position: 'absolute',
+        style={StyleSheet.flatten([StyleSheet.absoluteFill, {
           backgroundColor,
           opacity,
-        }}
+        }])}
       >
         <TouchableOpacity
           onPress={onPress}