From bc603713724b24bef2eb814f9c0110bce92204a9 Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Thu, 5 Jun 2025 15:17:53 +0300 Subject: [PATCH 01/21] Native lib - reorganize components in folders for convenience + bump version to 5.0.0 --- .../HighlighterOverlayView.web.tsx | 0 .../index.tsx} | 4 ++-- .../CustomKeyboardView.android.tsx | 2 +- .../CustomKeyboardView/CustomKeyboardView.ios.tsx | 6 +++--- .../CustomKeyboardViewBase.tsx | 2 +- .../{KeyboardInput => }/CustomKeyboardView/index.tsx | 0 .../CustomKeyboardView/index.web.tsx | 0 .../index.tsx} | 6 +++--- .../keyboardAccessoryView.api.json | 0 .../index.tsx} | 2 +- .../keyboardAwareInsetsView.api.json | 0 .../__tests__/EventEmitterManager.spec.js | 2 +- .../EventEmitterManager/index.ts} | 0 .../__tests__/KeyboardRegistry.spec.js | 2 +- .../index.ts} | 4 ++-- .../keyboardRegistry.api.json | 0 .../KeyboardTrackingView.android.tsx | 0 .../KeyboardTrackingView.ios.tsx | 0 .../KeyboardTrackingView/index.tsx | 0 .../KeyboardTrackingView/index.web.tsx | 0 .../keyboardTrackingView.api.json | 0 .../KeyboardUtils.ts => KeyboardUtils/index.ts} | 0 .../TextInputKeyboardManager.android.ts | 0 .../TextInputKeyboardManager.ios.ts | 0 .../TextInputKeyboardManager/index.ts | 0 lib/components/Keyboard/index.ts | 12 ++++++------ lib/components/index.ts | 2 +- lib/package.json | 2 +- 28 files changed, 23 insertions(+), 23 deletions(-) rename lib/components/{ => HighlighterOverlay}/HighlighterOverlayView.web.tsx (100%) rename lib/components/{HighlighterOverlayView.tsx => HighlighterOverlay/index.tsx} (95%) rename lib/components/Keyboard/{KeyboardInput => }/CustomKeyboardView/CustomKeyboardView.android.tsx (97%) rename lib/components/Keyboard/{KeyboardInput => }/CustomKeyboardView/CustomKeyboardView.ios.tsx (91%) rename lib/components/Keyboard/{KeyboardInput => CustomKeyboardView}/CustomKeyboardViewBase.tsx (98%) rename lib/components/Keyboard/{KeyboardInput => }/CustomKeyboardView/index.tsx (100%) rename lib/components/Keyboard/{KeyboardInput => }/CustomKeyboardView/index.web.tsx (100%) rename lib/components/Keyboard/{KeyboardInput/KeyboardAccessoryView.tsx => KeyboardAccessoryView/index.tsx} (97%) rename lib/components/Keyboard/{KeyboardInput => KeyboardAccessoryView}/keyboardAccessoryView.api.json (100%) rename lib/components/Keyboard/{KeyboardTracking/KeyboardAwareInsetsView.tsx => KeyboardAwareInsetsView/index.tsx} (97%) rename lib/components/Keyboard/{KeyboardTracking => KeyboardAwareInsetsView}/keyboardAwareInsetsView.api.json (100%) rename lib/components/Keyboard/{KeyboardInput/utils => KeyboardRegistry/EventEmitterManager}/__tests__/EventEmitterManager.spec.js (98%) rename lib/components/Keyboard/{KeyboardInput/utils/EventEmitterManager.ts => KeyboardRegistry/EventEmitterManager/index.ts} (100%) rename lib/components/Keyboard/{KeyboardInput => KeyboardRegistry}/__tests__/KeyboardRegistry.spec.js (99%) rename lib/components/Keyboard/{KeyboardInput/KeyboardRegistry.ts => KeyboardRegistry/index.ts} (98%) rename lib/components/Keyboard/{KeyboardInput => KeyboardRegistry}/keyboardRegistry.api.json (100%) rename lib/components/Keyboard/{KeyboardTracking => }/KeyboardTrackingView/KeyboardTrackingView.android.tsx (100%) rename lib/components/Keyboard/{KeyboardTracking => }/KeyboardTrackingView/KeyboardTrackingView.ios.tsx (100%) rename lib/components/Keyboard/{KeyboardTracking => }/KeyboardTrackingView/index.tsx (100%) rename lib/components/Keyboard/{KeyboardTracking => }/KeyboardTrackingView/index.web.tsx (100%) rename lib/components/Keyboard/{KeyboardTracking => }/KeyboardTrackingView/keyboardTrackingView.api.json (100%) rename lib/components/Keyboard/{KeyboardInput/utils/KeyboardUtils.ts => KeyboardUtils/index.ts} (100%) rename lib/components/Keyboard/{KeyboardInput => }/TextInputKeyboardManager/TextInputKeyboardManager.android.ts (100%) rename lib/components/Keyboard/{KeyboardInput => }/TextInputKeyboardManager/TextInputKeyboardManager.ios.ts (100%) rename lib/components/Keyboard/{KeyboardInput => }/TextInputKeyboardManager/index.ts (100%) diff --git a/lib/components/HighlighterOverlayView.web.tsx b/lib/components/HighlighterOverlay/HighlighterOverlayView.web.tsx similarity index 100% rename from lib/components/HighlighterOverlayView.web.tsx rename to lib/components/HighlighterOverlay/HighlighterOverlayView.web.tsx diff --git a/lib/components/HighlighterOverlayView.tsx b/lib/components/HighlighterOverlay/index.tsx similarity index 95% rename from lib/components/HighlighterOverlayView.tsx rename to lib/components/HighlighterOverlay/index.tsx index ee3997515a..9d0b9eac0b 100644 --- a/lib/components/HighlighterOverlayView.tsx +++ b/lib/components/HighlighterOverlay/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {requireNativeComponent, processColor, Platform, StyleSheet, Modal, ViewStyle} from 'react-native'; -const NativeHighlighterView = requireNativeComponent('HighlighterView'); +const HighlighterView = requireNativeComponent('HighlighterView'); const DefaultOverlayColor = 'rgba(0, 0, 0, 0.5)'; type HighlightFrameType = { @@ -68,7 +68,7 @@ const HighlighterOverlayView = (props: HighlighterOverlayViewProps) => { transparent onRequestClose={() => onRequestClose?.()} > - { static displayName = 'IGNORE'; diff --git a/lib/components/Keyboard/KeyboardInput/CustomKeyboardView/CustomKeyboardView.ios.tsx b/lib/components/Keyboard/CustomKeyboardView/CustomKeyboardView.ios.tsx similarity index 91% rename from lib/components/Keyboard/KeyboardInput/CustomKeyboardView/CustomKeyboardView.ios.tsx rename to lib/components/Keyboard/CustomKeyboardView/CustomKeyboardView.ios.tsx index 7bb0b35d6e..6107599903 100644 --- a/lib/components/Keyboard/KeyboardInput/CustomKeyboardView/CustomKeyboardView.ios.tsx +++ b/lib/components/Keyboard/CustomKeyboardView/CustomKeyboardView.ios.tsx @@ -1,6 +1,6 @@ -import TextInputKeyboardManager from './../TextInputKeyboardManager/TextInputKeyboardManager.ios'; -import KeyboardRegistry from './../KeyboardRegistry'; -import CustomKeyboardViewBase, {CustomKeyboardViewBaseProps} from './../CustomKeyboardViewBase'; +import TextInputKeyboardManager from '../TextInputKeyboardManager/TextInputKeyboardManager.ios'; +import KeyboardRegistry from '../KeyboardRegistry'; +import CustomKeyboardViewBase, {CustomKeyboardViewBaseProps} from './CustomKeyboardViewBase'; export type CustomKeyboardViewProps = CustomKeyboardViewBaseProps & { /** diff --git a/lib/components/Keyboard/KeyboardInput/CustomKeyboardViewBase.tsx b/lib/components/Keyboard/CustomKeyboardView/CustomKeyboardViewBase.tsx similarity index 98% rename from lib/components/Keyboard/KeyboardInput/CustomKeyboardViewBase.tsx rename to lib/components/Keyboard/CustomKeyboardView/CustomKeyboardViewBase.tsx index 2a52db0fca..0622ac48e3 100644 --- a/lib/components/Keyboard/KeyboardInput/CustomKeyboardViewBase.tsx +++ b/lib/components/Keyboard/CustomKeyboardView/CustomKeyboardViewBase.tsx @@ -1,6 +1,6 @@ import React, {Component} from 'react'; -import KeyboardRegistry from './KeyboardRegistry'; import {EventSubscription} from 'react-native'; +import KeyboardRegistry from '../KeyboardRegistry'; export type CustomKeyboardViewBaseProps = { inputRef?: any; diff --git a/lib/components/Keyboard/KeyboardInput/CustomKeyboardView/index.tsx b/lib/components/Keyboard/CustomKeyboardView/index.tsx similarity index 100% rename from lib/components/Keyboard/KeyboardInput/CustomKeyboardView/index.tsx rename to lib/components/Keyboard/CustomKeyboardView/index.tsx diff --git a/lib/components/Keyboard/KeyboardInput/CustomKeyboardView/index.web.tsx b/lib/components/Keyboard/CustomKeyboardView/index.web.tsx similarity index 100% rename from lib/components/Keyboard/KeyboardInput/CustomKeyboardView/index.web.tsx rename to lib/components/Keyboard/CustomKeyboardView/index.web.tsx diff --git a/lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.tsx b/lib/components/Keyboard/KeyboardAccessoryView/index.tsx similarity index 97% rename from lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.tsx rename to lib/components/Keyboard/KeyboardAccessoryView/index.tsx index 1a4e77b2c9..cd57770d3a 100644 --- a/lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.tsx +++ b/lib/components/Keyboard/KeyboardAccessoryView/index.tsx @@ -9,9 +9,9 @@ import { BackHandler, LayoutChangeEvent } from 'react-native'; -import KeyboardTrackingView, {KeyboardTrackingViewProps} from '../KeyboardTracking/KeyboardTrackingView'; -import CustomKeyboardView from './CustomKeyboardView'; -import KeyboardUtils, {KeyboardHeightListener} from './utils/KeyboardUtils'; +import KeyboardTrackingView, {KeyboardTrackingViewProps} from '../KeyboardTrackingView'; +import CustomKeyboardView from '../CustomKeyboardView'; +import KeyboardUtils, {KeyboardHeightListener} from '../KeyboardUtils'; const IsIOS = Platform.OS === 'ios'; const IsAndroid = Platform.OS === 'android'; diff --git a/lib/components/Keyboard/KeyboardInput/keyboardAccessoryView.api.json b/lib/components/Keyboard/KeyboardAccessoryView/keyboardAccessoryView.api.json similarity index 100% rename from lib/components/Keyboard/KeyboardInput/keyboardAccessoryView.api.json rename to lib/components/Keyboard/KeyboardAccessoryView/keyboardAccessoryView.api.json diff --git a/lib/components/Keyboard/KeyboardTracking/KeyboardAwareInsetsView.tsx b/lib/components/Keyboard/KeyboardAwareInsetsView/index.tsx similarity index 97% rename from lib/components/Keyboard/KeyboardTracking/KeyboardAwareInsetsView.tsx rename to lib/components/Keyboard/KeyboardAwareInsetsView/index.tsx index f2248479dc..81347a50e2 100644 --- a/lib/components/Keyboard/KeyboardTracking/KeyboardAwareInsetsView.tsx +++ b/lib/components/Keyboard/KeyboardAwareInsetsView/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {StyleSheet, Dimensions} from 'react-native'; -import KeyboardTrackingView, {KeyboardTrackingViewProps} from './KeyboardTrackingView'; +import KeyboardTrackingView, {KeyboardTrackingViewProps} from '../KeyboardTrackingView'; type Props = KeyboardTrackingViewProps & { offset?: number; diff --git a/lib/components/Keyboard/KeyboardTracking/keyboardAwareInsetsView.api.json b/lib/components/Keyboard/KeyboardAwareInsetsView/keyboardAwareInsetsView.api.json similarity index 100% rename from lib/components/Keyboard/KeyboardTracking/keyboardAwareInsetsView.api.json rename to lib/components/Keyboard/KeyboardAwareInsetsView/keyboardAwareInsetsView.api.json diff --git a/lib/components/Keyboard/KeyboardInput/utils/__tests__/EventEmitterManager.spec.js b/lib/components/Keyboard/KeyboardRegistry/EventEmitterManager/__tests__/EventEmitterManager.spec.js similarity index 98% rename from lib/components/Keyboard/KeyboardInput/utils/__tests__/EventEmitterManager.spec.js rename to lib/components/Keyboard/KeyboardRegistry/EventEmitterManager/__tests__/EventEmitterManager.spec.js index d730a36c35..1529a81342 100644 --- a/lib/components/Keyboard/KeyboardInput/utils/__tests__/EventEmitterManager.spec.js +++ b/lib/components/Keyboard/KeyboardRegistry/EventEmitterManager/__tests__/EventEmitterManager.spec.js @@ -1,4 +1,4 @@ -const EventEmitterManager = require('../EventEmitterManager').default; +const EventEmitterManager = require('..').default; let EventEmitter; diff --git a/lib/components/Keyboard/KeyboardInput/utils/EventEmitterManager.ts b/lib/components/Keyboard/KeyboardRegistry/EventEmitterManager/index.ts similarity index 100% rename from lib/components/Keyboard/KeyboardInput/utils/EventEmitterManager.ts rename to lib/components/Keyboard/KeyboardRegistry/EventEmitterManager/index.ts diff --git a/lib/components/Keyboard/KeyboardInput/__tests__/KeyboardRegistry.spec.js b/lib/components/Keyboard/KeyboardRegistry/__tests__/KeyboardRegistry.spec.js similarity index 99% rename from lib/components/Keyboard/KeyboardInput/__tests__/KeyboardRegistry.spec.js rename to lib/components/Keyboard/KeyboardRegistry/__tests__/KeyboardRegistry.spec.js index 79283e5850..749ba69b66 100644 --- a/lib/components/Keyboard/KeyboardInput/__tests__/KeyboardRegistry.spec.js +++ b/lib/components/Keyboard/KeyboardRegistry/__tests__/KeyboardRegistry.spec.js @@ -1,6 +1,6 @@ import {AppRegistry, View} from 'react-native'; import React from 'react'; -import KeyboardRegistry from '../KeyboardRegistry'; +import KeyboardRegistry from '..'; describe('KeyboardRegistry - components', () => { const mockComponent = 'test_component'; diff --git a/lib/components/Keyboard/KeyboardInput/KeyboardRegistry.ts b/lib/components/Keyboard/KeyboardRegistry/index.ts similarity index 98% rename from lib/components/Keyboard/KeyboardInput/KeyboardRegistry.ts rename to lib/components/Keyboard/KeyboardRegistry/index.ts index a281f615d7..4de878ac1b 100644 --- a/lib/components/Keyboard/KeyboardInput/KeyboardRegistry.ts +++ b/lib/components/Keyboard/KeyboardRegistry/index.ts @@ -1,6 +1,6 @@ -import {AppRegistry} from 'react-native'; import _ from 'lodash'; -import EventEmitterManager from './utils/EventEmitterManager'; +import {AppRegistry} from 'react-native'; +import EventEmitterManager from './EventEmitterManager'; /* * Tech debt: how to deal with multiple registries in the app? diff --git a/lib/components/Keyboard/KeyboardInput/keyboardRegistry.api.json b/lib/components/Keyboard/KeyboardRegistry/keyboardRegistry.api.json similarity index 100% rename from lib/components/Keyboard/KeyboardInput/keyboardRegistry.api.json rename to lib/components/Keyboard/KeyboardRegistry/keyboardRegistry.api.json diff --git a/lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView/KeyboardTrackingView.android.tsx b/lib/components/Keyboard/KeyboardTrackingView/KeyboardTrackingView.android.tsx similarity index 100% rename from lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView/KeyboardTrackingView.android.tsx rename to lib/components/Keyboard/KeyboardTrackingView/KeyboardTrackingView.android.tsx diff --git a/lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView/KeyboardTrackingView.ios.tsx b/lib/components/Keyboard/KeyboardTrackingView/KeyboardTrackingView.ios.tsx similarity index 100% rename from lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView/KeyboardTrackingView.ios.tsx rename to lib/components/Keyboard/KeyboardTrackingView/KeyboardTrackingView.ios.tsx diff --git a/lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView/index.tsx b/lib/components/Keyboard/KeyboardTrackingView/index.tsx similarity index 100% rename from lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView/index.tsx rename to lib/components/Keyboard/KeyboardTrackingView/index.tsx diff --git a/lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView/index.web.tsx b/lib/components/Keyboard/KeyboardTrackingView/index.web.tsx similarity index 100% rename from lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView/index.web.tsx rename to lib/components/Keyboard/KeyboardTrackingView/index.web.tsx diff --git a/lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView/keyboardTrackingView.api.json b/lib/components/Keyboard/KeyboardTrackingView/keyboardTrackingView.api.json similarity index 100% rename from lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView/keyboardTrackingView.api.json rename to lib/components/Keyboard/KeyboardTrackingView/keyboardTrackingView.api.json diff --git a/lib/components/Keyboard/KeyboardInput/utils/KeyboardUtils.ts b/lib/components/Keyboard/KeyboardUtils/index.ts similarity index 100% rename from lib/components/Keyboard/KeyboardInput/utils/KeyboardUtils.ts rename to lib/components/Keyboard/KeyboardUtils/index.ts diff --git a/lib/components/Keyboard/KeyboardInput/TextInputKeyboardManager/TextInputKeyboardManager.android.ts b/lib/components/Keyboard/TextInputKeyboardManager/TextInputKeyboardManager.android.ts similarity index 100% rename from lib/components/Keyboard/KeyboardInput/TextInputKeyboardManager/TextInputKeyboardManager.android.ts rename to lib/components/Keyboard/TextInputKeyboardManager/TextInputKeyboardManager.android.ts diff --git a/lib/components/Keyboard/KeyboardInput/TextInputKeyboardManager/TextInputKeyboardManager.ios.ts b/lib/components/Keyboard/TextInputKeyboardManager/TextInputKeyboardManager.ios.ts similarity index 100% rename from lib/components/Keyboard/KeyboardInput/TextInputKeyboardManager/TextInputKeyboardManager.ios.ts rename to lib/components/Keyboard/TextInputKeyboardManager/TextInputKeyboardManager.ios.ts diff --git a/lib/components/Keyboard/KeyboardInput/TextInputKeyboardManager/index.ts b/lib/components/Keyboard/TextInputKeyboardManager/index.ts similarity index 100% rename from lib/components/Keyboard/KeyboardInput/TextInputKeyboardManager/index.ts rename to lib/components/Keyboard/TextInputKeyboardManager/index.ts diff --git a/lib/components/Keyboard/index.ts b/lib/components/Keyboard/index.ts index dd170502e2..1dc7b836c3 100644 --- a/lib/components/Keyboard/index.ts +++ b/lib/components/Keyboard/index.ts @@ -1,15 +1,15 @@ -import KeyboardTrackingView, {KeyboardTrackingViewProps} from './KeyboardTracking/KeyboardTrackingView'; -import KeyboardAwareInsetsView from './KeyboardTracking/KeyboardAwareInsetsView'; -import KeyboardRegistry from './KeyboardInput/KeyboardRegistry'; -import KeyboardAccessoryView, {KeyboardAccessoryViewProps} from './KeyboardInput/KeyboardAccessoryView'; -import KeyboardUtils from './KeyboardInput/utils/KeyboardUtils'; +import KeyboardTrackingView, {KeyboardTrackingViewProps} from './KeyboardTrackingView'; +import KeyboardAwareInsetsView from './KeyboardAwareInsetsView'; +import KeyboardAccessoryView, {KeyboardAccessoryViewProps} from './KeyboardAccessoryView'; +import KeyboardRegistry from './KeyboardRegistry'; +import KeyboardUtils from './KeyboardUtils'; export {KeyboardTrackingViewProps, KeyboardAccessoryViewProps}; export default { KeyboardTrackingView, KeyboardAwareInsetsView, - KeyboardRegistry, KeyboardAccessoryView, + KeyboardRegistry, KeyboardUtils }; diff --git a/lib/components/index.ts b/lib/components/index.ts index 7b120062e1..f5b613c39a 100644 --- a/lib/components/index.ts +++ b/lib/components/index.ts @@ -1,5 +1,5 @@ import DynamicFonts, {FontExtension} from './DynamicFonts'; -import HighlighterOverlayView from './HighlighterOverlayView'; +import HighlighterOverlayView from './HighlighterOverlay'; import SafeAreaSpacerView from './SafeArea/SafeAreaSpacerView'; import SafeAreaInsetsManager from './SafeArea/SafeAreaInsetsManager'; import Keyboard, {KeyboardTrackingViewProps, KeyboardAccessoryViewProps} from './Keyboard'; diff --git a/lib/package.json b/lib/package.json index faff2f00b1..ee0b1823fc 100644 --- a/lib/package.json +++ b/lib/package.json @@ -1,6 +1,6 @@ { "name": "uilib-native", - "version": "4.5.2", + "version": "5.0.0", "homepage": "https://github.com/wix/react-native-ui-lib", "description": "uilib native components (separated from js components)", "main": "components/index", From 55eddd0c30e74f996e174b3633815701b5ffd5d3 Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Thu, 5 Jun 2025 17:51:51 +0300 Subject: [PATCH 02/21] pointing to index --- .../EventEmitterManager/__tests__/EventEmitterManager.spec.js | 2 +- .../KeyboardRegistry/__tests__/KeyboardRegistry.spec.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/components/Keyboard/KeyboardRegistry/EventEmitterManager/__tests__/EventEmitterManager.spec.js b/lib/components/Keyboard/KeyboardRegistry/EventEmitterManager/__tests__/EventEmitterManager.spec.js index 1529a81342..a9497bada4 100644 --- a/lib/components/Keyboard/KeyboardRegistry/EventEmitterManager/__tests__/EventEmitterManager.spec.js +++ b/lib/components/Keyboard/KeyboardRegistry/EventEmitterManager/__tests__/EventEmitterManager.spec.js @@ -1,4 +1,4 @@ -const EventEmitterManager = require('..').default; +const EventEmitterManager = require('../index').default; let EventEmitter; diff --git a/lib/components/Keyboard/KeyboardRegistry/__tests__/KeyboardRegistry.spec.js b/lib/components/Keyboard/KeyboardRegistry/__tests__/KeyboardRegistry.spec.js index 749ba69b66..bc3daec1b0 100644 --- a/lib/components/Keyboard/KeyboardRegistry/__tests__/KeyboardRegistry.spec.js +++ b/lib/components/Keyboard/KeyboardRegistry/__tests__/KeyboardRegistry.spec.js @@ -1,6 +1,6 @@ import {AppRegistry, View} from 'react-native'; import React from 'react'; -import KeyboardRegistry from '..'; +import KeyboardRegistry from '../index'; describe('KeyboardRegistry - components', () => { const mockComponent = 'test_component'; From 736ea87b6a1e4502dc60efad24d0bbc77631db6a Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Thu, 5 Jun 2025 18:56:15 +0300 Subject: [PATCH 03/21] revert naming change --- lib/components/HighlighterOverlay/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/components/HighlighterOverlay/index.tsx b/lib/components/HighlighterOverlay/index.tsx index 9d0b9eac0b..ee3997515a 100644 --- a/lib/components/HighlighterOverlay/index.tsx +++ b/lib/components/HighlighterOverlay/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {requireNativeComponent, processColor, Platform, StyleSheet, Modal, ViewStyle} from 'react-native'; -const HighlighterView = requireNativeComponent('HighlighterView'); +const NativeHighlighterView = requireNativeComponent('HighlighterView'); const DefaultOverlayColor = 'rgba(0, 0, 0, 0.5)'; type HighlightFrameType = { @@ -68,7 +68,7 @@ const HighlighterOverlayView = (props: HighlighterOverlayViewProps) => { transparent onRequestClose={() => onRequestClose?.()} > - Date: Thu, 5 Jun 2025 19:10:32 +0300 Subject: [PATCH 04/21] fix api files --- .../keyboardAccessoryView.api.json | 10 +++--- .../keyboardRegistry.api.json | 18 +++++------ .../keyboardTrackingView.api.json | 31 +++++++------------ 3 files changed, 25 insertions(+), 34 deletions(-) diff --git a/lib/components/Keyboard/KeyboardAccessoryView/keyboardAccessoryView.api.json b/lib/components/Keyboard/KeyboardAccessoryView/keyboardAccessoryView.api.json index 3238e0e4e3..41cdaf816e 100644 --- a/lib/components/Keyboard/KeyboardAccessoryView/keyboardAccessoryView.api.json +++ b/lib/components/Keyboard/KeyboardAccessoryView/keyboardAccessoryView.api.json @@ -2,6 +2,7 @@ "name": "KeyboardAccessoryView", "category": "infra", "description": "View that allows replacing the default keyboard with other components", + "note": "This view is useful only for iOS", "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/keyboardAccessory/KeyboardAccessoryViewScreen.js", "images": [ "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/KeyboardAccessoryView/KeyboardAccessoryView.gif?raw=true" @@ -15,9 +16,8 @@ { "name": "kbInputRef", "type": "any", - "description": "The reference to the actual text input (or the keyboard may not reset when instructed to, etc.).", - "required": true, - "note": "iOS only" + "description": "The reference to the actual text input (or the keyboard may not reset when instructed to, etc.)", + "required": true }, { "name": "kbComponent", @@ -33,12 +33,12 @@ { "name": "onItemSelected", "type": "() => void", - "description": "Callback that will be called when an item on the keyboard has been pressed." + "description": "Callback that will be called when an item on the keyboard has been pressed" }, { "name": "onRequestShowKeyboard", "type": "() => void", - "description": "Callback that will be called if KeyboardRegistry.requestShowKeyboard is called." + "description": "Callback that will be called if KeyboardRegistry.requestShowKeyboard is called" }, { "name": "onKeyboardResigned", diff --git a/lib/components/Keyboard/KeyboardRegistry/keyboardRegistry.api.json b/lib/components/Keyboard/KeyboardRegistry/keyboardRegistry.api.json index c35b74c43c..dbc210527c 100644 --- a/lib/components/Keyboard/KeyboardRegistry/keyboardRegistry.api.json +++ b/lib/components/Keyboard/KeyboardRegistry/keyboardRegistry.api.json @@ -1,49 +1,49 @@ { "name": "KeyboardRegistry", "category": "infra", - "description": "used for registering keyboards and performing certain actions on the keyboards.", + "description": "used for registering keyboards and performing certain actions on the keyboards", "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/keyboardAccessory/demoKeyboards.js", "props": [ { "name": "registerKeyboard", "type": "static function", - "description": "Register a new keyboard.\ncomponentID (string) - the ID of the keyboard.\ngenerator (function) - a function for the creation of the keyboard.\nparams (object) - to be returned when using other methods (i.e. getKeyboards and getAllKeyboards)." + "description": "Register a new keyboard.\ncomponentID (string) - the ID of the keyboard.\ngenerator (function) - a function for the creation of the keyboard.\nparams (object) - to be returned when using other methods (i.e. getKeyboards and getAllKeyboards)" }, { "name": "getKeyboard", "type": "static function", - "description": "Get a specific keyboard\ncomponentID (string) - the ID of the keyboard." + "description": "Get a specific keyboard\ncomponentID (string) - the ID of the keyboard" }, { "name": "getKeyboards", "type": "static function", - "description": "Get keyboards by IDs\ncomponentIDs (string[]) - the ID of the keyboard." + "description": "Get keyboards by IDs\ncomponentIDs (string[]) - the ID of the keyboard" }, {"name": "getAllKeyboards", "type": "static function", "description": "Get all keyboards"}, { "name": "addListener", "type": "static function", - "description": "Add a listener for a callback.\nglobalID (string) - ID that includes the componentID and the event name\n (i.e. if componentID='kb1' globalID='kb1.onItemSelected')\ncallback (function) - the callback to be called when the said event happens" + "description": "Add a listener for a callback.\nglobalID (string) - ID that includes the componentID and the event name\n(i.e. if componentID='kb1' globalID='kb1.onItemSelected')\ncallback (function) - the callback to be called when the said event happens" }, { "name": "notifyListeners", "type": "static function", - "description": "Notify that an event has occurred.\nglobalID (string) - ID that includes the componentID and the event name\n (i.e. if componentID='kb1' globalID='kb1.onItemSelected')\nargs (object) - data to be sent to the listener." + "description": "Notify that an event has occurred.\nglobalID (string) - ID that includes the componentID and the event name\n(i.e. if componentID='kb1' globalID='kb1.onItemSelected')\nargs (object) - data to be sent to the listener" }, { "name": "removeListeners", "type": "static function", - "description": "Remove a listener for a callback.\nglobalID (string) - ID that includes the componentID and the event name\n (i.e. if componentID='kb1' globalID='kb1.onItemSelected')" + "description": "Remove a listener for a callback.\nglobalID (string) - ID that includes the componentID and the event name\n(i.e. if componentID='kb1' globalID='kb1.onItemSelected')" }, { "name": "onItemSelected", "type": "static function", - "description": "Default event to be used for when an item on the keyboard has been pressed.\ncomponentID (string) - the ID of the keyboard.\nargs (object) - data to be sent to the listener." + "description": "Default event to be used for when an item on the keyboard has been pressed.\ncomponentID (string) - the ID of the keyboard.\nargs (object) - data to be sent to the listener" }, { "name": "requestShowKeyboard", "type": "static function", - "description": "Request to show the keyboard\ncomponentID (string) - the ID of the keyboard." + "description": "Request to show the keyboard\ncomponentID (string) - the ID of the keyboard" } ], "snippet": ["KeyboardRegistry.registerKeyboard('keyboardName$1', () => KeyboardComponent$2)"] diff --git a/lib/components/Keyboard/KeyboardTrackingView/keyboardTrackingView.api.json b/lib/components/Keyboard/KeyboardTrackingView/keyboardTrackingView.api.json index 360bf3fadc..9a208f7df9 100644 --- a/lib/components/Keyboard/KeyboardTrackingView/keyboardTrackingView.api.json +++ b/lib/components/Keyboard/KeyboardTrackingView/keyboardTrackingView.api.json @@ -1,8 +1,8 @@ { "name": "KeyboardTrackingView", "category": "infra", - "description": "A UI component that enables 'keyboard tracking' for this view and it's sub-views.\nWould typically be used when you have a TextField or TextInput inside this view.", - "note": "This view is useful only for iOS.", + "description": "A UI component that enables 'keyboard tracking' for this view and it's sub-views.\nWould typically be used when you have a TextField or TextInput inside this view", + "note": "This view is useful only for iOS", "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/KeyboardTrackingViewScreen.js", "images": [ "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/KeyboardTrackingView/KeyboardTrackingView.gif?raw=true" @@ -21,63 +21,54 @@ { "name": "scrollBehavior", "type": "number", - "description": "The scrolling behavior (use KeyboardTrackingView.scrollBehaviors.NONE | SCROLL_TO_BOTTOM_INVERTED_ONLY | FIXED_OFFSET)", - "note": "iOS only" + "description": "The scrolling behavior (use KeyboardTrackingView.scrollBehaviors.NONE | SCROLL_TO_BOTTOM_INVERTED_ONLY | FIXED_OFFSET)" }, { "name": "revealKeyboardInteractive", "type": "boolean", - "description": "Show the keyboard on a negative scroll.", - "note": "iOS only", + "description": "Show the keyboard on a negative scroll", "default": "false" }, { "name": "manageScrollView", "type": "boolean", - "description": "Set to false to turn off inset management and manage it yourself.", - "note": "iOS only", + "description": "Set to false to turn off inset management and manage it yourself", "default": "true" }, { "name": "requiresSameParentToManageScrollView", "type": "boolean", - "description": "Set to true manageScrollView is set to true and still does not work,\nit means that the ScrollView found is the wrong one and you'll have\nto have the KeyboardAccessoryView and the ScrollView as siblings\nand set this to true.", - "note": "iOS only", + "description": "Set to true manageScrollView is set to true and still does not work,\nit means that the ScrollView found is the wrong one and you'll have\nto have the KeyboardAccessoryView and the ScrollView as siblings\nand set this to true", "default": "false" }, { "name": "allowHitsOutsideBounds", "type": "boolean", - "description": "Allow hitting sub-views that are placed beyond the view bounds.", - "note": "iOS only", + "description": "Allow hitting sub-views that are placed beyond the view bounds", "default": "false" }, { "name": "addBottomView", "type": "boolean", - "description": "Add a view beneath the KeyboardAccessoryView.", - "note": "iOS only", + "description": "Add a view beneath the KeyboardAccessoryView", "default": "false" }, { "name": "bottomViewColor", "type": "string", - "description": "The bottom view's color.", - "note": "iOS only", + "description": "The bottom view's color", "default": "white" }, { "name": "useSafeArea", "type": "boolean", - "description": "Whether or not to handle SafeArea.", - "note": "iOS only", + "description": "Whether or not to handle SafeArea", "default": "true" }, { "name": "usesBottomTabs", "type": "boolean", - "description": "Whether or not to include bottom tab bar inset.", - "note": "iOS only", + "description": "Whether or not to include bottom tab bar inset", "default": "false" }, {"name": "ref", "type": "any", "description": ""}, From e8e7bd278a8d0b75aeed794a9dd77f89c9484655 Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Mon, 9 Jun 2025 08:42:49 +0300 Subject: [PATCH 05/21] rename HighlighterOverlay web --- .../{HighlighterOverlayView.web.tsx => index.web.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename lib/components/HighlighterOverlay/{HighlighterOverlayView.web.tsx => index.web.tsx} (100%) diff --git a/lib/components/HighlighterOverlay/HighlighterOverlayView.web.tsx b/lib/components/HighlighterOverlay/index.web.tsx similarity index 100% rename from lib/components/HighlighterOverlay/HighlighterOverlayView.web.tsx rename to lib/components/HighlighterOverlay/index.web.tsx From 273c7d0f6e38b0bd1c86e96516aebc9178773d8c Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Mon, 9 Jun 2025 08:50:12 +0300 Subject: [PATCH 06/21] Moving sub components to the parent --- .../CustomKeyboardView/CustomKeyboardView.android.tsx | 0 .../CustomKeyboardView/CustomKeyboardView.ios.tsx | 0 .../CustomKeyboardView/CustomKeyboardViewBase.tsx | 0 .../{ => KeyboardAccessoryView}/CustomKeyboardView/index.tsx | 0 .../CustomKeyboardView/index.web.tsx | 0 .../EventEmitterManager/__tests__/EventEmitterManager.spec.js | 0 .../KeyboardRegistry/EventEmitterManager/index.ts | 0 .../KeyboardRegistry/__tests__/KeyboardRegistry.spec.js | 0 .../{ => KeyboardAccessoryView}/KeyboardRegistry/index.ts | 0 .../KeyboardRegistry/keyboardRegistry.api.json | 0 .../{ => KeyboardAccessoryView}/KeyboardUtils/index.ts | 0 .../TextInputKeyboardManager.android.ts | 0 .../TextInputKeyboardManager/TextInputKeyboardManager.ios.ts | 0 .../TextInputKeyboardManager/index.ts | 0 lib/components/Keyboard/KeyboardAccessoryView/index.tsx | 4 ++-- lib/components/Keyboard/index.ts | 4 ++-- 16 files changed, 4 insertions(+), 4 deletions(-) rename lib/components/Keyboard/{ => KeyboardAccessoryView}/CustomKeyboardView/CustomKeyboardView.android.tsx (100%) rename lib/components/Keyboard/{ => KeyboardAccessoryView}/CustomKeyboardView/CustomKeyboardView.ios.tsx (100%) rename lib/components/Keyboard/{ => KeyboardAccessoryView}/CustomKeyboardView/CustomKeyboardViewBase.tsx (100%) rename lib/components/Keyboard/{ => KeyboardAccessoryView}/CustomKeyboardView/index.tsx (100%) rename lib/components/Keyboard/{ => KeyboardAccessoryView}/CustomKeyboardView/index.web.tsx (100%) rename lib/components/Keyboard/{ => KeyboardAccessoryView}/KeyboardRegistry/EventEmitterManager/__tests__/EventEmitterManager.spec.js (100%) rename lib/components/Keyboard/{ => KeyboardAccessoryView}/KeyboardRegistry/EventEmitterManager/index.ts (100%) rename lib/components/Keyboard/{ => KeyboardAccessoryView}/KeyboardRegistry/__tests__/KeyboardRegistry.spec.js (100%) rename lib/components/Keyboard/{ => KeyboardAccessoryView}/KeyboardRegistry/index.ts (100%) rename lib/components/Keyboard/{ => KeyboardAccessoryView}/KeyboardRegistry/keyboardRegistry.api.json (100%) rename lib/components/Keyboard/{ => KeyboardAccessoryView}/KeyboardUtils/index.ts (100%) rename lib/components/Keyboard/{ => KeyboardAccessoryView}/TextInputKeyboardManager/TextInputKeyboardManager.android.ts (100%) rename lib/components/Keyboard/{ => KeyboardAccessoryView}/TextInputKeyboardManager/TextInputKeyboardManager.ios.ts (100%) rename lib/components/Keyboard/{ => KeyboardAccessoryView}/TextInputKeyboardManager/index.ts (100%) diff --git a/lib/components/Keyboard/CustomKeyboardView/CustomKeyboardView.android.tsx b/lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardView.android.tsx similarity index 100% rename from lib/components/Keyboard/CustomKeyboardView/CustomKeyboardView.android.tsx rename to lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardView.android.tsx diff --git a/lib/components/Keyboard/CustomKeyboardView/CustomKeyboardView.ios.tsx b/lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardView.ios.tsx similarity index 100% rename from lib/components/Keyboard/CustomKeyboardView/CustomKeyboardView.ios.tsx rename to lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardView.ios.tsx diff --git a/lib/components/Keyboard/CustomKeyboardView/CustomKeyboardViewBase.tsx b/lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardViewBase.tsx similarity index 100% rename from lib/components/Keyboard/CustomKeyboardView/CustomKeyboardViewBase.tsx rename to lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardViewBase.tsx diff --git a/lib/components/Keyboard/CustomKeyboardView/index.tsx b/lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/index.tsx similarity index 100% rename from lib/components/Keyboard/CustomKeyboardView/index.tsx rename to lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/index.tsx diff --git a/lib/components/Keyboard/CustomKeyboardView/index.web.tsx b/lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/index.web.tsx similarity index 100% rename from lib/components/Keyboard/CustomKeyboardView/index.web.tsx rename to lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/index.web.tsx diff --git a/lib/components/Keyboard/KeyboardRegistry/EventEmitterManager/__tests__/EventEmitterManager.spec.js b/lib/components/Keyboard/KeyboardAccessoryView/KeyboardRegistry/EventEmitterManager/__tests__/EventEmitterManager.spec.js similarity index 100% rename from lib/components/Keyboard/KeyboardRegistry/EventEmitterManager/__tests__/EventEmitterManager.spec.js rename to lib/components/Keyboard/KeyboardAccessoryView/KeyboardRegistry/EventEmitterManager/__tests__/EventEmitterManager.spec.js diff --git a/lib/components/Keyboard/KeyboardRegistry/EventEmitterManager/index.ts b/lib/components/Keyboard/KeyboardAccessoryView/KeyboardRegistry/EventEmitterManager/index.ts similarity index 100% rename from lib/components/Keyboard/KeyboardRegistry/EventEmitterManager/index.ts rename to lib/components/Keyboard/KeyboardAccessoryView/KeyboardRegistry/EventEmitterManager/index.ts diff --git a/lib/components/Keyboard/KeyboardRegistry/__tests__/KeyboardRegistry.spec.js b/lib/components/Keyboard/KeyboardAccessoryView/KeyboardRegistry/__tests__/KeyboardRegistry.spec.js similarity index 100% rename from lib/components/Keyboard/KeyboardRegistry/__tests__/KeyboardRegistry.spec.js rename to lib/components/Keyboard/KeyboardAccessoryView/KeyboardRegistry/__tests__/KeyboardRegistry.spec.js diff --git a/lib/components/Keyboard/KeyboardRegistry/index.ts b/lib/components/Keyboard/KeyboardAccessoryView/KeyboardRegistry/index.ts similarity index 100% rename from lib/components/Keyboard/KeyboardRegistry/index.ts rename to lib/components/Keyboard/KeyboardAccessoryView/KeyboardRegistry/index.ts diff --git a/lib/components/Keyboard/KeyboardRegistry/keyboardRegistry.api.json b/lib/components/Keyboard/KeyboardAccessoryView/KeyboardRegistry/keyboardRegistry.api.json similarity index 100% rename from lib/components/Keyboard/KeyboardRegistry/keyboardRegistry.api.json rename to lib/components/Keyboard/KeyboardAccessoryView/KeyboardRegistry/keyboardRegistry.api.json diff --git a/lib/components/Keyboard/KeyboardUtils/index.ts b/lib/components/Keyboard/KeyboardAccessoryView/KeyboardUtils/index.ts similarity index 100% rename from lib/components/Keyboard/KeyboardUtils/index.ts rename to lib/components/Keyboard/KeyboardAccessoryView/KeyboardUtils/index.ts diff --git a/lib/components/Keyboard/TextInputKeyboardManager/TextInputKeyboardManager.android.ts b/lib/components/Keyboard/KeyboardAccessoryView/TextInputKeyboardManager/TextInputKeyboardManager.android.ts similarity index 100% rename from lib/components/Keyboard/TextInputKeyboardManager/TextInputKeyboardManager.android.ts rename to lib/components/Keyboard/KeyboardAccessoryView/TextInputKeyboardManager/TextInputKeyboardManager.android.ts diff --git a/lib/components/Keyboard/TextInputKeyboardManager/TextInputKeyboardManager.ios.ts b/lib/components/Keyboard/KeyboardAccessoryView/TextInputKeyboardManager/TextInputKeyboardManager.ios.ts similarity index 100% rename from lib/components/Keyboard/TextInputKeyboardManager/TextInputKeyboardManager.ios.ts rename to lib/components/Keyboard/KeyboardAccessoryView/TextInputKeyboardManager/TextInputKeyboardManager.ios.ts diff --git a/lib/components/Keyboard/TextInputKeyboardManager/index.ts b/lib/components/Keyboard/KeyboardAccessoryView/TextInputKeyboardManager/index.ts similarity index 100% rename from lib/components/Keyboard/TextInputKeyboardManager/index.ts rename to lib/components/Keyboard/KeyboardAccessoryView/TextInputKeyboardManager/index.ts diff --git a/lib/components/Keyboard/KeyboardAccessoryView/index.tsx b/lib/components/Keyboard/KeyboardAccessoryView/index.tsx index cd57770d3a..c65d796f2b 100644 --- a/lib/components/Keyboard/KeyboardAccessoryView/index.tsx +++ b/lib/components/Keyboard/KeyboardAccessoryView/index.tsx @@ -10,8 +10,8 @@ import { LayoutChangeEvent } from 'react-native'; import KeyboardTrackingView, {KeyboardTrackingViewProps} from '../KeyboardTrackingView'; -import CustomKeyboardView from '../CustomKeyboardView'; -import KeyboardUtils, {KeyboardHeightListener} from '../KeyboardUtils'; +import CustomKeyboardView from './CustomKeyboardView'; +import KeyboardUtils, {KeyboardHeightListener} from './KeyboardUtils'; const IsIOS = Platform.OS === 'ios'; const IsAndroid = Platform.OS === 'android'; diff --git a/lib/components/Keyboard/index.ts b/lib/components/Keyboard/index.ts index 1dc7b836c3..ff4d49cd23 100644 --- a/lib/components/Keyboard/index.ts +++ b/lib/components/Keyboard/index.ts @@ -1,8 +1,8 @@ import KeyboardTrackingView, {KeyboardTrackingViewProps} from './KeyboardTrackingView'; import KeyboardAwareInsetsView from './KeyboardAwareInsetsView'; import KeyboardAccessoryView, {KeyboardAccessoryViewProps} from './KeyboardAccessoryView'; -import KeyboardRegistry from './KeyboardRegistry'; -import KeyboardUtils from './KeyboardUtils'; +import KeyboardRegistry from './KeyboardAccessoryView/KeyboardRegistry'; +import KeyboardUtils from './KeyboardAccessoryView/KeyboardUtils'; export {KeyboardTrackingViewProps, KeyboardAccessoryViewProps}; From ff6432786a0bd002b6f0926d942d42bcd2f1d76b Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Mon, 9 Jun 2025 12:04:07 +0300 Subject: [PATCH 07/21] fix api file and move KeyboardUtils outside folder --- .../{KeyboardUtils/index.ts => KeyboardUtils.ts} | 2 +- .../KeyboardAccessoryView/keyboardAccessoryView.api.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) rename lib/components/Keyboard/KeyboardAccessoryView/{KeyboardUtils/index.ts => KeyboardUtils.ts} (97%) diff --git a/lib/components/Keyboard/KeyboardAccessoryView/KeyboardUtils/index.ts b/lib/components/Keyboard/KeyboardAccessoryView/KeyboardUtils.ts similarity index 97% rename from lib/components/Keyboard/KeyboardAccessoryView/KeyboardUtils/index.ts rename to lib/components/Keyboard/KeyboardAccessoryView/KeyboardUtils.ts index ddb0cd980c..9ba7a9625d 100644 --- a/lib/components/Keyboard/KeyboardAccessoryView/KeyboardUtils/index.ts +++ b/lib/components/Keyboard/KeyboardAccessoryView/KeyboardUtils.ts @@ -1,6 +1,6 @@ import {useCallback, useEffect, useState} from 'react'; import {Keyboard, KeyboardEvent, Platform} from 'react-native'; -import TextInputKeyboardManager from '../TextInputKeyboardManager'; +import TextInputKeyboardManager from './TextInputKeyboardManager'; const IS_IOS = Platform.OS === 'ios'; const DEFAULT_KEYBOARD_HEIGHT = IS_IOS ? 216 : 312; // TODO: verify this value for iOS diff --git a/lib/components/Keyboard/KeyboardAccessoryView/keyboardAccessoryView.api.json b/lib/components/Keyboard/KeyboardAccessoryView/keyboardAccessoryView.api.json index 41cdaf816e..81ab20aa12 100644 --- a/lib/components/Keyboard/KeyboardAccessoryView/keyboardAccessoryView.api.json +++ b/lib/components/Keyboard/KeyboardAccessoryView/keyboardAccessoryView.api.json @@ -2,7 +2,6 @@ "name": "KeyboardAccessoryView", "category": "infra", "description": "View that allows replacing the default keyboard with other components", - "note": "This view is useful only for iOS", "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/keyboardAccessory/KeyboardAccessoryViewScreen.js", "images": [ "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/KeyboardAccessoryView/KeyboardAccessoryView.gif?raw=true" @@ -17,12 +16,13 @@ "name": "kbInputRef", "type": "any", "description": "The reference to the actual text input (or the keyboard may not reset when instructed to, etc.)", + "note": "iOS only", "required": true }, { "name": "kbComponent", "type": "string", - "description": "The keyboard ID (the componentID sent to KeyboardRegistry)" + "description": "The keyboard ID (the componentID sent to KeyboardRegistry)", }, {"name": "kbInitialProps", "type": "any", "description": "The props that will be sent to the KeyboardComponent"}, { From 2d649c0f5e36aedfd6bd0cfff5086f2df6c63977 Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Mon, 9 Jun 2025 12:04:21 +0300 Subject: [PATCH 08/21] Revert "fix api file and move KeyboardUtils outside folder" This reverts commit ff6432786a0bd002b6f0926d942d42bcd2f1d76b. --- .../{KeyboardUtils.ts => KeyboardUtils/index.ts} | 2 +- .../KeyboardAccessoryView/keyboardAccessoryView.api.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) rename lib/components/Keyboard/KeyboardAccessoryView/{KeyboardUtils.ts => KeyboardUtils/index.ts} (97%) diff --git a/lib/components/Keyboard/KeyboardAccessoryView/KeyboardUtils.ts b/lib/components/Keyboard/KeyboardAccessoryView/KeyboardUtils/index.ts similarity index 97% rename from lib/components/Keyboard/KeyboardAccessoryView/KeyboardUtils.ts rename to lib/components/Keyboard/KeyboardAccessoryView/KeyboardUtils/index.ts index 9ba7a9625d..ddb0cd980c 100644 --- a/lib/components/Keyboard/KeyboardAccessoryView/KeyboardUtils.ts +++ b/lib/components/Keyboard/KeyboardAccessoryView/KeyboardUtils/index.ts @@ -1,6 +1,6 @@ import {useCallback, useEffect, useState} from 'react'; import {Keyboard, KeyboardEvent, Platform} from 'react-native'; -import TextInputKeyboardManager from './TextInputKeyboardManager'; +import TextInputKeyboardManager from '../TextInputKeyboardManager'; const IS_IOS = Platform.OS === 'ios'; const DEFAULT_KEYBOARD_HEIGHT = IS_IOS ? 216 : 312; // TODO: verify this value for iOS diff --git a/lib/components/Keyboard/KeyboardAccessoryView/keyboardAccessoryView.api.json b/lib/components/Keyboard/KeyboardAccessoryView/keyboardAccessoryView.api.json index 81ab20aa12..41cdaf816e 100644 --- a/lib/components/Keyboard/KeyboardAccessoryView/keyboardAccessoryView.api.json +++ b/lib/components/Keyboard/KeyboardAccessoryView/keyboardAccessoryView.api.json @@ -2,6 +2,7 @@ "name": "KeyboardAccessoryView", "category": "infra", "description": "View that allows replacing the default keyboard with other components", + "note": "This view is useful only for iOS", "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/keyboardAccessory/KeyboardAccessoryViewScreen.js", "images": [ "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/KeyboardAccessoryView/KeyboardAccessoryView.gif?raw=true" @@ -16,13 +17,12 @@ "name": "kbInputRef", "type": "any", "description": "The reference to the actual text input (or the keyboard may not reset when instructed to, etc.)", - "note": "iOS only", "required": true }, { "name": "kbComponent", "type": "string", - "description": "The keyboard ID (the componentID sent to KeyboardRegistry)", + "description": "The keyboard ID (the componentID sent to KeyboardRegistry)" }, {"name": "kbInitialProps", "type": "any", "description": "The props that will be sent to the KeyboardComponent"}, { From 7442f3aa8fba8c9d9403ad5b406210496388adae Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Mon, 9 Jun 2025 12:05:09 +0300 Subject: [PATCH 09/21] fix api json --- .../KeyboardAccessoryView/keyboardAccessoryView.api.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/Keyboard/KeyboardAccessoryView/keyboardAccessoryView.api.json b/lib/components/Keyboard/KeyboardAccessoryView/keyboardAccessoryView.api.json index 41cdaf816e..eed4a41410 100644 --- a/lib/components/Keyboard/KeyboardAccessoryView/keyboardAccessoryView.api.json +++ b/lib/components/Keyboard/KeyboardAccessoryView/keyboardAccessoryView.api.json @@ -2,7 +2,6 @@ "name": "KeyboardAccessoryView", "category": "infra", "description": "View that allows replacing the default keyboard with other components", - "note": "This view is useful only for iOS", "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/keyboardAccessory/KeyboardAccessoryViewScreen.js", "images": [ "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/KeyboardAccessoryView/KeyboardAccessoryView.gif?raw=true" @@ -17,6 +16,7 @@ "name": "kbInputRef", "type": "any", "description": "The reference to the actual text input (or the keyboard may not reset when instructed to, etc.)", + "note": "iOS only", "required": true }, { From cd7ddae0a71788f27a78d2ba48bb3f1033631aad Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Mon, 9 Jun 2025 13:24:47 +0300 Subject: [PATCH 10/21] fix folder name to match component name --- .../{HighlighterOverlay => HighlighterOverlayView}/index.tsx | 0 .../index.web.tsx | 0 lib/components/index.ts | 2 +- lib/specs/highlighterViewNativeComponent.ts | 0 4 files changed, 1 insertion(+), 1 deletion(-) rename lib/components/{HighlighterOverlay => HighlighterOverlayView}/index.tsx (100%) rename lib/components/{HighlighterOverlay => HighlighterOverlayView}/index.web.tsx (100%) create mode 100644 lib/specs/highlighterViewNativeComponent.ts diff --git a/lib/components/HighlighterOverlay/index.tsx b/lib/components/HighlighterOverlayView/index.tsx similarity index 100% rename from lib/components/HighlighterOverlay/index.tsx rename to lib/components/HighlighterOverlayView/index.tsx diff --git a/lib/components/HighlighterOverlay/index.web.tsx b/lib/components/HighlighterOverlayView/index.web.tsx similarity index 100% rename from lib/components/HighlighterOverlay/index.web.tsx rename to lib/components/HighlighterOverlayView/index.web.tsx diff --git a/lib/components/index.ts b/lib/components/index.ts index f5b613c39a..7b120062e1 100644 --- a/lib/components/index.ts +++ b/lib/components/index.ts @@ -1,5 +1,5 @@ import DynamicFonts, {FontExtension} from './DynamicFonts'; -import HighlighterOverlayView from './HighlighterOverlay'; +import HighlighterOverlayView from './HighlighterOverlayView'; import SafeAreaSpacerView from './SafeArea/SafeAreaSpacerView'; import SafeAreaInsetsManager from './SafeArea/SafeAreaInsetsManager'; import Keyboard, {KeyboardTrackingViewProps, KeyboardAccessoryViewProps} from './Keyboard'; diff --git a/lib/specs/highlighterViewNativeComponent.ts b/lib/specs/highlighterViewNativeComponent.ts new file mode 100644 index 0000000000..e69de29bb2 From 7713b396c11cd591ec0ee2d7f3b0eaf747df2bc1 Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Mon, 9 Jun 2025 13:26:05 +0300 Subject: [PATCH 11/21] remove specs --- lib/specs/highlighterViewNativeComponent.ts | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 lib/specs/highlighterViewNativeComponent.ts diff --git a/lib/specs/highlighterViewNativeComponent.ts b/lib/specs/highlighterViewNativeComponent.ts deleted file mode 100644 index e69de29bb2..0000000000 From bcc8e19c811f32090612d9a8739c03f221dbd62b Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Tue, 10 Jun 2025 10:55:23 +0300 Subject: [PATCH 12/21] fix highligther view native registration --- .../HighlighterViewNativeComponent.ts | 77 +++++++++++++++++++ .../HighlighterOverlayView/index.tsx | 40 ++++++---- 2 files changed, 103 insertions(+), 14 deletions(-) create mode 100644 lib/components/HighlighterOverlayView/HighlighterViewNativeComponent.ts diff --git a/lib/components/HighlighterOverlayView/HighlighterViewNativeComponent.ts b/lib/components/HighlighterOverlayView/HighlighterViewNativeComponent.ts new file mode 100644 index 0000000000..bc6f15a75c --- /dev/null +++ b/lib/components/HighlighterOverlayView/HighlighterViewNativeComponent.ts @@ -0,0 +1,77 @@ +import type {ViewProps} from 'react-native'; +import type { + Float, + Int32, + WithDefault +} from 'react-native/Libraries/Types/CodegenTypes'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; + +export interface HighlightFrame { + x: Float; + y: Float; + width: Float; + height: Float; +} + +export interface MinimumRectSize { + width: Float; + height: Float; +} + +export interface HighlightViewTagParams { + paddingLeft?: WithDefault; + paddingTop?: WithDefault; + paddingRight?: WithDefault; + paddingBottom?: WithDefault; + offsetX?: WithDefault; + offsetY?: WithDefault; +} + +export interface NativeProps extends ViewProps { + /** + * The frame to highlight with x, y, width, height coordinates + */ + highlightFrame?: HighlightFrame; + + /** + * The overlay color (processed color int for Android) + */ + overlayColor?: WithDefault; + + /** + * The border radius for the highlighted area + */ + borderRadius?: WithDefault; + + /** + * The stroke color (processed color int for Android) + */ + strokeColor?: WithDefault; + + /** + * The stroke width + */ + strokeWidth?: WithDefault; + + /** + * The React tag of the view to highlight + */ + highlightViewTag?: Int32; + + /** + * Parameters for view-based highlighting including padding and offset + */ + highlightViewTagParams?: HighlightViewTagParams; + + /** + * Minimum rectangle size for the highlight area + */ + minimumRectSize?: MinimumRectSize; + + /** + * Inner padding for the highlight area + */ + innerPadding?: WithDefault; +} + +export default codegenNativeComponent('HighlighterView'); diff --git a/lib/components/HighlighterOverlayView/index.tsx b/lib/components/HighlighterOverlayView/index.tsx index ee3997515a..c8d65b88d3 100644 --- a/lib/components/HighlighterOverlayView/index.tsx +++ b/lib/components/HighlighterOverlayView/index.tsx @@ -1,7 +1,10 @@ import React from 'react'; -import {requireNativeComponent, processColor, Platform, StyleSheet, Modal, ViewStyle} from 'react-native'; +import {processColor, StyleSheet, Modal, ViewStyle} from 'react-native'; +// Import the Codegen specification for New Architecture +import HighlighterViewNativeComponent, { + HighlightViewTagParams as NativeHighlightViewTagParams +} from './HighlighterViewNativeComponent'; -const NativeHighlighterView = requireNativeComponent('HighlighterView'); const DefaultOverlayColor = 'rgba(0, 0, 0, 0.5)'; type HighlightFrameType = { @@ -34,7 +37,6 @@ export type HighlighterOverlayViewProps = { testID?: string; }; - const HighlighterOverlayView = (props: HighlighterOverlayViewProps) => { const { overlayColor, @@ -52,13 +54,22 @@ const HighlighterOverlayView = (props: HighlighterOverlayViewProps) => { innerPadding } = props; - let overlayColorToUse = overlayColor || DefaultOverlayColor; - let strokeColorToUse = strokeColor; - if (Platform.OS === 'android') { - // @ts-ignore - overlayColorToUse = processColor(overlayColorToUse); - // @ts-ignore - strokeColorToUse = processColor(strokeColorToUse); + // Process colors for New Architecture Codegen component + const overlayColorToUse = processColor(overlayColor || DefaultOverlayColor) as number; + const strokeColorToUse = strokeColor ? (processColor(strokeColor) as number) : undefined; + + // Convert highlightViewTagParams to match native Codegen spec + let nativeHighlightViewTagParams: NativeHighlightViewTagParams | undefined; + if (highlightViewTagParams) { + const padding = typeof highlightViewTagParams.padding === 'number' ? highlightViewTagParams.padding : 0; + nativeHighlightViewTagParams = { + paddingLeft: padding, + paddingTop: padding, + paddingRight: padding, + paddingBottom: padding, + offsetX: highlightViewTagParams.offset?.x || 0, + offsetY: highlightViewTagParams.offset?.y || 0 + }; } return ( @@ -68,18 +79,19 @@ const HighlighterOverlayView = (props: HighlighterOverlayViewProps) => { transparent onRequestClose={() => onRequestClose?.()} > - {children} From 1c7145ae7e86274161dd5efd6a51cf5286b86434 Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Tue, 10 Jun 2025 11:07:32 +0300 Subject: [PATCH 13/21] fix for SafeAreaSpacerView --- lib/components/SafeArea/SafeAreaSpacerView.tsx | 8 ++++---- .../SafeArea/SafeAreaSpacerViewNativeComponent.ts | 6 ++++++ 2 files changed, 10 insertions(+), 4 deletions(-) create mode 100644 lib/components/SafeArea/SafeAreaSpacerViewNativeComponent.ts diff --git a/lib/components/SafeArea/SafeAreaSpacerView.tsx b/lib/components/SafeArea/SafeAreaSpacerView.tsx index 602ab5a5fc..1b6c0b97c7 100644 --- a/lib/components/SafeArea/SafeAreaSpacerView.tsx +++ b/lib/components/SafeArea/SafeAreaSpacerView.tsx @@ -1,7 +1,8 @@ import React from 'react'; -import {View, requireNativeComponent, ViewStyle, Platform} from 'react-native'; +import {View, ViewStyle, Platform} from 'react-native'; +// Import the Codegen specification for New Architecture +import SafeAreaSpacerViewNativeComponent from './SafeAreaSpacerViewNativeComponent'; -const NativeSafeAreaSpacerView = requireNativeComponent('SafeAreaSpacerView'); const isIOS = Platform.OS === 'ios'; export type SafeAreaSpacerViewProps = { @@ -10,8 +11,7 @@ export type SafeAreaSpacerViewProps = { const SafeAreaSpacerView = ({style}: SafeAreaSpacerViewProps) => { return ( - // @ts-ignore - isIOS ? : + isIOS ? : ); }; diff --git a/lib/components/SafeArea/SafeAreaSpacerViewNativeComponent.ts b/lib/components/SafeArea/SafeAreaSpacerViewNativeComponent.ts new file mode 100644 index 0000000000..5e7bb7731b --- /dev/null +++ b/lib/components/SafeArea/SafeAreaSpacerViewNativeComponent.ts @@ -0,0 +1,6 @@ +import type {ViewProps} from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; + +// SafeAreaSpacerView doesn't need additional props beyond basic ViewProps +// The native implementation handles safe area insets automatically +export default codegenNativeComponent('SafeAreaSpacerView'); From ec09d65d74536c871cbb194cc68374f13adcf19b Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Tue, 10 Jun 2025 11:18:49 +0300 Subject: [PATCH 14/21] fix types --- .../SafeArea/SafeAreaSpacerViewNativeComponent.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/lib/components/SafeArea/SafeAreaSpacerViewNativeComponent.ts b/lib/components/SafeArea/SafeAreaSpacerViewNativeComponent.ts index 5e7bb7731b..2619a3e473 100644 --- a/lib/components/SafeArea/SafeAreaSpacerViewNativeComponent.ts +++ b/lib/components/SafeArea/SafeAreaSpacerViewNativeComponent.ts @@ -1,6 +1,10 @@ import type {ViewProps} from 'react-native'; import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -// SafeAreaSpacerView doesn't need additional props beyond basic ViewProps -// The native implementation handles safe area insets automatically -export default codegenNativeComponent('SafeAreaSpacerView'); +// eslint-disable-next-line @typescript-eslint/no-empty-interface +export interface NativeProps extends ViewProps { + // SafeAreaSpacerView doesn't need additional props beyond basic ViewProps + // The native implementation handles safe area insets automatically +} + +export default codegenNativeComponent('SafeAreaSpacerView'); From c3c46975dad9a3d1a0cdd2767a859831061040f2 Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Tue, 10 Jun 2025 11:24:53 +0300 Subject: [PATCH 15/21] fix for KeyboardTrackingView --- .../KeyboardTrackingView.ios.tsx | 13 ++-- .../KeyboardTrackingViewNativeComponent.ts | 72 +++++++++++++++++++ 2 files changed, 77 insertions(+), 8 deletions(-) create mode 100644 lib/components/Keyboard/KeyboardTrackingView/KeyboardTrackingViewNativeComponent.ts diff --git a/lib/components/Keyboard/KeyboardTrackingView/KeyboardTrackingView.ios.tsx b/lib/components/Keyboard/KeyboardTrackingView/KeyboardTrackingView.ios.tsx index abf730f6d8..e32b3275ae 100644 --- a/lib/components/Keyboard/KeyboardTrackingView/KeyboardTrackingView.ios.tsx +++ b/lib/components/Keyboard/KeyboardTrackingView/KeyboardTrackingView.ios.tsx @@ -1,16 +1,13 @@ -/** - * Created by artald on 15/05/2016. - */ - import React, {PureComponent} from 'react'; -import ReactNative, {requireNativeComponent, NativeModules} from 'react-native'; +import ReactNative, {NativeModules} from 'react-native'; +// Import the Codegen specification for New Architecture +import KeyboardTrackingViewNativeComponent from './KeyboardTrackingViewNativeComponent'; import {KeyboardTrackingViewProps} from './index'; -const NativeKeyboardTrackingView = requireNativeComponent('KeyboardTrackingViewTemp'); const KeyboardTrackingViewTempManager = NativeModules.KeyboardTrackingViewTempManager; /** - * @description: A UI component that enables “keyboard tracking" for this view and it's sub-views. + * @description: A UI component that enables "keyboard tracking" for this view and it's sub-views. * Would typically be used when you have a TextField or TextInput inside this view. * * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/KeyboardTrackingViewScreen.js @@ -27,7 +24,7 @@ class KeyboardTrackingView extends PureComponent { ref?: any; render() { - return (this.ref = r)}/>; + return (this.ref = r)}/>; } async getNativeProps() { diff --git a/lib/components/Keyboard/KeyboardTrackingView/KeyboardTrackingViewNativeComponent.ts b/lib/components/Keyboard/KeyboardTrackingView/KeyboardTrackingViewNativeComponent.ts new file mode 100644 index 0000000000..0c602c6897 --- /dev/null +++ b/lib/components/Keyboard/KeyboardTrackingView/KeyboardTrackingViewNativeComponent.ts @@ -0,0 +1,72 @@ +import type {ViewProps} from 'react-native'; +import type { + Int32, + WithDefault +} from 'react-native/Libraries/Types/CodegenTypes'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; + +export interface NativeProps extends ViewProps { + /** + * Enables tracking of the keyboard when it's dismissed interactively (false by default). + */ + trackInteractive?: WithDefault; + + /** + * iOS only. + * Show the keyboard on a negative scroll + */ + revealKeyboardInteractive?: WithDefault; + + /** + * iOS only. + * Set to false to turn off inset management and manage it yourself + */ + manageScrollView?: WithDefault; + + /** + * iOS only. + * Set to true manageScrollView is set to true and still does not work + */ + requiresSameParentToManageScrollView?: WithDefault; + + /** + * iOS only. + * Allow hitting sub-views that are placed beyond the view bounds + */ + allowHitsOutsideBounds?: WithDefault; + + /** + * Should the scrollView scroll to the focused input + */ + scrollToFocusedInput?: WithDefault; + + /** + * iOS only. + * The scrolling behavior (NONE | SCROLL_TO_BOTTOM_INVERTED_ONLY | FIXED_OFFSET) + */ + scrollBehavior?: WithDefault; + + /** + * iOS only. + * Add a SafeArea view beneath the KeyboardAccessoryView + */ + addBottomView?: WithDefault; + + /** + * iOS only. + * The bottom view's color + */ + bottomViewColor?: string; + + /** + * Allow control safe area + */ + useSafeArea?: WithDefault; + + /** + * Whether or not to include bottom tab bar inset + */ + usesBottomTabs?: WithDefault; +} + +export default codegenNativeComponent('KeyboardTrackingViewTemp'); From 76284d3a671dac82c503b6ef2ce2f83ca50fa914 Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Tue, 10 Jun 2025 11:48:53 +0300 Subject: [PATCH 16/21] trying to fix failed CI build --- tsconfig.json | 1 - 1 file changed, 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 55cfbe7ece..87cd5d0ac2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,7 +14,6 @@ // "noEmit": true, // "checkJs": true, "allowJs": false, - "emitDeclarationOnly": true, // "noImplicitAny": false "declaration": true, // "declarationDir": "./generatedTypes", From 6f1711e6a8a333835d5c018b3a3a47d00e6247ee Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Wed, 11 Jun 2025 15:48:56 +0300 Subject: [PATCH 17/21] SafeAreaSpacesView - moving to react implementation using native SafeAreaManager --- .../SafeAreaSpacerViewScreen.tsx | 1 + .../SafeArea/SafeAreaInsetsManager.ts | 60 ++++++++-------- .../SafeArea/SafeAreaSpacerView.tsx | 72 ++++++++++++++++--- .../SafeAreaSpacerViewNativeComponent.ts | 10 --- 4 files changed, 90 insertions(+), 53 deletions(-) delete mode 100644 lib/components/SafeArea/SafeAreaSpacerViewNativeComponent.ts diff --git a/demo/src/screens/nativeComponentScreens/SafeAreaSpacerViewScreen.tsx b/demo/src/screens/nativeComponentScreens/SafeAreaSpacerViewScreen.tsx index 5e3871ac35..c66bfe59c9 100644 --- a/demo/src/screens/nativeComponentScreens/SafeAreaSpacerViewScreen.tsx +++ b/demo/src/screens/nativeComponentScreens/SafeAreaSpacerViewScreen.tsx @@ -23,6 +23,7 @@ export default class SafeAreaSpacerViewScreen extends PureComponent { SafeAreaSpacerView {'can be used as a BOTTOM or TOP spacer and will get the height of the safe area insets'} + diff --git a/lib/components/SafeArea/SafeAreaInsetsManager.ts b/lib/components/SafeArea/SafeAreaInsetsManager.ts index ab0cc3fbc1..77bb6e4c11 100644 --- a/lib/components/SafeArea/SafeAreaInsetsManager.ts +++ b/lib/components/SafeArea/SafeAreaInsetsManager.ts @@ -1,47 +1,24 @@ /* eslint no-underscore-dangle: 0 */ -import {NativeModules, NativeEventEmitter} from 'react-native'; import _ from 'lodash'; -type SafeAreaInsetsType = { top: number; left: number; bottom: number; right: number; } | null - -let SafeAreaInsetsCache: SafeAreaInsetsType = null; - -const NativeSafeAreaManager = NativeModules.SafeAreaManager; +type SafeAreaInsetsType = { top: number; left: number; bottom: number; right: number; } | null; class SafeAreaInsetsManager { - _defaultInsets: SafeAreaInsetsType = {top: 0, left: 0, bottom: 0, right: 0}; - _safeAreaInsets: SafeAreaInsetsType = {top: 0, left: 0, bottom: 0, right: 0}; + _defaultInsets: SafeAreaInsetsType = {top: 47, left: 0, bottom: 34, right: 0}; // Common iPhone safe area values + _safeAreaInsets: SafeAreaInsetsType = {top: 47, left: 0, bottom: 34, right: 0}; _safeAreaChangedDelegates: Array = []; constructor() { - this.addSafeAreaChangedListener(); - } - - addSafeAreaChangedListener() { - if (!NativeSafeAreaManager) { - return; - } - const NativeSafeAreaEvents = new NativeEventEmitter(NativeSafeAreaManager); - NativeSafeAreaEvents.addListener('SafeAreaInsetsDidChangeEvent', (safeAreaInsets) => { - SafeAreaInsetsCache = safeAreaInsets; - this._safeAreaInsets = SafeAreaInsetsCache; - _.forEach(this._safeAreaChangedDelegates, (delegate) => { - if (delegate.onSafeAreaInsetsDidChangeEvent) { - delegate.onSafeAreaInsetsDidChangeEvent(this._safeAreaInsets); - } else { - console.warn('ERROR', 'SafeAreaInsetsManager', 'safe area changed delegate was added, but it does not implement the onSafeAreaInsetsDidChangeEvent method'); //eslint-disable-line - } - }); - }); + // Initialize with default values + this._safeAreaInsets = this._defaultInsets; + console.log('SafeAreaInsetsManager: Using hardcoded safe area insets:', this._defaultInsets); } async _updateInsets() { - if (NativeSafeAreaManager && SafeAreaInsetsCache === null) { - SafeAreaInsetsCache = await NativeSafeAreaManager.getSafeAreaInsets(); - this._safeAreaInsets = SafeAreaInsetsCache; - } + // Temporarily disabled TurboModule usage - using hardcoded values + this._safeAreaInsets = this._defaultInsets; } async getSafeAreaInsets() { @@ -49,6 +26,8 @@ class SafeAreaInsetsManager { return this._safeAreaInsets; } + // For backwards compatibility - delegates can still be added but won't receive events + // until proper event handling is implemented in the native side for TurboModules addSafeAreaChangedDelegate(delegate: any) { this._safeAreaChangedDelegates.push(delegate); } @@ -62,6 +41,23 @@ class SafeAreaInsetsManager { get defaultInsets() { return this._defaultInsets; } + + // Method to manually refresh safe area insets and notify delegates + async refreshSafeAreaInsets() { + const previousInsets = this._safeAreaInsets; + await this._updateInsets(); + + // Notify delegates if insets changed + if (!_.isEqual(previousInsets, this._safeAreaInsets)) { + _.forEach(this._safeAreaChangedDelegates, (delegate) => { + if (delegate.onSafeAreaInsetsDidChangeEvent) { + delegate.onSafeAreaInsetsDidChangeEvent(this._safeAreaInsets); + } + }); + } + } } -export default new SafeAreaInsetsManager(); +const instance = new SafeAreaInsetsManager(); + +export default instance; diff --git a/lib/components/SafeArea/SafeAreaSpacerView.tsx b/lib/components/SafeArea/SafeAreaSpacerView.tsx index 1b6c0b97c7..e03b39fd7e 100644 --- a/lib/components/SafeArea/SafeAreaSpacerView.tsx +++ b/lib/components/SafeArea/SafeAreaSpacerView.tsx @@ -1,19 +1,69 @@ -import React from 'react'; -import {View, ViewStyle, Platform} from 'react-native'; -// Import the Codegen specification for New Architecture -import SafeAreaSpacerViewNativeComponent from './SafeAreaSpacerViewNativeComponent'; - -const isIOS = Platform.OS === 'ios'; +import React, {useState, useEffect, useCallback, useMemo} from 'react'; +import {View, ViewStyle, Dimensions} from 'react-native'; +import SafeAreaInsetsManager from './SafeAreaInsetsManager'; export type SafeAreaSpacerViewProps = { style?: ViewStyle; }; -const SafeAreaSpacerView = ({style}: SafeAreaSpacerViewProps) => { - return ( - isIOS ? : - ); +const SafeAreaSpacerView = ({style}: SafeAreaSpacerViewProps) => { + const [safeAreaInsets, setSafeAreaInsets] = useState({top: 0, left: 0, bottom: 0, right: 0}); + const [spacerHeight, setSpacerHeight] = useState(0); + + useEffect(() => { + const getSafeAreaInsets = async () => { + try { + const insets = await SafeAreaInsetsManager.getSafeAreaInsets(); + if (insets) { + setSafeAreaInsets(insets); + } + } catch (error) { + console.warn('SafeAreaSpacerView: Failed to get safe area insets:', error); + } + }; + + getSafeAreaInsets(); + + // Add delegate to listen for safe area changes + const delegate = { + onSafeAreaInsetsDidChangeEvent: (insets: any) => { + if (insets) { + setSafeAreaInsets(insets); + } + } + }; + + SafeAreaInsetsManager.addSafeAreaChangedDelegate(delegate); + + return () => { + SafeAreaInsetsManager.removeSafeAreaChangedDelegate(delegate); + }; + }, []); + + // Always add onLayout, regardless of insets - wrapped with useCallback + const handleLayout = useCallback((event: any) => { + const {y} = event.nativeEvent.layout; + const screenHeight = Dimensions.get('window').height; + + let height = 0; + // If positioned in top half of screen, use top safe area + if (y < safeAreaInsets.top) { + height = safeAreaInsets.top; + } else if (y > screenHeight - safeAreaInsets.bottom) { + // If positioned in bottom half of screen, use bottom safe area + height = safeAreaInsets.bottom; + } + + setSpacerHeight(height); + }, [safeAreaInsets]); + + const spacerStyle = useMemo(() => ({ + height: spacerHeight, + ...style + }), [spacerHeight, style]); + + return ; }; -SafeAreaSpacerView.displayName = 'IGNORE'; +SafeAreaSpacerView.displayName = 'SafeAreaSpacerView'; export default SafeAreaSpacerView; diff --git a/lib/components/SafeArea/SafeAreaSpacerViewNativeComponent.ts b/lib/components/SafeArea/SafeAreaSpacerViewNativeComponent.ts deleted file mode 100644 index 2619a3e473..0000000000 --- a/lib/components/SafeArea/SafeAreaSpacerViewNativeComponent.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type {ViewProps} from 'react-native'; -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; - -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface NativeProps extends ViewProps { - // SafeAreaSpacerView doesn't need additional props beyond basic ViewProps - // The native implementation handles safe area insets automatically -} - -export default codegenNativeComponent('SafeAreaSpacerView'); From f6a217a4ae5852c82b87cb6736ccc3e091ceac74 Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Wed, 11 Jun 2025 15:54:28 +0300 Subject: [PATCH 18/21] manager changes --- .../SafeArea/SafeAreaInsetsManager.ts | 39 ++++++++++++++++--- 1 file changed, 33 insertions(+), 6 deletions(-) diff --git a/lib/components/SafeArea/SafeAreaInsetsManager.ts b/lib/components/SafeArea/SafeAreaInsetsManager.ts index 77bb6e4c11..aae69f32a2 100644 --- a/lib/components/SafeArea/SafeAreaInsetsManager.ts +++ b/lib/components/SafeArea/SafeAreaInsetsManager.ts @@ -1,24 +1,50 @@ /* eslint no-underscore-dangle: 0 */ import _ from 'lodash'; +import {TurboModuleRegistry, TurboModule} from 'react-native'; type SafeAreaInsetsType = { top: number; left: number; bottom: number; right: number; } | null; -class SafeAreaInsetsManager { +// TurboModule interface for the new architecture +interface Spec extends TurboModule { + getSafeAreaInsets(): Promise; +} + +let SafeAreaInsetsCache: SafeAreaInsetsType = null; + +// Try to get the native module with proper error handling +let NativeSafeAreaManager: Spec | null = null; - _defaultInsets: SafeAreaInsetsType = {top: 47, left: 0, bottom: 34, right: 0}; // Common iPhone safe area values - _safeAreaInsets: SafeAreaInsetsType = {top: 47, left: 0, bottom: 34, right: 0}; +try { + NativeSafeAreaManager = TurboModuleRegistry.getEnforcing('SafeAreaManager'); +} catch (error) { + console.warn('SafeAreaInsetsManager: Failed to load TurboModule SafeAreaManager:', error); +} +class SafeAreaInsetsManager { + _defaultInsets: SafeAreaInsetsType = {top: 44, left: 0, bottom: 34, right: 0}; // Common iPhone safe area values as fallback + _safeAreaInsets: SafeAreaInsetsType = {top: 44, left: 0, bottom: 34, right: 0}; _safeAreaChangedDelegates: Array = []; constructor() { // Initialize with default values this._safeAreaInsets = this._defaultInsets; - console.log('SafeAreaInsetsManager: Using hardcoded safe area insets:', this._defaultInsets); } async _updateInsets() { - // Temporarily disabled TurboModule usage - using hardcoded values - this._safeAreaInsets = this._defaultInsets; + if (NativeSafeAreaManager && SafeAreaInsetsCache === null) { + try { + SafeAreaInsetsCache = await NativeSafeAreaManager.getSafeAreaInsets(); + this._safeAreaInsets = SafeAreaInsetsCache; + } catch (error) { + console.warn('SafeAreaInsetsManager: Failed to get safe area insets:', error); + // Fallback to default values + this._safeAreaInsets = this._defaultInsets; + } + } else if (SafeAreaInsetsCache !== null) { + this._safeAreaInsets = SafeAreaInsetsCache; + } else { + this._safeAreaInsets = this._defaultInsets; + } } async getSafeAreaInsets() { @@ -45,6 +71,7 @@ class SafeAreaInsetsManager { // Method to manually refresh safe area insets and notify delegates async refreshSafeAreaInsets() { const previousInsets = this._safeAreaInsets; + SafeAreaInsetsCache = null; // Force refresh await this._updateInsets(); // Notify delegates if insets changed From 7b7a92c0bb568d8036f60d130d4295ef047dc42a Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Thu, 12 Jun 2025 08:40:19 +0300 Subject: [PATCH 19/21] fix safe area --- .../SafeArea/SafeAreaInsetsManager.ts | 41 ++------------- .../SafeArea/SafeAreaSpacerView.tsx | 52 ++++--------------- src/commons/Constants.ts | 9 +++- 3 files changed, 22 insertions(+), 80 deletions(-) diff --git a/lib/components/SafeArea/SafeAreaInsetsManager.ts b/lib/components/SafeArea/SafeAreaInsetsManager.ts index aae69f32a2..498a822cca 100644 --- a/lib/components/SafeArea/SafeAreaInsetsManager.ts +++ b/lib/components/SafeArea/SafeAreaInsetsManager.ts @@ -1,28 +1,10 @@ -/* eslint no-underscore-dangle: 0 */ - import _ from 'lodash'; -import {TurboModuleRegistry, TurboModule} from 'react-native'; type SafeAreaInsetsType = { top: number; left: number; bottom: number; right: number; } | null; -// TurboModule interface for the new architecture -interface Spec extends TurboModule { - getSafeAreaInsets(): Promise; -} - -let SafeAreaInsetsCache: SafeAreaInsetsType = null; - -// Try to get the native module with proper error handling -let NativeSafeAreaManager: Spec | null = null; - -try { - NativeSafeAreaManager = TurboModuleRegistry.getEnforcing('SafeAreaManager'); -} catch (error) { - console.warn('SafeAreaInsetsManager: Failed to load TurboModule SafeAreaManager:', error); -} class SafeAreaInsetsManager { - _defaultInsets: SafeAreaInsetsType = {top: 44, left: 0, bottom: 34, right: 0}; // Common iPhone safe area values as fallback - _safeAreaInsets: SafeAreaInsetsType = {top: 44, left: 0, bottom: 34, right: 0}; + _defaultInsets: SafeAreaInsetsType = {top: 47, left: 0, bottom: 34, right: 0}; // Common iPhone safe area values + _safeAreaInsets: SafeAreaInsetsType = {top: 47, left: 0, bottom: 34, right: 0}; _safeAreaChangedDelegates: Array = []; constructor() { @@ -31,20 +13,8 @@ class SafeAreaInsetsManager { } async _updateInsets() { - if (NativeSafeAreaManager && SafeAreaInsetsCache === null) { - try { - SafeAreaInsetsCache = await NativeSafeAreaManager.getSafeAreaInsets(); - this._safeAreaInsets = SafeAreaInsetsCache; - } catch (error) { - console.warn('SafeAreaInsetsManager: Failed to get safe area insets:', error); - // Fallback to default values - this._safeAreaInsets = this._defaultInsets; - } - } else if (SafeAreaInsetsCache !== null) { - this._safeAreaInsets = SafeAreaInsetsCache; - } else { - this._safeAreaInsets = this._defaultInsets; - } + // Using hardcoded values - no TurboModule + this._safeAreaInsets = this._defaultInsets; } async getSafeAreaInsets() { @@ -52,8 +22,6 @@ class SafeAreaInsetsManager { return this._safeAreaInsets; } - // For backwards compatibility - delegates can still be added but won't receive events - // until proper event handling is implemented in the native side for TurboModules addSafeAreaChangedDelegate(delegate: any) { this._safeAreaChangedDelegates.push(delegate); } @@ -71,7 +39,6 @@ class SafeAreaInsetsManager { // Method to manually refresh safe area insets and notify delegates async refreshSafeAreaInsets() { const previousInsets = this._safeAreaInsets; - SafeAreaInsetsCache = null; // Force refresh await this._updateInsets(); // Notify delegates if insets changed diff --git a/lib/components/SafeArea/SafeAreaSpacerView.tsx b/lib/components/SafeArea/SafeAreaSpacerView.tsx index e03b39fd7e..8c9fc289cf 100644 --- a/lib/components/SafeArea/SafeAreaSpacerView.tsx +++ b/lib/components/SafeArea/SafeAreaSpacerView.tsx @@ -1,69 +1,39 @@ -import React, {useState, useEffect, useCallback, useMemo} from 'react'; +import React, {useState, useCallback} from 'react'; import {View, ViewStyle, Dimensions} from 'react-native'; -import SafeAreaInsetsManager from './SafeAreaInsetsManager'; export type SafeAreaSpacerViewProps = { style?: ViewStyle; }; const SafeAreaSpacerView = ({style}: SafeAreaSpacerViewProps) => { - const [safeAreaInsets, setSafeAreaInsets] = useState({top: 0, left: 0, bottom: 0, right: 0}); const [spacerHeight, setSpacerHeight] = useState(0); - useEffect(() => { - const getSafeAreaInsets = async () => { - try { - const insets = await SafeAreaInsetsManager.getSafeAreaInsets(); - if (insets) { - setSafeAreaInsets(insets); - } - } catch (error) { - console.warn('SafeAreaSpacerView: Failed to get safe area insets:', error); - } - }; + // Hardcoded safe area values - typical iPhone values + const safeAreaInsets = {top: 47, left: 0, bottom: 34, right: 0}; - getSafeAreaInsets(); - - // Add delegate to listen for safe area changes - const delegate = { - onSafeAreaInsetsDidChangeEvent: (insets: any) => { - if (insets) { - setSafeAreaInsets(insets); - } - } - }; - - SafeAreaInsetsManager.addSafeAreaChangedDelegate(delegate); - - return () => { - SafeAreaInsetsManager.removeSafeAreaChangedDelegate(delegate); - }; - }, []); - - // Always add onLayout, regardless of insets - wrapped with useCallback - const handleLayout = useCallback((event: any) => { + // Position detection with useCallback + const handleLayout = useCallback((event: any) => { const {y} = event.nativeEvent.layout; const screenHeight = Dimensions.get('window').height; - + let height = 0; - // If positioned in top half of screen, use top safe area + // Simple detection: top half = top inset, bottom half = bottom inset if (y < safeAreaInsets.top) { height = safeAreaInsets.top; } else if (y > screenHeight - safeAreaInsets.bottom) { - // If positioned in bottom half of screen, use bottom safe area height = safeAreaInsets.bottom; } setSpacerHeight(height); - }, [safeAreaInsets]); + }, []); - const spacerStyle = useMemo(() => ({ + const spacerStyle = { height: spacerHeight, ...style - }), [spacerHeight, style]); + }; return ; }; -SafeAreaSpacerView.displayName = 'SafeAreaSpacerView'; +SafeAreaSpacerView.displayName = 'IGNORE'; export default SafeAreaSpacerView; diff --git a/src/commons/Constants.ts b/src/commons/Constants.ts index 7f62e63633..e01f7304ed 100644 --- a/src/commons/Constants.ts +++ b/src/commons/Constants.ts @@ -44,8 +44,13 @@ function setStatusBarHeight() { statusBarHeight = (StatusBar.currentHeight ?? StatusBarManager?.HEIGHT) || 0; if (isIOS && StatusBarManager) { - // override guesstimate height with the actual height from StatusBarManager - StatusBarManager.getHeight((data:{height:number}) => (statusBarHeight = data.height)); + try { + // override guesstimate height with the actual height from StatusBarManager + StatusBarManager.getHeight((data:{height:number}) => (statusBarHeight = data.height)); + } catch (error) { + console.warn('Constants: StatusBarManager.getHeight not available in new architecture, using fallback'); + // Keep the fallback height we already set above + } } } From 652ddae9c85a087ab37da21dafb3f0e97f6c14e1 Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Thu, 12 Jun 2025 13:28:01 +0300 Subject: [PATCH 20/21] fix SafeAreaSpacerView again --- .../SafeArea/SafeAreaInsetsManager.ts | 108 ++++++++++++++++-- .../SafeArea/SafeAreaSpacerView.tsx | 45 ++++++-- 2 files changed, 139 insertions(+), 14 deletions(-) diff --git a/lib/components/SafeArea/SafeAreaInsetsManager.ts b/lib/components/SafeArea/SafeAreaInsetsManager.ts index 498a822cca..1cf4bbc9fa 100644 --- a/lib/components/SafeArea/SafeAreaInsetsManager.ts +++ b/lib/components/SafeArea/SafeAreaInsetsManager.ts @@ -1,20 +1,116 @@ +/* eslint no-underscore-dangle: 0 */ + import _ from 'lodash'; +import {NativeModules, DeviceEventEmitter, Platform} from 'react-native'; type SafeAreaInsetsType = { top: number; left: number; bottom: number; right: number; } | null; +let SafeAreaInsetsCache: SafeAreaInsetsType = null; + class SafeAreaInsetsManager { + _defaultInsets: SafeAreaInsetsType = {top: 47, left: 0, bottom: 34, right: 0}; // Common iPhone safe area values _safeAreaInsets: SafeAreaInsetsType = {top: 47, left: 0, bottom: 34, right: 0}; _safeAreaChangedDelegates: Array = []; + _nativeModule: any = null; constructor() { // Initialize with default values this._safeAreaInsets = this._defaultInsets; + + // Try to connect to native module + this.setupNativeConnection(); + } + + setupNativeConnection() { + try { + // Access the native module directly without causing getConstants + this._nativeModule = NativeModules.SafeAreaManager; + + if (this._nativeModule) { + console.log('SafeAreaInsetsManager: Connected to native SafeAreaManager'); + + // Set up event listener using DeviceEventEmitter instead of NativeEventEmitter + // This avoids getConstants issues + this.setupEventListener(); + + // Get initial safe area insets + this.getInitialInsets(); + } else { + console.log('SafeAreaInsetsManager: Native SafeAreaManager not available, using defaults'); + } + } catch (error) { + console.warn('SafeAreaInsetsManager: Failed to connect to native module:', error); + } + } + + setupEventListener() { + if (Platform.OS !== 'ios') { + return; + } + + try { + // Use DeviceEventEmitter instead of NativeEventEmitter to avoid getConstants + console.log('SafeAreaInsetsManager: Setting up DeviceEventEmitter listener...'); + + DeviceEventEmitter.addListener('SafeAreaInsetsDidChangeEvent', (data) => { + console.log('SafeAreaInsetsManager: Received safe area change event:', data); + if (data) { + SafeAreaInsetsCache = data; + this._safeAreaInsets = data; + this.notifyDelegates(data); + } + }); + + console.log('SafeAreaInsetsManager: DeviceEventEmitter listener setup complete'); + } catch (error) { + console.warn('SafeAreaInsetsManager: Failed to setup event listener:', error); + } + } + + async getInitialInsets() { + if (!this._nativeModule) { + return; + } + + try { + console.log('SafeAreaInsetsManager: Getting initial insets from native...'); + const insets = await this._nativeModule.getSafeAreaInsets(); + console.log('SafeAreaInsetsManager: Received initial insets:', insets); + + if (insets) { + SafeAreaInsetsCache = insets; + this._safeAreaInsets = insets; + // Don't notify delegates yet as components might not be ready + } + } catch (error) { + console.warn('SafeAreaInsetsManager: Failed to get initial insets:', error); + } + } + + notifyDelegates(insets: SafeAreaInsetsType) { + console.log('SafeAreaInsetsManager: Notifying', this._safeAreaChangedDelegates.length, 'delegates'); + _.forEach(this._safeAreaChangedDelegates, (delegate) => { + if (delegate.onSafeAreaInsetsDidChangeEvent) { + delegate.onSafeAreaInsetsDidChangeEvent(insets); + } + }); } async _updateInsets() { - // Using hardcoded values - no TurboModule - this._safeAreaInsets = this._defaultInsets; + if (this._nativeModule && SafeAreaInsetsCache === null) { + try { + SafeAreaInsetsCache = await this._nativeModule.getSafeAreaInsets(); + this._safeAreaInsets = SafeAreaInsetsCache; + } catch (error) { + console.warn('SafeAreaInsetsManager: Failed to get native insets:', error); + this._safeAreaInsets = this._defaultInsets; + } + } else if (SafeAreaInsetsCache !== null) { + this._safeAreaInsets = SafeAreaInsetsCache; + } else { + this._safeAreaInsets = this._defaultInsets; + } } async getSafeAreaInsets() { @@ -23,6 +119,7 @@ class SafeAreaInsetsManager { } addSafeAreaChangedDelegate(delegate: any) { + console.log('SafeAreaInsetsManager: Adding delegate, total will be:', this._safeAreaChangedDelegates.length + 1); this._safeAreaChangedDelegates.push(delegate); } @@ -39,15 +136,12 @@ class SafeAreaInsetsManager { // Method to manually refresh safe area insets and notify delegates async refreshSafeAreaInsets() { const previousInsets = this._safeAreaInsets; + SafeAreaInsetsCache = null; // Force refresh await this._updateInsets(); // Notify delegates if insets changed if (!_.isEqual(previousInsets, this._safeAreaInsets)) { - _.forEach(this._safeAreaChangedDelegates, (delegate) => { - if (delegate.onSafeAreaInsetsDidChangeEvent) { - delegate.onSafeAreaInsetsDidChangeEvent(this._safeAreaInsets); - } - }); + this.notifyDelegates(this._safeAreaInsets); } } } diff --git a/lib/components/SafeArea/SafeAreaSpacerView.tsx b/lib/components/SafeArea/SafeAreaSpacerView.tsx index 8c9fc289cf..5d19fe11a0 100644 --- a/lib/components/SafeArea/SafeAreaSpacerView.tsx +++ b/lib/components/SafeArea/SafeAreaSpacerView.tsx @@ -1,15 +1,44 @@ -import React, {useState, useCallback} from 'react'; +import React, {useState, useCallback, useEffect} from 'react'; import {View, ViewStyle, Dimensions} from 'react-native'; +import SafeAreaInsetsManager from './SafeAreaInsetsManager'; export type SafeAreaSpacerViewProps = { style?: ViewStyle; }; const SafeAreaSpacerView = ({style}: SafeAreaSpacerViewProps) => { + const [safeAreaInsets, setSafeAreaInsets] = useState({top: 0, left: 0, bottom: 0, right: 0}); const [spacerHeight, setSpacerHeight] = useState(0); - // Hardcoded safe area values - typical iPhone values - const safeAreaInsets = {top: 47, left: 0, bottom: 34, right: 0}; + useEffect(() => { + const getSafeAreaInsets = async () => { + try { + const insets = await SafeAreaInsetsManager.getSafeAreaInsets(); + if (insets) { + setSafeAreaInsets(insets); + } + } catch (error) { + console.warn('SafeAreaSpacerView: Failed to get initial safe area insets:', error); + } + }; + + getSafeAreaInsets(); + + // Add delegate to listen for safe area changes from native component + const delegate = { + onSafeAreaInsetsDidChangeEvent: (insets: any) => { + if (insets) { + setSafeAreaInsets(insets); + } + } + }; + + SafeAreaInsetsManager.addSafeAreaChangedDelegate(delegate); + + return () => { + SafeAreaInsetsManager.removeSafeAreaChangedDelegate(delegate); + }; + }, []); // Position detection with useCallback const handleLayout = useCallback((event: any) => { @@ -17,15 +46,17 @@ const SafeAreaSpacerView = ({style}: SafeAreaSpacerViewProps) => { const screenHeight = Dimensions.get('window').height; let height = 0; - // Simple detection: top half = top inset, bottom half = bottom inset + // Check if positioned within safe area bounds if (y < safeAreaInsets.top) { height = safeAreaInsets.top; } else if (y > screenHeight - safeAreaInsets.bottom) { height = safeAreaInsets.bottom; } - setSpacerHeight(height); - }, []); + if (height !== spacerHeight) { + setSpacerHeight(height); + } + }, [safeAreaInsets, spacerHeight]); const spacerStyle = { height: spacerHeight, @@ -35,5 +66,5 @@ const SafeAreaSpacerView = ({style}: SafeAreaSpacerViewProps) => { return ; }; -SafeAreaSpacerView.displayName = 'IGNORE'; +SafeAreaSpacerView.displayName = 'SafeAreaSpacerView'; export default SafeAreaSpacerView; From fae58ab26607549015dd683f59d6631678bfe20f Mon Sep 17 00:00:00 2001 From: Inbal Tish Date: Thu, 12 Jun 2025 14:49:33 +0300 Subject: [PATCH 21/21] removing logs --- lib/components/SafeArea/SafeAreaInsetsManager.ts | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/lib/components/SafeArea/SafeAreaInsetsManager.ts b/lib/components/SafeArea/SafeAreaInsetsManager.ts index 1cf4bbc9fa..3a699479ad 100644 --- a/lib/components/SafeArea/SafeAreaInsetsManager.ts +++ b/lib/components/SafeArea/SafeAreaInsetsManager.ts @@ -8,7 +8,6 @@ type SafeAreaInsetsType = { top: number; left: number; bottom: number; right: nu let SafeAreaInsetsCache: SafeAreaInsetsType = null; class SafeAreaInsetsManager { - _defaultInsets: SafeAreaInsetsType = {top: 47, left: 0, bottom: 34, right: 0}; // Common iPhone safe area values _safeAreaInsets: SafeAreaInsetsType = {top: 47, left: 0, bottom: 34, right: 0}; _safeAreaChangedDelegates: Array = []; @@ -27,9 +26,7 @@ class SafeAreaInsetsManager { // Access the native module directly without causing getConstants this._nativeModule = NativeModules.SafeAreaManager; - if (this._nativeModule) { - console.log('SafeAreaInsetsManager: Connected to native SafeAreaManager'); - + if (this._nativeModule) { // Set up event listener using DeviceEventEmitter instead of NativeEventEmitter // This avoids getConstants issues this.setupEventListener(); @@ -50,19 +47,14 @@ class SafeAreaInsetsManager { } try { - // Use DeviceEventEmitter instead of NativeEventEmitter to avoid getConstants - console.log('SafeAreaInsetsManager: Setting up DeviceEventEmitter listener...'); - + // Use DeviceEventEmitter instead of NativeEventEmitter to avoid getConstants DeviceEventEmitter.addListener('SafeAreaInsetsDidChangeEvent', (data) => { - console.log('SafeAreaInsetsManager: Received safe area change event:', data); if (data) { SafeAreaInsetsCache = data; this._safeAreaInsets = data; this.notifyDelegates(data); } }); - - console.log('SafeAreaInsetsManager: DeviceEventEmitter listener setup complete'); } catch (error) { console.warn('SafeAreaInsetsManager: Failed to setup event listener:', error); } @@ -74,9 +66,7 @@ class SafeAreaInsetsManager { } try { - console.log('SafeAreaInsetsManager: Getting initial insets from native...'); const insets = await this._nativeModule.getSafeAreaInsets(); - console.log('SafeAreaInsetsManager: Received initial insets:', insets); if (insets) { SafeAreaInsetsCache = insets; @@ -89,7 +79,6 @@ class SafeAreaInsetsManager { } notifyDelegates(insets: SafeAreaInsetsType) { - console.log('SafeAreaInsetsManager: Notifying', this._safeAreaChangedDelegates.length, 'delegates'); _.forEach(this._safeAreaChangedDelegates, (delegate) => { if (delegate.onSafeAreaInsetsDidChangeEvent) { delegate.onSafeAreaInsetsDidChangeEvent(insets); @@ -119,7 +108,6 @@ class SafeAreaInsetsManager { } addSafeAreaChangedDelegate(delegate: any) { - console.log('SafeAreaInsetsManager: Adding delegate, total will be:', this._safeAreaChangedDelegates.length + 1); this._safeAreaChangedDelegates.push(delegate); }