From 1759b939f7366bfc30fde9c12bf70321edff9e70 Mon Sep 17 00:00:00 2001 From: Thiago Brezinski Date: Sun, 5 Nov 2023 18:11:41 +0000 Subject: [PATCH 1/2] fix: remove keyboard listerners and mark as unsupported --- .../Libraries/Components/Keyboard/Keyboard.js | 15 +++++++++++++++ .../Components/Keyboard/KeyboardAvoidingView.js | 16 ++++++++++++++++ .../React/CoreModules/RCTKeyboardObserver.mm | 6 ++++++ 3 files changed, 37 insertions(+) diff --git a/packages/react-native/Libraries/Components/Keyboard/Keyboard.js b/packages/react-native/Libraries/Components/Keyboard/Keyboard.js index 8aae204e97f328..a3b32937370d7f 100644 --- a/packages/react-native/Libraries/Components/Keyboard/Keyboard.js +++ b/packages/react-native/Libraries/Components/Keyboard/Keyboard.js @@ -114,6 +114,13 @@ class Keyboard { ); constructor() { + if (Platform.isVisionOS) { + console.warn( + 'Keyboard is not supported on VisionOS. The system displays the keyboard in a separate window, leaving the app’s window unaffected by the keyboard’s appearance and disappearance', + ); + return; + } + this.addListener('keyboardDidShow', ev => { this._currentlyShowing = ev; }); @@ -151,6 +158,10 @@ class Keyboard { listener: (...$ElementType) => mixed, context?: mixed, ): EventSubscription { + if (Platform.isVisionOS) { + return; + } + return this._emitter.addListener(eventType, listener); } @@ -160,6 +171,10 @@ class Keyboard { * @param {string} eventType The native event string listeners are watching which will be removed. */ removeAllListeners>(eventType: ?K): void { + if (Platform.isVisionOS) { + return; + } + this._emitter.removeAllListeners(eventType); } diff --git a/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js b/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js index e26d6771c47209..c7a61fb7101a76 100644 --- a/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js +++ b/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js @@ -176,6 +176,12 @@ class KeyboardAvoidingView extends React.Component { componentDidMount(): void { if (Platform.OS === 'ios') { + if (Platform.isVisionOS) { + console.warn( + 'KeyboardAvoidingView is not supported on VisionOS. The system displays the keyboard in a separate window, leaving the app’s window unaffected by the keyboard’s appearance and disappearance', + ); + return; + } this._subscriptions = [ Keyboard.addListener('keyboardWillChangeFrame', this._onKeyboardChange), ]; @@ -205,6 +211,16 @@ class KeyboardAvoidingView extends React.Component { onLayout, ...props } = this.props; + + if (Platform.isVisionOS) { + // KeyboardAvoidingView is not supported on VisionOS, so we return a simple View without the onLayout handler + return ( + + {children} + + ); + } + const bottomHeight = enabled === true ? this.state.bottom : 0; switch (behavior) { case 'height': diff --git a/packages/react-native/React/CoreModules/RCTKeyboardObserver.mm b/packages/react-native/React/CoreModules/RCTKeyboardObserver.mm index ce483ddceb95fc..0774d1f9a81ef7 100644 --- a/packages/react-native/React/CoreModules/RCTKeyboardObserver.mm +++ b/packages/react-native/React/CoreModules/RCTKeyboardObserver.mm @@ -23,6 +23,7 @@ @implementation RCTKeyboardObserver - (void)startObserving { +#if !TARGET_OS_VISION NSNotificationCenter *nc = [NSNotificationCenter defaultCenter]; #define ADD_KEYBOARD_HANDLER(NAME, SELECTOR) [nc addObserver:self selector:@selector(SELECTOR:) name:NAME object:nil] @@ -35,6 +36,7 @@ - (void)startObserving ADD_KEYBOARD_HANDLER(UIKeyboardDidChangeFrameNotification, keyboardDidChangeFrame); #undef ADD_KEYBOARD_HANDLER +#endif } - (NSArray *)supportedEvents @@ -51,9 +53,12 @@ - (void)startObserving - (void)stopObserving { +#if !TARGET_OS_VISION [[NSNotificationCenter defaultCenter] removeObserver:self]; +#endif } +#if !TARGET_OS_VISION // Bridge might be already invalidated by the time the keyboard is about to be dismissed. // This might happen, for example, when reload from the packager is performed. // Thus we need to check against nil here. @@ -72,6 +77,7 @@ -(void)EVENT : (NSNotification *)notification IMPLEMENT_KEYBOARD_HANDLER(keyboardDidHide) IMPLEMENT_KEYBOARD_HANDLER(keyboardWillChangeFrame) IMPLEMENT_KEYBOARD_HANDLER(keyboardDidChangeFrame) +#endif - (std::shared_ptr)getTurboModule: (const facebook::react::ObjCTurboModule::InitParams &)params From 3341d27fd821d4aedb47779aecc592713f40f34a Mon Sep 17 00:00:00 2001 From: Thiago Brezinski Date: Sun, 5 Nov 2023 18:19:29 +0000 Subject: [PATCH 2/2] chore: replace warn with warnOnce --- .../react-native/Libraries/Components/Keyboard/Keyboard.js | 6 ++++-- .../Libraries/Components/Keyboard/KeyboardAvoidingView.js | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/react-native/Libraries/Components/Keyboard/Keyboard.js b/packages/react-native/Libraries/Components/Keyboard/Keyboard.js index a3b32937370d7f..c2ed22a872f7d6 100644 --- a/packages/react-native/Libraries/Components/Keyboard/Keyboard.js +++ b/packages/react-native/Libraries/Components/Keyboard/Keyboard.js @@ -15,6 +15,7 @@ import LayoutAnimation from '../../LayoutAnimation/LayoutAnimation'; import dismissKeyboard from '../../Utilities/dismissKeyboard'; import Platform from '../../Utilities/Platform'; import NativeKeyboardObserver from './NativeKeyboardObserver'; +import warnOnce from '../../Utilities/warnOnce'; export type KeyboardEventName = $Keys; @@ -115,8 +116,9 @@ class Keyboard { constructor() { if (Platform.isVisionOS) { - console.warn( - 'Keyboard is not supported on VisionOS. The system displays the keyboard in a separate window, leaving the app’s window unaffected by the keyboard’s appearance and disappearance', + warnOnce( + 'Keyboard-unavailable', + 'Keyboard is not available on visionOS platform. The system displays the keyboard in a separate window, leaving the app’s window unaffected by the keyboard’s appearance and disappearance', ); return; } diff --git a/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js b/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js index c7a61fb7101a76..0c745f9d7830bd 100644 --- a/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js +++ b/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js @@ -24,6 +24,7 @@ import AccessibilityInfo from '../AccessibilityInfo/AccessibilityInfo'; import View from '../View/View'; import Keyboard from './Keyboard'; import * as React from 'react'; +import warnOnce from '../../Utilities/warnOnce'; type Props = $ReadOnly<{| ...ViewProps, @@ -177,8 +178,9 @@ class KeyboardAvoidingView extends React.Component { componentDidMount(): void { if (Platform.OS === 'ios') { if (Platform.isVisionOS) { - console.warn( - 'KeyboardAvoidingView is not supported on VisionOS. The system displays the keyboard in a separate window, leaving the app’s window unaffected by the keyboard’s appearance and disappearance', + warnOnce( + 'KeyboardAvoidingView-unavailable', + 'KeyboardAvoidingView is not available on visionOS platform. The system displays the keyboard in a separate window, leaving the app’s window unaffected by the keyboard’s appearance and disappearance', ); return; }