Fix - using the new useWindowDimensions api to fix unmounting issues

src/Modal.js

@@ -1,159 +1,17 @@
-import React, { Component } from "react";
+import React, { useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import {
   Animated,
-  DeviceEventEmitter,
-  Dimensions,
   Easing,
   Modal as ReactNativeModal,
   StyleSheet,
   TouchableWithoutFeedback,
+  useWindowDimensions,
 } from "react-native";
 
 const MODAL_ANIM_DURATION = 300;
 const MODAL_BACKDROP_OPACITY = 0.4;
 
-export class Modal extends Component {
-  static propTypes = {
-    onBackdropPress: PropTypes.func,
-    onHide: PropTypes.func,
-    isVisible: PropTypes.bool,
-    contentStyle: PropTypes.any,
-  };
-
-  static defaultProps = {
-    onBackdropPress: () => null,
-    onHide: () => null,
-    isVisible: false,
-  };
-
-  state = {
-    isVisible: this.props.isVisible,
-    deviceWidth: Dimensions.get("window").width,
-    deviceHeight: Dimensions.get("window").height,
-  };
-
-  animVal = new Animated.Value(0);
-  _isMounted = false;
-
-  static _deviceEventEmitter = null;
-
-  componentDidMount() {
-    this._isMounted = true;
-    if (this.state.isVisible) {
-      this.show();
-    }
-    this._deviceEventEmitter = DeviceEventEmitter.addListener(
-      "didUpdateDimensions",
-      this.handleDimensionsUpdate
-    );
-  }
-
-  componentWillUnmount() {
-    this._deviceEventEmitter.remove();
-    this._isMounted = false;
-  }
-
-  componentDidUpdate(prevProps: ModalPropsType) {
-    if (this.props.isVisible && !prevProps.isVisible) {
-      this.show();
-    } else if (!this.props.isVisible && prevProps.isVisible) {
-      this.hide();
-    }
-  }
-
-  handleDimensionsUpdate = (dimensionsUpdate) => {
-    const deviceWidth = dimensionsUpdate.window.width;
-    const deviceHeight = dimensionsUpdate.window.height;
-    if (
-      deviceWidth !== this.state.deviceWidth ||
-      deviceHeight !== this.state.deviceHeight
-    ) {
-      this.setState({ deviceWidth, deviceHeight });
-    }
-  };
-
-  show = () => {
-    this.setState({ isVisible: true });
-    Animated.timing(this.animVal, {
-      easing: Easing.inOut(Easing.quad),
-      // Using native driver in the modal makes the content flash
-      useNativeDriver: false,
-      duration: MODAL_ANIM_DURATION,
-      toValue: 1,
-    }).start();
-  };
-
-  hide = () => {
-    Animated.timing(this.animVal, {
-      easing: Easing.inOut(Easing.quad),
-      // Using native driver in the modal makes the content flash
-      useNativeDriver: false,
-      duration: MODAL_ANIM_DURATION,
-      toValue: 0,
-    }).start(() => {
-      if (this._isMounted) {
-        this.setState({ isVisible: false }, this.props.onHide);
-      }
-    });
-  };
-
-  render() {
-    const {
-      children,
-      onBackdropPress,
-      contentStyle,
-      backdropStyle,
-      ...otherProps
-    } = this.props;
-    const { deviceHeight, deviceWidth, isVisible } = this.state;
-    const backdropAnimatedStyle = {
-      opacity: this.animVal.interpolate({
-        inputRange: [0, 1],
-        outputRange: [0, MODAL_BACKDROP_OPACITY],
-      }),
-    };
-    const contentAnimatedStyle = {
-      transform: [
-        {
-          translateY: this.animVal.interpolate({
-            inputRange: [0, 1],
-            outputRange: [deviceHeight, 0],
-            extrapolate: "clamp",
-          }),
-        },
-      ],
-    };
-    return (
-      <ReactNativeModal
-        transparent
-        animationType="none"
-        visible={isVisible}
-        {...otherProps}
-      >
-        <TouchableWithoutFeedback onPress={onBackdropPress}>
-          <Animated.View
-            style={[
-              styles.backdrop,
-              backdropAnimatedStyle,
-              { width: deviceWidth, height: deviceHeight },
-              backdropStyle,
-            ]}
-          />
-        </TouchableWithoutFeedback>
-        {isVisible && (
-          <Animated.View
-            style={[styles.content, contentAnimatedStyle, contentStyle]}
-            pointerEvents="box-none"
-          >
-            {children}
-          </Animated.View>
-        )}
-      </ReactNativeModal>
-    );
-  }
-}
-
 const styles = StyleSheet.create({
   container: {
     position: "absolute",
@@ -177,4 +35,104 @@ const styles = StyleSheet.create({
   },
 });
 
+const Modal = ({
+  backdropStyle,
+  children,
+  contentStyle,
+  isVisible,
+  onBackdropPress,
+  onHide,
+  ...otherProps
+}) => {
+  const animVal = useRef(new Animated.Value(0)).current;
+  const visibility = useRef(isVisible);
+  const isMounted = useRef(false);
+  const { height, width } = useWindowDimensions();
+  const backdropAnimatedStyle = {
+    opacity: animVal.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, MODAL_BACKDROP_OPACITY],
+    }),
+  };
+  const contentAnimatedStyle = {
+    transform: [
+      {
+        translateY: animVal.interpolate({
+          inputRange: [0, 1],
+          outputRange: [height, 0],
+          extrapolate: "clamp",
+        }),
+      },
+    ],
+  };
+
+  useEffect(() => {
+    if (!visibility) {
+      visibility.current = true;
+      Animated.timing(animVal, {
+        easing: Easing.inOut(Easing.quad),
+        // Using native driver in the modal makes the content flash
+        useNativeDriver: false,
+        duration: MODAL_ANIM_DURATION,
+        toValue: 1,
+      }).start();
+    } else if (visibility) {
+      Animated.timing(animVal, {
+        easing: Easing.inOut(Easing.quad),
+        // Using native driver in the modal makes the content flash
+        useNativeDriver: false,
+        duration: MODAL_ANIM_DURATION,
+        toValue: 0,
+      }).start(() => {
+        if (isMounted) {
+          visibility.current = false;
+          onHide();
+        }
+      });
+    }
+  }, [animVal, onHide, visibility]);
+
+  return (
+    <ReactNativeModal
+      transparent
+      animationType="none"
+      visible={visibility}
+      {...otherProps}
+    >
+      <TouchableWithoutFeedback onPress={onBackdropPress}>
+        <Animated.View
+          style={[
+            styles.backdrop,
+            backdropAnimatedStyle,
+            { width, height },
+            backdropStyle,
+          ]}
+        />
+      </TouchableWithoutFeedback>
+      {isVisible && (
+        <Animated.View
+          style={[styles.content, contentAnimatedStyle, contentStyle]}
+          pointerEvents="box-none"
+        >
+          {children}
+        </Animated.View>
+      )}
+    </ReactNativeModal>
+  );
+};
+
+Modal.propTypes = {
+  onBackdropPress: PropTypes.func,
+  onHide: PropTypes.func,
+  isVisible: PropTypes.bool,
+  contentStyle: PropTypes.any,
+};
+
+Modal.defaultProps = {
+  onBackdropPress: () => null,
+  onHide: () => null,
+  isVisible: false,
+  contentStyle: {},
+};
+
 export default Modal;