diff --git a/packages/react-native/Libraries/Utilities/Appearance.d.ts b/packages/react-native/Libraries/Utilities/Appearance.d.ts index fe02b80b972dd5..593c1eed23677c 100644 --- a/packages/react-native/Libraries/Utilities/Appearance.d.ts +++ b/packages/react-native/Libraries/Utilities/Appearance.d.ts @@ -9,7 +9,7 @@ import {NativeEventSubscription} from '../EventEmitter/RCTNativeAppEventEmitter'; -type ColorSchemeName = 'light' | 'dark' | 'unspecified'; +type ColorSchemeName = 'light' | 'dark' | null; export namespace Appearance { type AppearancePreferences = { diff --git a/packages/react-native/Libraries/Utilities/Appearance.js b/packages/react-native/Libraries/Utilities/Appearance.js index 1a014fa91dee92..e722235df71079 100644 --- a/packages/react-native/Libraries/Utilities/Appearance.js +++ b/packages/react-native/Libraries/Utilities/Appearance.js @@ -93,7 +93,7 @@ export function getColorScheme(): ?ColorSchemeName { /** * Updates the current color scheme to the supplied value. */ -export function setColorScheme(colorScheme: ColorSchemeName): void { +export function setColorScheme(colorScheme: ?ColorSchemeName): void { const state = getState(); const {NativeAppearance} = state; if (NativeAppearance != null) { diff --git a/packages/react-native/ReactNativeApi.d.ts b/packages/react-native/ReactNativeApi.d.ts index 1663252c3ed27f..0e32322ec40e6b 100644 --- a/packages/react-native/ReactNativeApi.d.ts +++ b/packages/react-native/ReactNativeApi.d.ts @@ -4,7 +4,7 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * - * @generated SignedSource<> + * @generated SignedSource<> * * This file was generated by scripts/js-api/build-types/index.js. */ @@ -1865,7 +1865,7 @@ declare namespace CodegenTypes { } } declare type ColorListenerCallback = (value: ColorValue) => unknown -declare type ColorSchemeName = "dark" | "light" | "unspecified" +declare type ColorSchemeName = "dark" | "light" declare type ColorValue = ____ColorValue_Internal declare type ComponentProvider = () => React.ComponentType declare type ComponentProviderInstrumentationHook = ( @@ -4638,7 +4638,9 @@ declare type Separators = { updateProps: (select: "leading" | "trailing", newProps: Object) => void } declare type sequence = typeof sequence -declare function setColorScheme(colorScheme: ColorSchemeName): void +declare function setColorScheme( + colorScheme: ColorSchemeName | null | undefined, +): void declare function setComponentProviderInstrumentationHook( hook: ComponentProviderInstrumentationHook, ): void @@ -5975,7 +5977,7 @@ export { AppState, // 12012be5 AppStateEvent, // 80f034c3 AppStateStatus, // 447e5ef2 - Appearance, // 00cbaa0a + Appearance, // bec62fb7 AutoCapitalize, // c0e857a0 BackHandler, // 0b13c289 BackPressEventName, // 4620fb76 @@ -5985,7 +5987,7 @@ export { ButtonProps, // 3c081e75 Clipboard, // 41addb89 CodegenTypes, // 030a94b8 - ColorSchemeName, // 31a4350e + ColorSchemeName, // 6615edd6 ColorValue, // 98989a8f ComponentProvider, // b5c60ddd ComponentProviderInstrumentationHook, // 9f640048 @@ -6237,7 +6239,7 @@ export { registerCallableModule, // 839c8cfe requireNativeComponent, // 72c09c3d useAnimatedValue, // b18adb63 - useColorScheme, // c216d6f7 + useColorScheme, // 29a517d5 usePressability, // fe1f27d8 useWindowDimensions, // bb4b683f } diff --git a/packages/react-native/src/private/specs_DEPRECATED/modules/NativeAppearance.js b/packages/react-native/src/private/specs_DEPRECATED/modules/NativeAppearance.js index d7bc36160eaf81..cc5bf015dd27cd 100644 --- a/packages/react-native/src/private/specs_DEPRECATED/modules/NativeAppearance.js +++ b/packages/react-native/src/private/specs_DEPRECATED/modules/NativeAppearance.js @@ -12,7 +12,7 @@ import type {TurboModule} from '../../../../Libraries/TurboModule/RCTExport'; import * as TurboModuleRegistry from '../../../../Libraries/TurboModule/TurboModuleRegistry'; -export type ColorSchemeName = 'light' | 'dark' | 'unspecified'; +export type ColorSchemeName = 'light' | 'dark'; export type AppearancePreferences = { colorScheme?: ?ColorSchemeName, @@ -20,7 +20,7 @@ export type AppearancePreferences = { export interface Spec extends TurboModule { +getColorScheme: () => ?ColorSchemeName; - +setColorScheme: (colorScheme: ColorSchemeName) => void; + +setColorScheme: (colorScheme: ?ColorSchemeName) => void; // RCTEventEmitter +addListener: (eventName: string) => void; diff --git a/packages/rn-tester/js/examples/Appearance/AppearanceExample.js b/packages/rn-tester/js/examples/Appearance/AppearanceExample.js index c95d77150ec43b..738e23108ec1c1 100644 --- a/packages/rn-tester/js/examples/Appearance/AppearanceExample.js +++ b/packages/rn-tester/js/examples/Appearance/AppearanceExample.js @@ -136,7 +136,7 @@ const ColorShowcase = (props: {themeName: string}) => ( const ToggleNativeAppearance = () => { const [nativeColorScheme, setNativeColorScheme] = - useState('unspecified'); + useState(null); const colorScheme = useColorScheme(); useEffect(() => { @@ -155,10 +155,7 @@ const ToggleNativeAppearance = () => { title="Set to dark" onPress={() => setNativeColorScheme('dark')} /> -