Getting Started

Requirements

You can also use the Expo Go app on a physical phone to preview without installing simulators.

Installation

Step 1 — Open your terminal and navigate into the project folder:

cd cryptrix-rn

Step 2 — Install all dependencies:

npm install

This installs all packages listed in package.json including Expo SDK, React Native, NativeWind, charts, and all other dependencies.

Running the App

Option 1 — Expo Go (fastest, no simulator needed)

npx expo start

Scan the QR code shown in the terminal with the Expo Go app on your iPhone or Android phone. The app loads instantly.

Option 2 — iOS Simulator (macOS only)

npm run ios
# or
npx expo run:ios

Requires Xcode 15+ installed. The iOS Simulator launches automatically.

Option 3 — Android Emulator

npm run android
# or
npx expo run:android

Requires Android Studio with an Android Virtual Device (AVD) running.

Option 4 — Web (limited preview)

npm run web

Opens in your browser. Some native features (biometrics, camera) are not available on web.

What's Included

Customization

Everything in Cryptrix is designed to be easy to customize. Below are the most common changes buyers make.

1. Change App Name, Bundle ID & Icon

Open cryptrix-rn/app.json and update:

{
  "expo": {
    "name": "Your App Name",
    "slug": "your-app-slug",
    "scheme": "yourappscheme",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash-icon.png",
      "backgroundColor": "#0A0B0F"
    },
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourapp"
    },
    "android": {
      "package": "com.yourcompany.yourapp"
    }
  }
}

2. Change Brand Colors

All colors are defined in cryptrix-rn/src/theme/colors.ts. There are two palettes — dark and light. To change the primary brand color:

// src/theme/colors.ts

export const darkColors = {
  primary:   '#00D4AA',   // ← change this to your brand color
  primaryDark: '#00A88A', // ← slightly darker shade for gradients
  secondary: '#7B61FF',
  accent:    '#FF6B35',
  // ...
};

Update both darkColors and lightColors palettes to keep both themes consistent. The change applies instantly across all 55+ screens.

Tailwind Classes

NativeWind utility classes like bg-primary, text-primary are mapped in tailwind.config.js and inherit from the theme automatically.

3. Connecting to a Real Backend

All async operations go through the service layer in src/services/api.ts. Every function returns a Promise — screens use async/await and don't know whether data comes from mock logic or a real server. To connect your API, replace each function body.

Step 1 — Install an HTTP client (optional)

npm install axios

Step 2 — Create an API client

Create src/services/client.ts:

import axios from 'axios';

export const api = axios.create({
  baseURL: 'https://your-api.com/api/v1',
  timeout: 15000,
});

// Attach auth token to every request
api.interceptors.request.use(async (config) => {
  const token = await getAuthToken();
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

Step 3 — Replace each service function

Each function in src/services/api.ts has a // TODO comment. Replace the mock body:

// Before (mock):
async signIn(_email: string, _password: string): Promise<AuthResult> {
  await randomDelay();
  // TODO: replace with POST /auth/login
  return { success: true };
}

// After (real API):
async signIn(email: string, password: string): Promise<AuthResult> {
  const { data } = await api.post('/auth/login', { email, password });
  await saveAuthToken(data.token);
  return { success: true };
}

Services to implement

Replacing mock data in the store

Mock data lives in src/data/mockData.ts and hydrates the Zustand store on every launch. To switch to a backend-driven flow, edit the store's initial state to start empty and add a bootstrap action, then call it from app/_layout.tsx after fetching from your API.

Note: @tanstack/react-query is already installed in the project.

4. Adding New Screens

Cryptrix uses Expo Router — file-based routing. Adding a screen is as simple as creating a new file:

// app/(tabs)/your-section/your-screen.tsx
import { ScreenWrapper } from '@/src/components/layout/ScreenWrapper';
import { Header } from '@/src/components/layout/Header';
import { Text } from 'react-native';

export default function YourScreen() {
  return (
    <ScreenWrapper scrollable edges={['top']}>
      <Header title="Your Screen" />
      <Text className="text-text-light dark:text-text">Hello!</Text>
    </ScreenWrapper>
  );
}

Using the Bottom Sheet

Use the built-in useSheet() hook anywhere in the app to show a confirmation or info sheet:

import { useSheet } from '@/src/components/layout/SheetManager';

const { openSheet } = useSheet();

// Show a confirmation dialog
openSheet({
  type: 'confirm',
  title: 'Confirm Trade',
  message: 'Are you sure you want to buy 0.01 BTC?',
  onConfirm: () => executeTrade(),
});

// Show an info sheet
openSheet({
  type: 'info',
  title: 'Fee Info',
  message: 'A 0.1% trading fee applies to all market orders.',
});

Screens Reference

Cryptrix includes 55+ screens across auth, market, trade, portfolio, and profile sections.

Auth & KYC — app/(auth)/

Main Tabs — app/(tabs)/

Home

Market Tab

Trade Tab

Portfolio Tab

Profile Tab

Tech Stack

Cryptrix is built on modern, well-supported libraries that are production-ready and actively maintained.

Frequently Asked Questions

Can I publish this app on the App Store and Google Play?

Yes. Cryptrix is a fully production-ready React Native app. Use npx expo build or EAS Build to generate the .ipa (iOS) and .apk / .aab (Android) files for submission. Refer to the Expo Distribution docs for step-by-step guidance.

Does this app require a backend?

No backend is required to run the app. All data is pre-filled with realistic mock data so everything works out of the box. When you are ready, you can replace the mock data with calls to your own API. @tanstack/react-query is already installed and ready to use.

How do I connect live cryptocurrency prices?

Replace mockCoins in src/data/mockData.ts with data from a crypto price API such as CoinGecko or CoinMarketCap. Use @tanstack/react-query to fetch and cache the data, then update the Zustand store.

Can I change the app to a different crypto niche (e.g. NFTs, DeFi)?

Yes. All screens are cleanly separated TypeScript files. You can rename, replace, or extend any screen. The design system (colors, typography, components) is centralized so a single color change updates the entire app.

Does it work on both iOS and Android?

Yes. The app is tested and compatible with both platforms. All features including biometrics, camera (KYC), and push notifications use cross-platform Expo APIs.

How do I update the app icon and splash screen?

Replace assets/icon.png (1024×1024 px) and assets/splash.png in the cryptrix-rn/assets/ folder, update the paths in app.json if needed, then run npx expo prebuild to regenerate native project files.

How do I get support?

Visit our dedicated support portal at support.pxlaxis.com to submit a support ticket, browse help articles, and track your requests. Include your purchase code, a clear description of the issue, and any relevant error messages. We respond to all inquiries within 24–48 hours.

Changelog