Skip to content

Add expo-system-ui so userInterfaceStyle actually applies on Android #113

Description

@toruiwasa

Raised by the review of PR #110 (Task 9 / #12).

Field Contents
Goal The userInterfaceStyle: "light" pin in app.json takes effect on Android, not only on iOS.
Context PR #110 pinned userInterfaceStyle to "light" because colors.ts ships a light palette only, so "automatic" would pair dark system chrome with light screens. That reasoning holds — but Expo's app config reference states, for both userInterfaceStyle and android.userInterfaceStyle: "Requires expo-system-ui be installed in your project to work on Android." expo-system-ui is not in apps/mobile/package.json and is not a transitive dependency of expo, so on Android the pin is inert and the recorded rationale claims an invariant only iOS gets. PR #110 corrected the comment in colors.ts to say so rather than adding a native module it could not verify.
Scope Add expo-system-ui to apps/mobile and confirm the pin applies on an Android device in system dark mode. Open decision: whether to add the package or instead drop the pin and commit to supporting dark mode on both platforms — if #111 lands a dark palette first, this issue is moot and should be closed as such.
Test boundary Nothing unit-testable — the property is consumed by the native build, not by JS. Verification is manual on a device: Android in system dark mode shows light chrome.
Done when An Android development build in system dark mode renders light system chrome, matching the palette, and the caveat paragraph in colors.ts is removed.
Branch fix/mobile-android-ui-style
Dependency #95 — adding a native module needs an EAS development build to verify, and #95 is what makes cloud builds possible.
Risk LOW — no screen reads useColorScheme today, so nothing is currently mis-rendering; the change adds a native module, which is why it needs a device build rather than CI.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    mobileExpo / React Native layertaskSDLC task unit — one issue per task-breakdown item

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions