Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Appearance.setColorScheme not workin in RN Web #45788

Closed
NewCoder2023 opened this issue Jul 29, 2024 · 4 comments
Closed

Appearance.setColorScheme not workin in RN Web #45788

NewCoder2023 opened this issue Jul 29, 2024 · 4 comments
Labels
Newer Patch Available Resolution: Issue in another tool or repo An issue that was opened against React Native but in reality is affecting another tool or library

Comments

@NewCoder2023
Copy link

NewCoder2023 commented Jul 29, 2024 •
edited
Loading

Edit: I wrote the wrong RN version. I have edited the right one! I'm currently using the newest one since I stared the project few days ago!

Description

Appearance.setColorScheme("dark") works perfectly fine for iOS and Android but raises the following Error when used for RN web even thought its written in the documentation that it works for web.

_Appearance.default.setColorScheme is not a function. (In '_Appearance.default.setColorScheme("dark")', '_Appearance.default.setColorScheme' is undefined)

Steps to reproduce

  1. Create a Pressable
  2. onPress={Appearance.setColorScheme("dark")}
  3. Observe error in RN web

React Native Version

0.74.3

Affected Platforms

Runtime - Web

Output of npx react-native info

System:
  OS: macOS 14.0
  CPU: (8) arm64 Apple M2
  Memory: 83.52 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.4.1
    path: /opt/homebrew/bin/node
  Yarn: Not Found
  npm:
    version: 10.8.2
    path: ~/.npm-global/bin/npm
  Watchman:
    version: 2024.07.08.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.10811636
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 19.0.2
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.3
    wanted: 0.74.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

Uncaught Error
_Appearance.default.setColorScheme is not a function. (In '_Appearance.default.setColorScheme("dark")', '_Appearance.default.setColorScheme' is undefined)
Call Stack

Source Map
This call stack is not symbolicated. Some features are unavailable such as viewing the function name or tapping to open files.
index
http://localhost:8081/node_modules/expo-router/entry.bundle:153573:52
renderWithHooks
http://localhost:8081/node_modules/expo-router/entry.bundle:25695:33
mountIndeterminateComponent
http://localhost:8081/node_modules/expo-router/entry.bundle:28984:34
beginWork$1
http://localhost:8081/node_modules/expo-router/entry.bundle:35239:29
performUnitOfWork
http://localhost:8081/node_modules/expo-router/entry.bundle:34509:29
workLoopSync
http://localhost:8081/node_modules/expo-router/entry.bundle:34432:28
renderRootSync
http://localhost:8081/node_modules/expo-router/entry.bundle:34405:25
recoverFromConcurrentError
http://localhost:8081/node_modules/expo-router/entry.bundle:33897:40
performConcurrentWorkOnRoot
http://localhost:8081/node_modules/expo-router/entry.bundle:33810:54
workLoop
http://localhost:8081/node_modules/expo-router/entry.bundle:37546:48
flushWork
http://localhost:8081/node_modules/expo-router/entry.bundle:37524:28
performWorkUntilDeadline
http://localhost:8081/node_modules/expo-router/entry.bundle:37761:48
Showing all frames
Component Stack

Source Map
This call stack is not symbolicated. Some features are unavailable such as viewing the function name or tapping to open files.
index
http://localhost:8081/node_modules/expo-router/entry.bundle:153566:43
Route
http://localhost:8081/node_modules/expo-router/entry.bundle:65953:44
Route
http://localhost:8081/node_modules/expo-router/entry.bundle:66319:41
StaticContainer
http://localhost:8081/node_modules/expo-router/entry.bundle:165743:17
EnsureSingleNavigator
http://localhost:8081/node_modules/expo-router/entry.bundle:163244:34
SceneView
http://localhost:8081/node_modules/expo-router/entry.bundle:165668:13
View
http://localhost:8081/node_modules/expo-router/entry.bundle:39052:26
View
http://localhost:8081/node_modules/expo-router/entry.bundle:39052:26
Background
http://localhost:8081/node_modules/expo-router/entry.bundle:167963:43
Screen
http://localhost:8081/node_modules/expo-router/entry.bundle:169069:73
View
http://localhost:8081/node_modules/expo-router/entry.bundle:39052:26
<unknown>
ResourceSavingScene@http://localhost:8081/node_modules/expo-router/entry.bundle:168879:43
MaybeScreen
http://localhost:8081/node_modules/expo-router/entry.bundle:194647:43
View
http://localhost:8081/node_modules/expo-router/entry.bundle:39052:26
MaybeScreenContainer
http://localhost:8081/node_modules/expo-router/entry.bundle:194632:43
View
http://localhost:8081/node_modules/expo-router/entry.bundle:39052:26
View
http://localhost:8081/node_modules/expo-router/entry.bundle:39052:26
AnimatedComponent
http://localhost:8081/node_modules/expo-router/entry.bundle:137743:14
View
http://localhost:8081/node_modules/expo-router/entry.bundle:39052:26
AnimatedComponent
http://localhost:8081/node_modules/expo-router/entry.bundle:137743:14
Dummy
http://localhost:8081/node_modules/expo-router/entry.bundle:194577:30
Drawer
http://localhost:8081/node_modules/expo-router/entry.bundle:195353:13
DrawerViewBase
http://localhost:8081/node_modules/expo-router/entry.bundle:193870:12
View
http://localhost:8081/node_modules/expo-router/entry.bundle:39052:26
View
http://localhost:8081/node_modules/expo-router/entry.bundle:39052:26
SafeAreaProviderCompat
http://localhost:8081/node_modules/expo-router/entry.bundle:168965:25
DrawerView
http://localhost:8081/node_modules/expo-router/entry.bundle:194056:43
PreventRemoveProvider
http://localhost:8081/node_modules/expo-router/entry.bundle:164734:14
NavigationContent
http://localhost:8081/node_modules/expo-router/entry.bundle:165449:18
<unknown>
http://localhost:8081/node_modules/expo-router/entry.bundle:165465:31
DrawerNavigator
http://localhost:8081/node_modules/expo-router/entry.bundle:193742:57
<unknown>
http://localhost:8081/node_modules/expo-router/entry.bundle:65839:41
View
http://localhost:8081/node_modules/expo-router/entry.bundle:39052:26
GestureHandlerRootView
http://localhost:8081/node_modules/expo-router/entry.bundle:188967:43
Route
http://localhost:8081/node_modules/expo-router/entry.bundle:65953:44
Route
http://localhost:8081/node_modules/expo-router/entry.bundle:66319:41
StaticContainer
http://localhost:8081/node_modules/expo-router/entry.bundle:165743:17
EnsureSingleNavigator
http://localhost:8081/node_modules/expo-router/entry.bundle:163244:34
SceneView
http://localhost:8081/node_modules/expo-router/entry.bundle:165668:13
View
http://localhost:8081/node_modules/expo-router/entry.bundle:39052:26
View
http://localhost:8081/node_modules/expo-router/entry.bundle:39052:26
View
http://localhost:8081/node_modules/expo-router/entry.bundle:39052:26
Background
http://localhost:8081/node_modules/expo-router/entry.bundle:167963:43
Screen
http://localhost:8081/node_modules/expo-router/entry.bundle:169069:73
View
http://localhost:8081/node_modules/expo-router/entry.bundle:39052:26
View
http://localhost:8081/node_modules/expo-router/entry.bundle:39052:26
SafeAreaProviderCompat
http://localhost:8081/node_modules/expo-router/entry.bundle:168965:25
NativeStackView
http://localhost:8081/node_modules/expo-router/entry.bundle:167645:13
PreventRemoveProvider
http://localhost:8081/node_modules/expo-router/entry.bundle:164734:14
NavigationContent
http://localhost:8081/node_modules/expo-router/entry.bundle:165449:18
<unknown>
http://localhost:8081/node_modules/expo-router/entry.bundle:165465:31
NativeStackNavigator
http://localhost:8081/node_modules/expo-router/entry.bundle:161280:43
<unknown>
http://localhost:8081/node_modules/expo-router/entry.bundle:65839:41
ThemeProvider
http://localhost:8081/node_modules/expo-router/entry.bundle:166733:30
RootLayout
http://localhost:8081/node_modules/expo-router/entry.bundle:159820:45
Route
http://localhost:8081/node_modules/expo-router/entry.bundle:65953:44
Route
http://localhost:8081/node_modules/expo-router/entry.bundle:66319:41
View
http://localhost:8081/node_modules/expo-router/entry.bundle:39052:26
NativeSafeAreaProvider
http://localhost:8081/node_modules/expo-router/entry.bundle:160992:19
SafeAreaProvider
http://localhost:8081/node_modules/expo-router/entry.bundle:160865:45
wrapper
http://localhost:8081/node_modules/expo-router/entry.bundle:73992:46
EnsureSingleNavigator
http://localhost:8081/node_modules/expo-router/entry.bundle:163244:34
BaseNavigationContainer
http://localhost:8081/node_modules/expo-router/entry.bundle:161911:13
ThemeProvider
http://localhost:8081/node_modules/expo-router/entry.bundle:166733:30
NavigationContainerInner
http://localhost:8081/node_modules/expo-router/entry.bundle:74246:25
ContextNavigator
http://localhost:8081/node_modules/expo-router/entry.bundle:74026:43
ExpoRoot
http://localhost:8081/node_modules/expo-router/entry.bundle:73981:41
_HelmetProvider
http://localhost:8081/node_modules/expo-router/entry.bundle:201567:12
AppContainer
http://localhost:8081/node_modules/expo-router/entry.bundle:51978:24
Showing all frames

Screenshots and Videos

No response
@react-native-bot
Copy link
Collaborator

⚠️ Newer Version of React Native is Available!
ℹ️ You are on a supported minor version, but it looks like there's a newer patch available - 0.73.9. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

@react-native-bot
Copy link
Collaborator

⚠️ Newer Version of React Native is Available!
ℹ️ You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

@cortinico
Copy link
Contributor

Appearance.setColorScheme("dark") works perfectly fine for iOS and Android but raises the following Error when used for RN web even thought its written in the documentation that it works for web.

Hi,
Thanks for reporting this issue.

It seems like this issue is actually unrelated to React Native core but related to React Native Web. Please open this issue against this other repository:

https://github.com/necolas/react-native-web/issues

I'll be closing this but feel free to comment if the other repo points back to us as a issue in the core of React Native.

@cortinico cortinico added Resolution: Issue in another tool or repo An issue that was opened against React Native but in reality is affecting another tool or library and removed Needs: Triage 🔍 labels Jul 29, 2024
@NewCoder2023
Copy link
Author

Thank you!

Out of curiosity: Is someone checking the RN Web issues? Seems like no one is answering there since a few weeks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Newer Patch Available Resolution: Issue in another tool or repo An issue that was opened against React Native but in reality is affecting another tool or library
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@cortinico @react-native-bot @NewCoder2023