Resolved issue #110 #141
Resolved issue #110 #141
Conversation
WalkthroughAdded explicit web support in Expo config by introducing the platforms field. Adjusted four dependency version ranges in frontend/package.json to earlier versions. No source code or control flow changes. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (1)
frontend/package.json (1)
13-13: Consider tilde for async-storage to truly match the expected 2.1.x lineWith
^2.1.2, a future install could resolve to2.2.xagain, undermining the intent to align with the expected version. If the goal is strict alignment, use~2.1.2.- "@react-native-async-storage/async-storage": "^2.1.2", + "@react-native-async-storage/async-storage": "~2.1.2",If broader compatibility is acceptable for this community package, keeping
^is fine—just be aware it can float to newer minors.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
frontend/app.json(1 hunks)frontend/package.json(1 hunks)
| "expo": { | ||
| "name": "frontend", | ||
| "slug": "frontend", | ||
| "platforms": ["ios", "android", "web"], |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Adding platforms is fine; confirm web readiness across dependencies
Declaring explicit platforms, including "web", is OK. Please double-check that all runtime paths used by the app (navigation, image picker flows, and any native APIs) have working web fallbacks to avoid runtime errors when expo start --web is used.
You can sanity-check with:
🏁 Script executed:
#!/bin/bash
# 1) Ensure web entry point resolves
jq -r '.scripts.web' frontend/package.json
# 2) Grep for native-only APIs that lack web guards (heuristic)
rg -n "Platform\.OS\s*===\s*['\"](ios|android)['\"]|NativeModules|requireNativeComponent" -g '!node_modules' -S || trueLength of output: 280
Ensure web readiness: guard Platform.OS usage in AddExpenseScreen
-
Verified
scripts.webresolves toexpo start --webinfrontend/package.json✅ -
Found a native‐only API usage in
frontend/screens/AddExpenseScreen.js:345:behavior={Platform.OS === "ios" ? "padding" : "height"}
On web,
Platform.OSis"web", so it falls back to"height", butKeyboardAvoidingView’sbehaviorprop may not be supported in react-native-web. Please wrap this in a web‐safe guard or usePlatform.select, for example:behavior={Platform.select({ ios: "padding", android: "height", default: undefined })}
This ensures no unsupported props are passed on web.
🤖 Prompt for AI Agents
In frontend/app.json around line 5, the project targets web but
AddExpenseScreen.js at line ~345 passes a behavior prop to KeyboardAvoidingView
using Platform.OS which can pass unsupported values on web; change the prop to
use a web-safe guard such as Platform.select (ios: "padding", android: "height",
default: undefined) or conditionally omit the behavior prop on web so no
unsupported prop is passed; update the JSX to compute behavior via
Platform.select or a small helper and use that variable as the behavior prop (or
only spread the prop when defined).
| "@expo/metro-runtime": "~5.0.4", | ||
| "@react-native-async-storage/async-storage": "^2.2.0", | ||
| "@react-native-async-storage/async-storage": "^2.1.2", | ||
| "@react-navigation/bottom-tabs": "^7.4.4", | ||
| "@react-navigation/native": "^7.1.16", | ||
| "@react-navigation/native-stack": "^7.3.23", | ||
| "axios": "^1.11.0", | ||
| "expo": "~53.0.20", | ||
| "expo-image-picker": "~16.0.2", | ||
| "expo-image-picker": "^16.1.4", | ||
| "expo-status-bar": "~2.2.3", | ||
| "react": "19.0.0", | ||
| "react-dom": "19.0.0", | ||
| "react-native": "0.79.5", | ||
| "react-native-paper": "^5.14.5", | ||
| "react-native-safe-area-context": "^5.5.2", | ||
| "react-native-screens": "^4.13.1", | ||
| "react-native-safe-area-context": "^5.4.0", | ||
| "react-native-screens": "^4.11.1", | ||
| "react-native-web": "^0.20.0" | ||
| }, |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Automated check for range operators against expected SDK-aligned versions
Run this script to verify you’re using ~ where intended for SDK-aligned packages and avoid caret drift.
🏁 Script executed:
#!/bin/bash
set -euo pipefail
PKG_FILE="frontend/package.json"
check_pkg() {
local name="$1"
local want_op="$2" # "~" or "^"
local version
version=$(jq -r --arg name "$name" '.dependencies[$name] // empty' "$PKG_FILE")
if [[ -z "$version" ]]; then
echo "Missing dependency: $name"
return
fi
op="${version:0:1}"
if [[ "$op" != "$want_op" ]]; then
echo "Range operator mismatch for $name: found '$version' (op '$op'), want operator '$want_op'"
else
echo "OK: $name uses '$version'"
fi
}
# Expo-managed packages should usually use '~'
check_pkg "expo-image-picker" "~"
# Navigation ecosystem often pinned by SDK templates; prefer '~'
check_pkg "react-native-screens" "~"
check_pkg "react-native-safe-area-context" "~"
# If strict alignment desired, also use '~' for async-storage:
check_pkg "@react-native-async-storage/async-storage" "~" || true
echo "Tip: run 'npx expo install' or 'npx expo install --fix' to auto-align known compatible versions."Length of output: 2323
Align SDK-managed package versions to tilde (~) ranges
Several Expo and related packages currently use caret (^) ranges, which can drift beyond the tested SDK versions. Please pin these to tilde (~) to match the Expo SDK 53 alignment.
Affected dependencies in frontend/package.json:
- expo-image-picker: currently
^16.1.4→ should be~16.1.4 - react-native-screens: currently
^4.11.1→ should be~4.11.1 - react-native-safe-area-context: currently
^5.4.0→ should be~5.4.0 - @react-native-async-storage/async-storage: currently
^2.1.2→ should be~2.1.2
Suggested diff:
--- a/frontend/package.json
+++ b/frontend/package.json
@@ dependencies
- "expo-image-picker": "^16.1.4",
- "react-native-screens": "^4.11.1",
- "react-native-safe-area-context": "^5.4.0",
- "@react-native-async-storage/async-storage": "^2.1.2",
+ "expo-image-picker": "~16.1.4",
+ "react-native-screens": "~4.11.1",
+ "react-native-safe-area-context": "~5.4.0",
+ "@react-native-async-storage/async-storage": "~2.1.2",After updating, run:
npx expo install
to ensure all versions align with your SDK.
📝 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.
| "@expo/metro-runtime": "~5.0.4", | |
| "@react-native-async-storage/async-storage": "^2.2.0", | |
| "@react-native-async-storage/async-storage": "^2.1.2", | |
| "@react-navigation/bottom-tabs": "^7.4.4", | |
| "@react-navigation/native": "^7.1.16", | |
| "@react-navigation/native-stack": "^7.3.23", | |
| "axios": "^1.11.0", | |
| "expo": "~53.0.20", | |
| "expo-image-picker": "~16.0.2", | |
| "expo-image-picker": "^16.1.4", | |
| "expo-status-bar": "~2.2.3", | |
| "react": "19.0.0", | |
| "react-dom": "19.0.0", | |
| "react-native": "0.79.5", | |
| "react-native-paper": "^5.14.5", | |
| "react-native-safe-area-context": "^5.5.2", | |
| "react-native-screens": "^4.13.1", | |
| "react-native-safe-area-context": "^5.4.0", | |
| "react-native-screens": "^4.11.1", | |
| "react-native-web": "^0.20.0" | |
| }, | |
| "@expo/metro-runtime": "~5.0.4", | |
| "@react-native-async-storage/async-storage": "~2.1.2", | |
| "@react-navigation/bottom-tabs": "^7.4.4", | |
| "@react-navigation/native": "^7.1.16", | |
| "@react-navigation/native-stack": "^7.3.23", | |
| "axios": "^1.11.0", | |
| "expo": "~53.0.20", | |
| "expo-image-picker": "~16.1.4", | |
| "expo-status-bar": "~2.2.3", | |
| "react": "19.0.0", | |
| "react-dom": "19.0.0", | |
| "react-native": "0.79.5", | |
| "react-native-paper": "^5.14.5", | |
| "react-native-safe-area-context": "~5.4.0", | |
| "react-native-screens": "~4.11.1", | |
| "react-native-web": "^0.20.0" | |
| }, |
🤖 Prompt for AI Agents
In frontend/package.json around lines 12 to 28, several SDK-managed dependencies
use caret (^) ranges instead of tilde (~); update the four entries to use tilde:
change "@react-native-async-storage/async-storage": "^2.1.2" → "~2.1.2",
"expo-image-picker": "^16.1.4" → "~16.1.4", "react-native-safe-area-context":
"^5.4.0" → "~5.4.0", and "react-native-screens": "^4.11.1" → "~4.11.1"; after
editing package.json run `npx expo install` to reconcile and install versions
aligned with the Expo SDK.
| "axios": "^1.11.0", | ||
| "expo": "~53.0.20", | ||
| "expo-image-picker": "~16.0.2", | ||
| "expo-image-picker": "^16.1.4", |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use tilde range for Expo-managed module to match SDK expectations
Expo-managed packages are typically pinned with a tilde to the exact minor that the SDK expects. Using ^ may drift beyond the SDK’s supported set and trigger expo doctor warnings.
Apply:
- "expo-image-picker": "^16.1.4",
+ "expo-image-picker": "~16.1.4",📝 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.
| "expo-image-picker": "^16.1.4", | |
| "expo-image-picker": "~16.1.4", |
🤖 Prompt for AI Agents
In frontend/package.json around line 19 change the version specifier for
expo-image-picker from a caret (^) to a tilde (~) so the package is pinned to
the expected minor release (e.g., "^16.1.4" -> "~16.1.4"); update the dependency
entry accordingly, run your package manager install (npm/yarn) and then run expo
doctor to ensure the SDK no longer reports a mismatch.
| "react-native-paper": "^5.14.5", | ||
| "react-native-safe-area-context": "^5.5.2", | ||
| "react-native-screens": "^4.13.1", | ||
| "react-native-safe-area-context": "^5.4.0", |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Pin react-native-safe-area-context to tilde range
To keep consistency with the SDK’s expected set and reduce compatibility churn, prefer ~ here as well.
- "react-native-safe-area-context": "^5.4.0",
+ "react-native-safe-area-context": "~5.4.0",📝 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.
| "react-native-safe-area-context": "^5.4.0", | |
| - "react-native-safe-area-context": "^5.4.0", | |
| + "react-native-safe-area-context": "~5.4.0", |
🤖 Prompt for AI Agents
In frontend/package.json around line 25, the dependency
"react-native-safe-area-context": "^5.4.0" uses a caret range; change it to a
tilde range to pin to patch updates only. Edit the package.json to replace the
caret (^) with a tilde (~) for this dependency so it becomes "~5.4.0", then run
dependency install (or lockfile update) to ensure the lockfile matches.
| "react-native-safe-area-context": "^5.5.2", | ||
| "react-native-screens": "^4.13.1", | ||
| "react-native-safe-area-context": "^5.4.0", | ||
| "react-native-screens": "^4.11.1", |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Pin react-native-screens to tilde range to avoid SDK drift
react-native-screens is frequently version-checked by Expo templates and React Navigation. Use ~ to stay within the expected minor and avoid accidental upgrades.
- "react-native-screens": "^4.11.1",
+ "react-native-screens": "~4.11.1",📝 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.
| "react-native-screens": "^4.11.1", | |
| "react-native-screens": "~4.11.1", |
🤖 Prompt for AI Agents
In frontend/package.json around line 26, change the react-native-screens
dependency from a caret range to a tilde range to prevent SDK/minor version
drift; replace "^4.11.1" with "~4.11.1" in the dependencies and then run your
package manager (npm/yarn/pnpm install) to update the lockfile.
|
@tanii1125 Would you please take a pull from main, so that EAS preview build passes |
|
@tanii1125 Thank you so much for your contribution |
3 participants
This PR will resolve Issue -- #110
The following packages should be updated for best compatibility with the installed expo version:
@react-native-async-storage/async-storage@2.2.0 - expected version: 2.1.2
react-native-safe-area-context@5.5.2 - expected version: 5.4.0
react-native-screens@4.13.1 - expected version: ~4.11.1
expo-image-picker@16.0.6 - expected version: ~16.1.4