docs(expo): document native component theming#3285
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Add Oxford comma and point readers to the theming reference for platform-specific details (fontFamily is iOS-only). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
manovotny
left a comment
There was a problem hiding this comment.
Pushed small fixes directly in ae4bb82:
- Added Oxford comma and tweaked the
themeproperty description in the overview to say "See the Theming reference for platform-specific details and the full schema". The previous wording could read as iffontFamilyworks on both platforms when it's iOS-only.
Also left one inline comment asking about whether <UserButton /> should be listed alongside the fully native components in the theming intro, since the avatar button itself is React Native and isn't styled by the theme (only the modal it opens is).
|
|
||
| <Include src="_partials/expo/beta-callout" /> | ||
|
|
||
| You can customize the appearance of Clerk's [Expo native components](/docs/reference/expo/native-components/overview) (`<AuthView />`, `<UserButton />`, and `<UserProfileView />`) by passing a `theme` option to the `@clerk/expo` config plugin. The plugin reads a JSON file at prebuild time and applies it to both iOS and Android. |
There was a problem hiding this comment.
Is <UserButton /> intentionally included here?
Looking at UserButton.tsx in the SDK, the avatar button itself is a React Native component with hardcoded styles. The JSON theme applies to the native profile modal it opens (via UserProfileView), not the button circle itself.
This also creates a small tension with the statement on line 115:
Because the theme is applied at the native layer, it does not affect any web or JavaScript components.
If the intent is to describe the user-facing experience holistically (tapping the button shows a themed modal), that makes sense. Just wanted to flag the nuance. Otherwise, this could say something like "the profile modal opened by <UserButton />" instead of listing it alongside the fully native components.
There was a problem hiding this comment.
I have addressed this, let me know what you think!
Because the theme is applied at the native layer, it only affects the native views (<AuthView />, <UserProfileView />, and the profile modal opened by <UserButton />). It does not affect web components or React Native UI elements like the <UserButton /> avatar itself.
The avatar button itself is React Native — only the profile modal it opens (UserProfileView) is styled by the JSON theme.
…ting linkable Move the UserButton avatar disclaimer into a [!NOTE] callout for visibility. Convert troubleshooting bullets into ### headings so each item gets a linkable anchor. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
manovotny
left a comment
There was a problem hiding this comment.
Changes look great @chriscanin! I pushed a couple more small tweaks in 93a548f:
- Moved the
<UserButton />avatar caveat into a[!NOTE]callout so it's harder to miss. - Converted the troubleshooting bullets into
###headings so each item gets a linkable anchor. Useful for support links.
Looks great otherwise. Nice addition with the "removed theme prop" troubleshooting entry. 👍
🔎 Previews:
What does this solve? What changed?
docs/reference/expo/native-components/theming.mdx) documenting the JSON-based theme system for Clerk's native Expo components (<AuthView />,<UserButton />,<UserProfileView />).themeto the Expo plugin options table in the native components overview page.manifest.jsonunder the native components nav section.The theme JSON supports
colors(15 semantic tokens),darkColors(automatic dark mode),design.borderRadius, anddesign.fontFamily(iOS only). Dark mode is controlled by the developer via Expo'suserInterfaceStylesetting inapp.json— the plugin does not modify it.Source PR: clerk/javascript#8243
Deadline
@clerk/expo. No rush beyond that.Other resources