Co-authored-by: Alex Kim <alexkim@Alexs-MacBook-Pro.local> Co-authored-by: Alex <111128610+Alexk2309@users.noreply.github.com> Co-authored-by: Simon-Eklundh <simon.eklundh@proton.me>
2.8 KiB
Learned Facts
This file contains facts about the codebase learned from past sessions. These are things Claude got wrong or needed clarification on, stored here to prevent the same mistakes in future sessions.
This file is auto-imported into CLAUDE.md and loaded at the start of each session.
Facts
-
Native bottom tabs + useRouter conflict: When using
@bottom-tabs/react-navigationwith Expo Router, avoid using theuseRouter()hook in components rendered at the provider level (outside the tab navigator). The hook subscribes to navigation state changes and can cause unexpected tab switches. Use the staticrouterimport fromexpo-routerinstead. (2025-01-09) -
IntroSheet rendering location: The
IntroSheetcomponent is rendered insideIntroSheetProviderwhich wraps the entire navigation stack. Any hooks in IntroSheet that interact with navigation state can affect the native bottom tabs. (2025-01-09) -
Intro modal trigger location: The intro modal trigger logic should be in the
Home.tsxcomponent, not in the tabs_layout.tsx. Triggering modals from tab layout can interfere with native bottom tabs navigation. (2025-01-09) -
Tab folder naming: The tab folders use underscore prefix naming like
(_home)instead of just(home)based on the project's file structure conventions. (2025-01-09) -
macOS header buttons fix: Header buttons (
headerRight/headerLeft) don't respond to touches on macOS Catalyst builds when using standard React NativeTouchableOpacity. Fix by usingPressablefromreact-native-gesture-handlerinstead. The library is already installed andGestureHandlerRootViewwraps the app. (2026-01-10) -
Header button locations: Header buttons are defined in multiple places:
app/(auth)/(tabs)/(home)/_layout.tsx(SettingsButton, SessionsButton, back buttons),components/common/HeaderBackButton.tsx(reusable),components/Chromecast.tsx,components/RoundButton.tsx, and dynamically vianavigation.setOptions()incomponents/home/Home.tsxandapp/(auth)/(tabs)/(home)/downloads/index.tsx. (2026-01-10) -
useNetworkAwareQueryClient limitations: The
useNetworkAwareQueryClienthook usesObject.create(queryClient)which breaks QueryClient methods that use JavaScript private fields (likegetQueriesData,setQueriesData,setQueryData). Only use it when you ONLY needinvalidateQueries. For cache manipulation, use standarduseQueryClientfrom@tanstack/react-query. (2026-01-10) -
Mark as played flow: The "mark as played" button uses
PlayedStatuscomponent →useMarkAsPlayedhook →usePlaybackManager.markItemPlayed(). The hook does optimistic updates viasetQueriesDatabefore calling the API. Located incomponents/PlayedStatus.tsxandhooks/useMarkAsPlayed.ts. (2026-01-10)