Merge branch 'patch-v1.2.6'

Author: Tim Roberts

example/App.tsx

@@ -1,21 +1,21 @@
 import React, { useMemo, useState } from "react";
 import {
-    Dimensions,
     ScrollView,
     StyleSheet,
     Text,
     TouchableOpacity,
     View,
+    useWindowDimensions,
 } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
 
 import { TimerPicker, TimerPickerModal } from "./src";
 
 import { formatTime } from "./utils/formatTime";
 
-const { width: screenWidth } = Dimensions.get("window");
-
 export default function App() {
+    const { width: screenWidth } = useWindowDimensions();
+
     const [showPickerExample1, setShowPickerExample1] = useState(false);
     const [showPickerExample2, setShowPickerExample2] = useState(false);
     const [alarmStringExample1, setAlarmStringExample1] = useState<
@@ -27,7 +27,12 @@ export default function App() {
 
     const renderExample1 = useMemo(() => {
         return (
-            <View style={[styles.container, styles.page1Container]}>
+            <View
+                style={[
+                    styles.container,
+                    styles.page1Container,
+                    { width: screenWidth },
+                ]}>
                 <Text style={styles.textDark}>
                     {alarmStringExample1 !== null
                         ? "Alarm set for"
@@ -74,11 +79,16 @@ export default function App() {
                 />
             </View>
         );
-    }, [alarmStringExample1, showPickerExample1]);
+    }, [alarmStringExample1, screenWidth, showPickerExample1]);
 
     const renderExample2 = useMemo(() => {
         return (
-            <View style={[styles.container, styles.page2Container]}>
+            <View
+                style={[
+                    styles.container,
+                    styles.page2Container,
+                    { width: screenWidth },
+                ]}>
                 <Text style={styles.textLight}>
                     {alarmStringExample2 !== null
                         ? "Alarm set for"
@@ -122,11 +132,16 @@ export default function App() {
                 />
             </View>
         );
-    }, [alarmStringExample2, showPickerExample2]);
+    }, [alarmStringExample2, screenWidth, showPickerExample2]);
 
     const renderExample3 = useMemo(() => {
         return (
-            <View style={[styles.container, styles.page3Container]}>
+            <View
+                style={[
+                    styles.container,
+                    styles.page3Container,
+                    { width: screenWidth },
+                ]}>
                 <TimerPicker
                     padWithNItems={2}
                     hourLabel=":"
@@ -150,11 +165,16 @@ export default function App() {
                 />
             </View>
         );
-    }, []);
+    }, [screenWidth]);
 
     const renderExample4 = useMemo(() => {
         return (
-            <View style={[styles.container, styles.page4Container]}>
+            <View
+                style={[
+                    styles.container,
+                    styles.page4Container,
+                    { width: screenWidth },
+                ]}>
                 <TimerPicker
                     padWithNItems={3}
                     hideHours
@@ -180,7 +200,7 @@ export default function App() {
                 />
             </View>
         );
-    }, []);
+    }, [screenWidth]);
 
     return (
         <ScrollView horizontal pagingEnabled>
@@ -196,7 +216,6 @@ const styles = StyleSheet.create({
     container: {
         alignItems: "center",
         justifyContent: "center",
-        width: screenWidth,
     },
     page1Container: {
         backgroundColor: "#514242",

example/app.json

@@ -3,7 +3,6 @@
     "name": "example",
     "slug": "example",
     "version": "1.0.0",
-    "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
     "splash": {

package.json

@@ -6,7 +6,7 @@
         "url": "https://github.com/troberts-28"
     },
     "license": "MIT",
-    "version": "1.2.5",
+    "version": "1.2.6",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "scripts": {

src/components/Modal/index.tsx

@@ -1,12 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import {
     Animated,
-    DeviceEventEmitter,
-    Dimensions,
     Easing,
     Modal as ReactNativeModal,
     TouchableWithoutFeedback,
+    useWindowDimensions,
 } from "react-native";
 
 import { styles } from "./Modal.styles";
@@ -36,40 +35,18 @@ export const Modal = ({
     overlayStyle,
     testID,
 }: ModalProps): React.ReactElement => {
-    const [screenHeight, setScreenHeight] = useState(
-        Dimensions.get("window").height
-    );
-    const [screenWidth, setScreenWidth] = useState(
-        Dimensions.get("window").width
-    );
+    const { width: screenWidth, height: screenHeight } = useWindowDimensions();
 
     const isMounted = useRef(false);
     const animatedOpacity = useRef(new Animated.Value(0));
 
-    const handleDimensionsUpdate = (dimensionsUpdate: any) => {
-        const updatedScreenWidth = dimensionsUpdate.window.width;
-        const updateadScreenHeight = dimensionsUpdate.window.height;
-        if (
-            updatedScreenWidth !== screenWidth ||
-            updateadScreenHeight !== screenHeight
-        ) {
-            setScreenHeight(updateadScreenHeight);
-            setScreenWidth(updatedScreenWidth);
-        }
-    };
-
     useEffect(() => {
         isMounted.current = true;
         if (isVisible) {
             show();
         }
-        const deviceEventEmitter = DeviceEventEmitter.addListener(
-            "didUpdateDimensions",
-            handleDimensionsUpdate
-        );
 
         return () => {
-            deviceEventEmitter.remove();
             isMounted.current = false;
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps