From 6eab7f250592fdcafacd2323ae655f9ee5283c57 Mon Sep 17 00:00:00 2001 From: M-i-k-e-l Date: Sun, 29 Jun 2025 15:24:27 +0300 Subject: [PATCH 1/2] SafeAreaSpacerView - fix race condition and a small refactor --- .../SafeArea/SafeAreaInsetsManager.ts | 6 +---- .../SafeArea/SafeAreaSpacerView.tsx | 22 ++++++++++--------- lib/components/SafeArea/index.tsx | 16 ++++++++++++++ lib/components/index.ts | 2 +- 4 files changed, 30 insertions(+), 16 deletions(-) create mode 100644 lib/components/SafeArea/index.tsx diff --git a/lib/components/SafeArea/SafeAreaInsetsManager.ts b/lib/components/SafeArea/SafeAreaInsetsManager.ts index 3a699479ad..a3d80c5392 100644 --- a/lib/components/SafeArea/SafeAreaInsetsManager.ts +++ b/lib/components/SafeArea/SafeAreaInsetsManager.ts @@ -1,7 +1,7 @@ /* eslint no-underscore-dangle: 0 */ import _ from 'lodash'; -import {NativeModules, DeviceEventEmitter, Platform} from 'react-native'; +import {NativeModules, DeviceEventEmitter} from 'react-native'; type SafeAreaInsetsType = { top: number; left: number; bottom: number; right: number; } | null; @@ -42,10 +42,6 @@ class SafeAreaInsetsManager { } setupEventListener() { - if (Platform.OS !== 'ios') { - return; - } - try { // Use DeviceEventEmitter instead of NativeEventEmitter to avoid getConstants DeviceEventEmitter.addListener('SafeAreaInsetsDidChangeEvent', (data) => { diff --git a/lib/components/SafeArea/SafeAreaSpacerView.tsx b/lib/components/SafeArea/SafeAreaSpacerView.tsx index 5d19fe11a0..564abc31f1 100644 --- a/lib/components/SafeArea/SafeAreaSpacerView.tsx +++ b/lib/components/SafeArea/SafeAreaSpacerView.tsx @@ -1,13 +1,14 @@ -import React, {useState, useCallback, useEffect} from 'react'; -import {View, ViewStyle, Dimensions} from 'react-native'; +import React, {useState, useCallback, useEffect, useMemo} from 'react'; +import {View, ViewStyle, Dimensions, StyleProp} from 'react-native'; import SafeAreaInsetsManager from './SafeAreaInsetsManager'; export type SafeAreaSpacerViewProps = { - style?: ViewStyle; + style?: StyleProp; }; const SafeAreaSpacerView = ({style}: SafeAreaSpacerViewProps) => { const [safeAreaInsets, setSafeAreaInsets] = useState({top: 0, left: 0, bottom: 0, right: 0}); + const [componentHeight, setComponentHeight] = useState(0); const [spacerHeight, setSpacerHeight] = useState(0); useEffect(() => { @@ -43,25 +44,26 @@ const SafeAreaSpacerView = ({style}: SafeAreaSpacerViewProps) => { // Position detection with useCallback const handleLayout = useCallback((event: any) => { const {y} = event.nativeEvent.layout; + setComponentHeight(y); + }, []); + + useEffect(() => { const screenHeight = Dimensions.get('window').height; let height = 0; // Check if positioned within safe area bounds - if (y < safeAreaInsets.top) { + if (componentHeight < safeAreaInsets.top) { height = safeAreaInsets.top; - } else if (y > screenHeight - safeAreaInsets.bottom) { + } else if (componentHeight > screenHeight - safeAreaInsets.bottom) { height = safeAreaInsets.bottom; } if (height !== spacerHeight) { setSpacerHeight(height); } - }, [safeAreaInsets, spacerHeight]); + }, [componentHeight, safeAreaInsets, spacerHeight]); - const spacerStyle = { - height: spacerHeight, - ...style - }; + const spacerStyle = useMemo(() => [{height: spacerHeight}, style], [spacerHeight, style]); return ; }; diff --git a/lib/components/SafeArea/index.tsx b/lib/components/SafeArea/index.tsx new file mode 100644 index 0000000000..21a71d9a3d --- /dev/null +++ b/lib/components/SafeArea/index.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import {View, ViewStyle, StyleProp, Platform} from 'react-native'; +import SafeAreaSpacerViewIos from './SafeAreaSpacerView'; + +const isIOS = Platform.OS === 'ios'; + +export type SafeAreaSpacerViewProps = { + style?: StyleProp; +}; + +const SafeAreaSpacerView = ({style}: SafeAreaSpacerViewProps) => { + return isIOS ? : ; +}; + +SafeAreaSpacerView.displayName = 'SafeAreaSpacerView'; +export default SafeAreaSpacerView; diff --git a/lib/components/index.ts b/lib/components/index.ts index 7b120062e1..9e6845a829 100644 --- a/lib/components/index.ts +++ b/lib/components/index.ts @@ -1,6 +1,6 @@ import DynamicFonts, {FontExtension} from './DynamicFonts'; import HighlighterOverlayView from './HighlighterOverlayView'; -import SafeAreaSpacerView from './SafeArea/SafeAreaSpacerView'; +import SafeAreaSpacerView from './SafeArea'; import SafeAreaInsetsManager from './SafeArea/SafeAreaInsetsManager'; import Keyboard, {KeyboardTrackingViewProps, KeyboardAccessoryViewProps} from './Keyboard'; From 2f50ed83ecb189804c3eb9149041a86a0a44d630 Mon Sep 17 00:00:00 2001 From: M-i-k-e-l Date: Sun, 29 Jun 2025 15:37:10 +0300 Subject: [PATCH 2/2] Update snapshot --- package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index ebc0feef81..3741c43e30 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "react-native-redash": "^12.0.3", "semver": "^5.5.0", "tinycolor2": "^1.4.2", - "uilib-native": "5.0.0-snapshot.7212", + "uilib-native": "5.0.0-snapshot.7216", "url-parse": "^1.2.0", "wix-react-native-text-size": "1.0.9" }, diff --git a/yarn.lock b/yarn.lock index bd4ce760d5..ab01492044 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10928,7 +10928,7 @@ __metadata: shell-utils: ^1.0.10 tinycolor2: ^1.4.2 typescript: 5.0.4 - uilib-native: 5.0.0-snapshot.7212 + uilib-native: 5.0.0-snapshot.7216 url-parse: ^1.2.0 wix-react-native-text-size: 1.0.9 peerDependencies: @@ -12560,16 +12560,16 @@ __metadata: languageName: node linkType: hard -"uilib-native@npm:5.0.0-snapshot.7212": - version: 5.0.0-snapshot.7212 - resolution: "uilib-native@npm:5.0.0-snapshot.7212" +"uilib-native@npm:5.0.0-snapshot.7216": + version: 5.0.0-snapshot.7216 + resolution: "uilib-native@npm:5.0.0-snapshot.7216" dependencies: lodash: ^4.17.21 prop-types: ^15.5.10 peerDependencies: react: ">=17.0.1" react-native: ">=0.64.1" - checksum: f293839cebb6b8dca255de9b02dcf27f36892aa8d2c97ae1445c4e8506d43db03cd95758ae7685f642fce051bff016667a91632083d48ac6581dc101691f3365 + checksum: 3ca207bae3865fc4275393135f5cd4a46c52678100d4308fe1008d0167d8d5ae8bd1cab558b364d7ad60e5c96cb38497cd10b0109e15376c623ef9849cfb3a32 languageName: node linkType: hard