feat(expo): support custom logos in native AuthView#9163
Open
swolfand wants to merge 1 commit into
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 380a291 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
📝 WalkthroughWalkthroughChangesCustom React Native logo content is now supported by Expo Custom AuthView logo
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant ExpoApp
participant AuthView
participant NativeAuthView
participant PlatformAuthUI
ExpoApp->>AuthView: provide logo React element
AuthView->>NativeAuthView: render logo child
NativeAuthView->>NativeAuthView: measure and track logo view
NativeAuthView->>PlatformAuthUI: provide logo view and size
PlatformAuthUI->>PlatformAuthUI: render custom logo
Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
Comment |
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/electron
@clerk/electron-passkeys
@clerk/eslint-plugin
@clerk/expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
swolfand
requested review from
mikepitre,
seanperez29 and
wobsoriano
and removed request for
wobsoriano
Contributor
API Changes Report
Summary
@clerk/expoCurrent version: 3.7.5 Subpath
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/expo/ios/ClerkAuthNativeView.swift`:
- Around line 81-87: Update the logoBoundsObservation callback and its
asynchronous main-thread block so queued work reads the current logo view bounds
when it executes, rather than applying the asynchronously captured bounds.size.
Continue validating the view identity and only update logoSize and call
setNeedsHostedViewUpdate when the latest size differs.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Repository UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 62273dd8-3af2-454f-acf8-27bbd45b925c
📒 Files selected for processing (7)
.changeset/expo-native-custom-logo.mdpackages/expo/android/src/main/java/expo/modules/clerk/ClerkAuthViewModule.ktpackages/expo/ios/ClerkAuthNativeView.swiftpackages/expo/ios/ClerkNativeBridge.swiftpackages/expo/src/native/AuthView.tsxpackages/expo/src/native/AuthView.types.tspackages/expo/src/native/__tests__/AuthView.test.tsx
Comment on lines
+81
to
+87
| logoBoundsObservation = view.observe(\.bounds, options: [.new]) { [weak self, weak view] _, change in | ||
| guard let self, let view, let bounds = change.newValue else { return } | ||
| DispatchQueue.main.async { [weak self, weak view] in | ||
| guard let self, let view, self.logoView === view, self.logoSize != bounds.size else { return } | ||
| self.logoSize = bounds.size | ||
| self.setNeedsHostedViewUpdate() | ||
| } |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Avoid applying a stale asynchronously captured logo size.
Rapid bounds changes can queue older bounds.size values after layoutSubviews() has recorded a newer size, briefly regressing the hosted logo dimensions.
Proposed fix
logoBoundsObservation = view.observe(\.bounds, options: [.new]) { [weak self, weak view] _, change in
- guard let self, let view, let bounds = change.newValue else { return }
+ guard let self, let view, change.newValue != nil else { return }
DispatchQueue.main.async { [weak self, weak view] in
- guard let self, let view, self.logoView === view, self.logoSize != bounds.size else { return }
- self.logoSize = bounds.size
+ guard let self, let view, self.logoView === view else { return }
+ let currentSize = view.bounds.size
+ guard self.logoSize != currentSize else { return }
+ self.logoSize = currentSize
self.setNeedsHostedViewUpdate()
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| logoBoundsObservation = view.observe(\.bounds, options: [.new]) { [weak self, weak view] _, change in | |
| guard let self, let view, let bounds = change.newValue else { return } | |
| DispatchQueue.main.async { [weak self, weak view] in | |
| guard let self, let view, self.logoView === view, self.logoSize != bounds.size else { return } | |
| self.logoSize = bounds.size | |
| self.setNeedsHostedViewUpdate() | |
| } | |
| logoBoundsObservation = view.observe(\.bounds, options: [.new]) { [weak self, weak view] _, change in | |
| guard let self, let view, change.newValue != nil else { return } | |
| DispatchQueue.main.async { [weak self, weak view] in | |
| guard let self, let view, self.logoView === view else { return } | |
| let currentSize = view.bounds.size | |
| guard self.logoSize != currentSize else { return } | |
| self.logoSize = currentSize | |
| self.setNeedsHostedViewUpdate() | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/expo/ios/ClerkAuthNativeView.swift` around lines 81 - 87, Update the
logoBoundsObservation callback and its asynchronous main-thread block so queued
work reads the current logo view bounds when it executes, rather than applying
the asynchronously captured bounds.size. Continue validating the view identity
and only update logoSize and call setNeedsHostedViewUpdate when the latest size
differs.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds a
logoprop to the Expo nativeAuthView, allowing apps to replace the dashboard-configured logo with arbitrary React Native content on Android and iOS.The React element is mounted as the native view's single child and rehosted inside the Clerk Compose/SwiftUI logo slot while preserving its React Native layout dimensions. Callers retain control over sizing, spacing, and accessibility.
This ports the custom logo-view APIs introduced by clerk/clerk-android#801 and clerk/clerk-ios#520.
Summary by CodeRabbit
New Features
AuthView.Tests