From be5fe2040f4f5ad5c90bc1c59ea93161ed1c43e3 Mon Sep 17 00:00:00 2001 From: Tim Roberts Date: Tue, 17 Oct 2023 18:22:07 +0100 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=90=9B=20fix=20#14=20-=20use=20`useWi?= =?UTF-8?q?ndowDimensions`=20hook=20on=20modal=20instead=20of=20listening?= =?UTF-8?q?=20to=20`didUpdateDimensions`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Modal/index.tsx | 29 +++-------------------------- 1 file changed, 3 insertions(+), 26 deletions(-) diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index 523595b..8a6d5f8 100644 --- a/src/components/Modal/index.tsx +++ b/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 From 880e6f0672f8e2bd83787a24181362890169a43e Mon Sep 17 00:00:00 2001 From: Tim Roberts Date: Tue, 17 Oct 2023 18:23:40 +0100 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=93=9D=20make=20example=20work=20in?= =?UTF-8?q?=20landscape=20(and=20with=20switching=20orientations)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/App.tsx | 43 +++++++++++++++++++++++++++++++------------ example/app.json | 1 - 2 files changed, 31 insertions(+), 13 deletions(-) diff --git a/example/App.tsx b/example/App.tsx index e9f7a93..00842c9 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -1,11 +1,11 @@ import React, { useMemo, useState } from "react"; import { - Dimensions, ScrollView, StyleSheet, Text, TouchableOpacity, View, + useWindowDimensions, } from "react-native"; import { LinearGradient } from "expo-linear-gradient"; @@ -13,9 +13,9 @@ 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 ( - + {alarmStringExample1 !== null ? "Alarm set for" @@ -74,11 +79,16 @@ export default function App() { /> ); - }, [alarmStringExample1, showPickerExample1]); + }, [alarmStringExample1, screenWidth, showPickerExample1]); const renderExample2 = useMemo(() => { return ( - + {alarmStringExample2 !== null ? "Alarm set for" @@ -122,11 +132,16 @@ export default function App() { /> ); - }, [alarmStringExample2, showPickerExample2]); + }, [alarmStringExample2, screenWidth, showPickerExample2]); const renderExample3 = useMemo(() => { return ( - + ); - }, []); + }, [screenWidth]); const renderExample4 = useMemo(() => { return ( - + ); - }, []); + }, [screenWidth]); return ( @@ -196,7 +216,6 @@ const styles = StyleSheet.create({ container: { alignItems: "center", justifyContent: "center", - width: screenWidth, }, page1Container: { backgroundColor: "#514242", diff --git a/example/app.json b/example/app.json index 05e5eb2..9592555 100644 --- a/example/app.json +++ b/example/app.json @@ -3,7 +3,6 @@ "name": "example", "slug": "example", "version": "1.0.0", - "orientation": "portrait", "icon": "./assets/icon.png", "userInterfaceStyle": "light", "splash": { From 9e2c2ab29998289dacd025121c4612e3ffb170aa Mon Sep 17 00:00:00 2001 From: Tim Roberts Date: Tue, 17 Oct 2023 18:25:30 +0100 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=94=96=20bump=20version?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c475f1c..ba3ea78 100644 --- a/package.json +++ b/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": {