Coinbase Clone with React Native Expo, Redux, and Navigation

I start a series to build a Coinbase clone app using React Native with Expo, Redux, and several crypto APIs. It’s for developers interested in combining real-time data fetching, navigation, and UI animations in a mobile app.

You’ll see how to set up the project structure, install dependencies, and create navigation stacks and tabs. The app uses live data from Coinbase Pro, CryptoCompare, and CoinMarketCap APIs. Redux manages state and API calls. I also covers building a custom animated tab bar with vibration feedback.

What's inside

Project setup with Expo and TypeScript template
Installing dependencies for navigation, Redux, and API calls
Creating folder structure: source, navigation, components, screens, constants
Building navigation with React Navigation: stack and bottom tabs
Creating placeholder screens for Home, Portfolio, Actions, Prices, and Settings
Implementing a custom animated tab bar with icon color changes and vibration
Managing colors and styles in a separate constants file
Integrating Redux for state and API data management

Project setup with Expo and TypeScript template

I start by creating a new Expo project using the TypeScript template with the command:

and selecting the TypeScript template

This sets up the base React Native app with Expo tooling. After the project installs, the developer opens it and runs to launch the development server. This foundation allows adding navigation, Redux, and API integrations in a structured way.

Next, I install all required dependencies in one command, including:

React Navigation libraries (, , )
Redux and React Redux for state management
Axios or fetch for API calls (implied)
Additional utilities for animations and gestures

The full list is in the description for easy copy-pasting. Installing these upfront prepares the project for navigation setup, state handling, and API integration.

The project is organized with a clear folder structure inside a folder:

for all navigation-related files
for reusable UI components like the custom tab bar
for each app screen (Home, Portfolio, Actions, Prices, Settings)
for shared values like colors

This structure keeps code modular and maintainable, making it easier to scale the app as features grow.

I show how to set up React Navigation with:

A stack navigator for screens like news inside Home
A bottom tab navigator for main app sections (Home, Portfolio, Actions, Prices, Settings)

It imports , , and from React Navigation. Screens are registered with names and components. The tab navigator is wrapped inside the navigation container and exported as the main app navigator.

Creating placeholder screens for Home, Portfolio, Actions, Prices, and Settings

Simple placeholder screens are created as functional components returning a element with the screen name. These are stored in the folder and imported into the navigator.

This scaffolding allows navigation to work while the UI and logic for each screen are developed later.

Implementing a custom animated tab bar with icon color changes and vibration

A key feature is the custom tab bar component replacing the default tab bar. It uses:

React Native components like , , and icons from
Vibration API to provide haptic feedback on tab press
Animated scaling of icons when focused (pressed) to create a bounce effect
Color changes for active and inactive tabs using a color palette from constants

The tab bar maps over routes and applies styles and animations based on the navigation state index. This improves UX with subtle animations and feedback.

Managing colors and styles in a separate constants file

Colors used throughout the app are centralized in a file inside the constants folder. This file exports named colors like:

for the main accent
for borders
for buttons

Using a constants file for colors makes it easy to maintain consistent theming and update colors app-wide.

Integrating Redux for state and API data management

Redux is set up to manage the app state, including API data fetching for:

Crypto coin lists from Coinbase Pro API
Price data and news from CryptoCompare API
Logos from CoinMarketCap API

Redux handles asynchronous API calls and stores data in the global state. This approach keeps UI components clean and focused on rendering, while Redux manages data logic.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.

Let's connect!