Build a Stock Tracker App with React Native

What this app does

MarketPulse is a Apple Stocks inspired mobile stock watchlist, investing and research app that helps investors track market movements and explore company financials in one place. Instead of juggling multiple tabs or apps, users open MarketPulse to see their watched stocks at a glance, search for new ones, and dive into detailed charts and earnings data without leaving the app. It solves the friction of finding reliable stock data fast—perfect for anyone from casual investors checking portfolio performance to traders monitoring intraday moves.

Screens and user flow

The experience begins on WelcomeScreen, a clean onboarding splash that introduces the app's core features with a single tap to continue.

From there, WatchlistScreen becomes the main hub. Users see their tracked stocks in a scrollable list, each row showing the ticker symbol, company name, a small price chart, current price, and percentage change. A news panel view from the bottom appears with business news without overwhelming the top view. Tapping any stock row triggers a navigation push to StockDetailScreen.

If users want to add a new stock, they tap the search icon in the header, which navigates to SearchScreen—a full-screen overlay where they type a ticker or company name. Results appear in the same familiar row format (ticker, name, sparkline, price). Selecting a result pushes them directly to the detail view.

StockDetailScreen is where depth lives. A sticky header keeps the ticker and key indices visible while users scroll through a full price chart with selectable time ranges (6M, YTD, 1Y, 2Y, 5Y, 10Y, ALL), an earnings alert banner with a calendar button, and a two-column grid of financial metrics (P/E ratio, market cap, 52-week high/low, volume).

PortfolioScreen is where the user can see their portfolio performance, buy and sell their stocks or tokenized assets.

Throughout, the navigation pattern is a simple push-and-pop stack: each tap moves forward to more detail, and dismissing or tapping back returns to the previous screen. No hidden tabs or complex branching—just a linear drill-down experience.

Who it's for

Startup founders can use this flow to validate the core interaction patterns of a fintech or investment app. Product managers scoping a stock tracking feature can see how to structure data density (glanceable rows, detailed charts) across different screen sizes. Designers building financial apps can reference the visual hierarchy: how bold white typography and neon green accents guide attention to price changes and key metrics on a dark background. Developer teams bootstrapping a React Native finance app can remix this code as a template, replacing mock data with real APIs and extending the chart library.

Built with RNBlocks

This flow was created in RNBlocks studio. Remix this flow to make it yours!