Investment Portfolio

Overview

This is a financial portfolio dashboard screen that displays investment holdings with live price data and animated digit transitions. The screen renders a scrollable list of stock positions (Apple, Tesla, Nvidia, Amazon in the example), each with current price, daily change, and percentage gain/loss. The core interaction is the rolling digit animation on price values—when data updates, numbers animate in place rather than snap, creating a polished trading app feel.

You get a fully wired dark-themed portfolio view with SVG logos, formatted currency displays, and production-ready safe area handling. No placeholder logic—the component manages local state for prices and animates transitions using native-level performance.

Use cases

Fintech apps and investment platforms use this for account dashboards, watchlists, and portfolio overviews. It works as a primary screen after login or as a tab within a larger trading interface.

Wealth management and robo-advisor apps need this exact pattern: showing aggregate holdings, individual positions, and performance metrics at a glance. The animation style reinforces the "live market" perception without visual noise.

Crypto wallets and exchange apps can adapt this for token balances and P&L tracking. The dark theme and rolling digits fit that audience's expectations.

It's less suited for static portfolio reviews or historical views—this is for active monitoring scenarios where price updates happen frequently enough that animation matters.

Customisation

Colors and theming: Update the hex values in the StyleSheet object to match your brand.

Data source: Replace the useState mock with real API calls or a state manager. The price update loop in useEffect is where you'd connect to your backend or WebSocket stream.

Navigation: The TouchableOpacity elements are ready for onPress handlers—wire them to navigation.navigate() for detail screens or trading flows.

Animation feel: The withSpring config is tuned for snappiness. Adjust the damping and mass parameters if you want slower or bouncier transitions. Toggle spring off entirely (use withTiming instead) if you prefer instant updates on slow networks.