fix: Android/React Native compatibility issues (#89) #100
Conversation
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
- Update minSdkVersion from 21 to 24 (required by react-native-worklets) - Update compileSdkVersion from 34 to 35 (required by androidx dependencies) - Update targetSdkVersion to 35 - Update buildToolsVersion to 35.0.0 Fixes build errors: - 16 dependency compatibility issues requiring compileSdk 35+ - react-native-worklets minSdkVersion mismatch (21 vs 24)
Replace crypto.getRandomValues polyfill with expo-crypto.randomUUID() as suggested by maintainer. This provides a cleaner solution that works out of the box on React Native. - Remove crypto polyfill code from polyfills.js - Create lib/uuid.ts utility using expo-crypto.randomUUID() - Update conversations.ts and messages.ts to use new utility - Remove react-native-get-random-values and expo-random dependencies
- Add getPlatformAwareUrl() helper to convert localhost/127.0.0.1 to 10.0.2.2 on Android - Android emulator uses 10.0.2.2 as alias for host machine's localhost - Apply conversion to config.backendApiUrl automatically - Update generateAPIUrl() to use platform-aware config Fixes network errors: ERROR ❌ [Grid Client] Sign-in start error: [TypeError: Network request failed]
- Add Platform.OS check before using window.addEventListener/removeEventListener - Add typeof window checks before window.dispatchEvent calls - Window API doesn't exist in React Native, only on web Fixes runtime error: ERROR [TypeError: window.addEventListener is not a function (it is undefined)] Affects: - ChatManager.tsx: window event listeners for chat events - useChatState.ts: window.dispatchEvent for chat state updates
- Detect Grid account not found errors (expected when wallet not set up) - Log as warnings instead of errors for expected 404s - Provide clearer error messages for Grid account setup flow - Reduce error noise in console for expected scenarios Fixes verbose error logging: - Grid API error: 404 (expected when Grid wallet not initialized) - Now logged as warnings with helpful context Improves user experience during onboarding when Grid wallet is not yet set up.
Fix chat message sending on React Native by exposing ChatManager functions through cache instead of relying on window events. - Expose sendMessage, stop, and regenerate functions in chat cache - Update useChatState to use cache functions on React Native - Add CustomEvent check to prevent errors on React Native - Improve Grid API error handling (warnings for expected 404s) Fixes chat functionality on Android React Native where window events are not available.
- Add useRef guard in wallet screen to prevent infinite retry loops when Grid sign-in fails - Fix AuthContext navigation to allow authenticated users to stay on /verify-otp when completing Grid OTP - Improve Google Sign-In error handling and response parsing - Add crypto.getRandomValues polyfill for Grid SDK keypair generation - Improve backend Grid sign-in error logging and handling
|
@lopeselio is attempting to deploy a commit to the dark Team on Vercel. A member of the Team first needs to authorize it. |
- Fix OTP screen race condition with robust polling mechanism - Add preloader during Grid sign-in initialization - Improve Grid sign-in flow to trigger immediately after Google sign-in - Fix navigation logic to handle OTP screen correctly - Add comprehensive session storage cleanup on logout - Fix platform-aware URL conversion for Android emulator - Improve error handling in Grid backend routes - Add crypto polyfill for Android UUID generation - Fix wallet data loading to check Grid account before triggering sign-in - Improve server startup resilience with error handlers
lopeselio
force-pushed
the
fix/android-expo-errors
branch
from
4fe7763 to
b2e8e3e
Compare
…ility - Add Gradle task to patch graphicsConversions.h - Replace std::format with std::to_string for Android NDK 26.1.10909125 compatibility - Fixes C++20 compilation error in React Native 0.81.4
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
| })} | ||
| </View> | ||
| </Pressable> | ||
|
|
There was a problem hiding this comment.
The handleResendCode function uses params.email directly without a fallback, but the instruction text correctly uses params.email || user?.email. If params.email is undefined, resending OTP will fail with an unclear error.
View Details
📝 Patch Details
diff --git a/apps/client/app/(auth)/verify-otp.tsx b/apps/client/app/(auth)/verify-otp.tsx
index 5ba9947..4dca2e4 100644
--- a/apps/client/app/(auth)/verify-otp.tsx
+++ b/apps/client/app/(auth)/verify-otp.tsx
@@ -366,7 +366,7 @@ export default function VerifyOtpScreen() {
console.log('🔄 [OTP Screen] Resending OTP - starting new sign-in flow...');
// Start sign-in again to get new OTP (Grid sends new email)
- const { otpSession: newOtpSession } = await gridClientService.startSignIn(params.email);
+ const { otpSession: newOtpSession } = await gridClientService.startSignIn(params.email || user?.email || '');
// Update LOCAL state with new OTP session
setOtpSession(newOtpSession);
Analysis
Missing fallback for email parameter in handleResendCode
What fails: The handleResendCode() function in apps/client/app/(auth)/verify-otp.tsx passes params.email directly to gridClientService.startSignIn() without a fallback. If params.email is undefined, the API request fails with an unclear error message instead of gracefully using the authenticated user's email.
How to reproduce:
- Navigate to the OTP verification screen with an incomplete route parameter object where
emailis missing - User enters 6-digit code (or clicks to trigger resend if error occurs)
- Click "Resend Code" button
- The function calls
gridClientService.startSignIn(undefined), sending{ email: undefined }to the backend
Result: Backend returns an error response with unclear error message since email is undefined
Expected: Should use params.email || user?.email || '' fallback pattern (consistent with line 542 instruction text and line 156 initialization logic in the same file)
Evidence of intentional fallback pattern:
- Line 156:
const hasEmail = autoInitiateEmail || params.email || user?.email; - Line 542:
`We've sent a 6-digit code to
These demonstrate that developers already recognize params.email can be undefined and should have fallbacks. The missing fallback at line 369 is an inconsistency.
Reference: Expo Router useLocalSearchParams returns Partial - hook is typed to allow undefined for all parameters
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
Fixes Android/React Native compatibility issues, addressing issue #89 and related problems.
Primary fixes (Issue #89)
UUID generation: replaced
uuidv4()withexpo-crypto.randomUUID()on native platformsapps/client/lib/uuid.tsutility usingexpo-crypto.randomUUID()for Android/iOSuuidlibrary on web or ifexpo-cryptofailsconversations.tsandmessages.tsto use the new utilitycrypto.getRandomValues() not supportederror on AndroidNetwork connectivity: platform-aware URL conversion for Android emulator
apps/client/lib/config.tsto convertlocalhost→10.0.2.2on Android10.0.2.2as alias for host machine's localhostTypeError: Network request failedwhen hitting backend APIAdditional fixes
React Native compatibility: guarded
windowAPI usagePlatform.OS === 'web'andtypeof window !== 'undefined'checkstypeof CustomEvent !== 'undefined'checkswindow.addEventListener,window.dispatchEvent, andCustomEventon React NativeChat functionality on React Native: use cache functions instead of window events
sendMessage,stop, andregeneratefunctions inchat-cachefor direct useuseChatStatenow uses cache functions on React Native, bypassing window eventsGrid sign-in retry loop: prevent infinite retries
useRefguard in wallet screen to track sign-in attemptsNavigation fix: allow authenticated users to stay on
/verify-otpAuthContextto check for Grid OTP session before redirectingGoogle Sign-In: improved error handling
Grid SDK crypto polyfill: added
crypto.getRandomValues()polyfillcrypto.getRandomValues()for keypair generationexpo-crypto.getRandomBytes()to support Grid SDK on React NativeBackend error logging: improved Grid sign-in error handling
createAccount()andinitAuth()responsesWallet context: prevent auto-triggering Grid sign-in
WalletContextto only load wallet data if Grid account existsType of Change
Release
Is this a release? No
Testing
Prerequisites
bun run server(orcd apps/server && bun run dev)Test Steps
1. Test UUID Generation (Issue #89)
cd apps/client bun run androidcrypto.getRandomValues() not supportederror2. Test Network Connectivity (Issue #89)
# Ensure backend is running on localhost:3001 bun run server/api/grid/start-sign-inrequests)TypeError: Network request failederror3. Test Grid Sign-In Flow
4. Test Retry Loop Prevention
5. Test Chat Functionality on React Native
window.addEventListener is not a functionerrors6. Test Google Sign-In Error Handling
Expected Results
windowAPI errors on React NativeFiles Changed
apps/client/lib/uuid.ts- New utility for UUID generationapps/client/lib/config.ts- Platform-aware URL conversionapps/client/polyfills.js- Crypto polyfill for Grid SDKapps/client/app/(main)/wallet.tsx- Retry loop preventionapps/client/contexts/AuthContext.tsx- Navigation fix for verify-otpapps/client/contexts/WalletContext.tsx- Prevent auto-trigger Grid sign-inapps/client/features/auth/services/google.ts- Improved error handlingapps/client/components/chat/ChatManager.tsx- React Native compatibilityapps/client/hooks/useChatState.ts- React Native compatibilityapps/server/src/routes/grid.ts- Improved error loggingChecklist
Note: This PR addresses Issue #89 and includes additional React Native compatibility fixes discovered during testing.