Market
What's moving right now
Overview
The Market tab is where you go when you want to explore beyond your own portfolio. It starts with a curated catalog of 112 popular assets organized by category: 30 stocks, 10 ETFs, 30 crypto, 12 commodities, and 30 forex pairs. But the real power is the search bar. It queries Alpha Vantage in real time as you type, giving you access to over 100,000 stocks, ETFs, commodities, and forex pairs worldwide. So while the browsing grid shows the popular picks, you can search for pretty much anything that trades on a public market. Each asset shows its live price, daily change, and a sparkline chart. At the top there are animated category tabs that let you filter by type. The Following tab shows your watchlist and a Hot Growth section with trending stocks. You can toggle between Following and Explore views using a liquid glass segmented control.
How it works
The asset catalog is defined in constants/marketAssets.ts with all 112 assets hardcoded with their symbols, names, types, and logo colors. This avoids an API call just to show the browsing grid.
Prices come from the same useBulkQuotes and useMultiAssetQuotes hooks as the portfolio screen. The market screen fetches prices for all visible assets in the current category.
Search uses the useAssetSearch hook which calls the Alpha Vantage SYMBOL_SEARCH endpoint through our Edge Function. This gives access to over 100,000 symbols globally. Results are debounced at 300ms and filtered to exclude crypto (we have a separate crypto list for that).
The watchlist lives in useMarketStore (Zustand) and persists to AsyncStorage. Adding or removing a watchlist item is instant and local only, no server sync needed.
Category tabs use a custom animated underline built with React Native Animated. When you tap a tab, the underline slides to match the new tab width and position, measured with onLayout.
The Hot Growth section shows a horizontal scrollable row of cards with gradient backgrounds derived from each stock logo color. The sparkline data is generated client side from actual price change data.
Key decisions
Hardcoded asset catalog
Instead of fetching a list of available assets from an API, we hardcoded 112 popular assets in a constants file for the browsing grid. This means the browsing experience loads instantly with zero network calls. But through search, users have access to the full Alpha Vantage catalog of over 100,000 symbols. So the curated list is just the starting point, not the limit.
Progressive price loading by category
Loading prices for 112 assets at once would be slow and expensive. Instead, we only fetch prices for the assets in the currently visible category. When you switch from Stocks to Crypto, it fetches crypto prices on demand. Each category tracks its own loading state independently.
Liquid Glass UI on supported devices
On iOS 26+ we use the LiquidGlassView for the search bar, toggle, and buttons. On older devices these gracefully fall back to semi transparent View components with matching border radius. The isLiquidGlassSupported check happens once and the fallback looks great too.