Cryptrix
  • Introduction
  • Features
  • Getting Started
  • Customization
  • Screens
  • FAQ
  • Changelog

NAVIGATION

No results found

  • Introduction
  • doc-imgFeatures
  • doc-imgGetting Started
    • Requirements
    • Installation
    • Running the App
    • What's Included
  • doc-imgCustomization
    • App Name, Bundle ID & Icon
    • Colors & Theme
    • Connecting a Backend
    • Adding New Screens
  • doc-imgScreens Reference
    • Auth & KYC
    • Main Tabs
  • doc-imgTech Stack
  • doc-imgFAQ
  • doc-imgChangelog

Welcome to Cryptrix

Thank you for purchasing Cryptrix — a premium, fully-featured AI-powered crypto portfolio management app built with React Native & Expo.

Cryptrix is a complete mobile app template with 55+ screens, a polished dark/light UI, real charts, KYC flow, live bottom sheets, and everything a production crypto app needs — ready to connect to your backend and publish on the App Store & Google Play.

  • Platform: iOS & Android (universal)
  • Framework: React Native with Expo SDK 54
  • Language: TypeScript (100%)
  • Screens: 55+ fully designed and functional screens
  • Theme: Dark & Light mode with instant toggle
  • Charts: Real interactive charts via victory-native (Skia)
  • Navigation: Expo Router v6 (file-based, like Next.js)

Features

Auth & Security

  • Welcome & animated onboarding (3-slide walkthrough)
  • Sign In / Sign Up with form validation
  • 6-digit OTP email verification
  • Face ID / Touch ID biometric authentication
  • Forgot password flow
  • Full KYC identity verification flow (personal info → document upload → selfie → auto review)
  • Two-factor authentication toggle

Home Dashboard

  • Portfolio value summary with 7-day sparkline chart
  • Day gain/loss badge with percentage
  • Quick-action buttons (Buy, Sell, Deposit, Withdraw, Swap, Stake)
  • AI trading recommendations strip
  • Recent transactions list

Market

  • Live-style coin list with search & filter (All / Trending / Gainers / Losers)
  • Coin detail screen — price chart (7D/1M/3M/1Y), market stats, ATH, supply
  • Trending coins ranked list
  • Categories view (DeFi, Layer 1, Layer 2, etc.)
  • Top Gainers & Losers
  • Market News — filterable by coin, sentiment badges (Bullish / Neutral / Bearish), article detail

Trade

  • Market Buy / Sell with numpad & preset amounts
  • Order review & confirmation screen
  • Trade success animation
  • Limit order form
  • Stop-Loss & Take-Profit sliders with confirm bottom sheet
  • Token Swap UI

Portfolio

  • Portfolio overview with holdings list & P&L
  • Balance breakdown — by asset class (crypto / staking / cash) with progress bars, hide/show toggle
  • Allocation donut chart
  • Historical performance chart (7D / 1M / 3M / 1Y)
  • Profit & Loss breakdown (realized & unrealized)
  • AI-powered rebalance suggestions
  • Wallet — addresses & QR codes

Profile & Settings

  • User profile with avatar, tier badge, and stats
  • Edit profile details
  • App settings — dark mode, push notifications, hide balance
  • Security — password change, biometric toggle, 2FA
  • Notification centre
  • Watchlist management
  • Price alerts (create, toggle active, delete)
  • Deposit (QR code) & Withdraw
  • Full transaction history with detail view
  • Staking positions & stake new asset
  • Rewards & cashback overview
  • Referral program with share link
  • AI Advisor — dashboard, chat interface, risk profile
  • Support — Help Centre, FAQ, Contact, Terms & Conditions

System & UI

  • Dark & Light theme with animated transition — persisted across sessions
  • Global bottom sheet manager — confirm, info, and custom sheet types
  • In-app toast notification system (success / error / warning / info)
  • Push notification permission flow (on launch & from settings)
  • Inter font family (6 weights) loaded via @expo-google-fonts
  • Fully typed — TypeScript with 0 compiler errors
  • 20 cryptocurrencies pre-loaded with realistic mock data

Getting Started

Requirements

Tool Minimum Version Notes
Node.js 18+ Required for npm and Expo CLI
npm 9+ Comes with Node.js
Expo CLI Latest npm install -g expo-cli
Xcode 15+ macOS only — required for iOS build
Android Studio Latest Required for Android emulator

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

Folder / File Description
cryptrix/ Full React Native Expo source code (TypeScript)
documentation/ This documentation — open index.html in any browser

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"
    }
  }
}
  • name — the app display name shown under the icon on the device
  • slug — URL-safe identifier used by Expo
  • scheme — deep-link scheme (e.g. yourappscheme://)
  • bundleIdentifier — iOS bundle ID in reverse-domain notation
  • package — Android package name (must match bundleIdentifier for shared deep linking)
  • Replace assets/icon.png with your icon — must be 1024 × 1024 px, PNG format
  • Replace assets/splash-icon.png with your splash screen — recommended 1284 × 2778 px
  • After changing any of these values, run npx expo prebuild --clean to regenerate native files

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

Service Functions Suggested Endpoints
authService signIn, signUp, verifyOtp, forgotPassword POST /auth/login, POST /auth/register, POST /auth/verify-otp, POST /auth/forgot-password
kycService submitPersonalInfo, uploadDocument, uploadSelfie, getVerificationStatus POST /kyc/personal-info, POST /kyc/document (multipart), GET /kyc/status
walletService withdraw POST /wallet/withdraw
aiService sendMessage POST /ai/chat (or WebSocket/SSE)
supportService sendMessage POST /support/contact

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:

  1. Create app/(tabs)/your-section/your-screen.tsx
  2. Expo Router automatically registers it as a route
  3. Navigate to it with router.push('/(tabs)/your-section/your-screen')
  4. Use ScreenWrapper as the root element for consistent safe-area padding and background
  5. Use Header component for a consistent back-button header
// 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)/

Screen File Description
Welcome welcome.tsx App intro screen with Sign In / Get Started buttons
Onboarding onboarding.tsx 3-slide animated feature walkthrough
Sign In signin.tsx Email + password login with biometric shortcut
Sign Up signup.tsx Registration form with terms agreement
OTP Verification otp.tsx 6-digit code entry with resend timer
Biometric Auth biometric-auth.tsx Face ID / Touch ID prompt
Forgot Password forgot-password.tsx Email-based password reset
KYC Overview kyc/index.tsx 4-step checklist before starting verification
KYC Personal Info kyc/personal-info.tsx Name, date of birth, nationality picker
KYC Document kyc/document.tsx Passport / ID / licence photo upload (front & back)
KYC Selfie kyc/selfie.tsx Front-camera selfie with retake option
KYC Review kyc/review.tsx Verification status — auto-approves and updates account

Main Tabs — app/(tabs)/

Home

Screen File Description
Home Dashboard index.tsx Portfolio card, sparkline, quick actions, AI picks, transactions

Market Tab

Screen File Description
Markets market/index.tsx Search & filter coin list with sparklines
Coin Detail market/[coinId].tsx Interactive price chart, stats, trade buttons
Trending market/trending.tsx Top movers ranked by 7-day change
Categories market/categories.tsx Coins grouped by sector
Gainers & Losers market/gainers-losers.tsx 24h top performers and worst performers
News List market/news/index.tsx Market news filterable by coin with sentiment badges
News Detail market/news/[id].tsx Full article with AI sentiment card and coin link

Trade Tab

Screen File Description
Trade trade/index.tsx Market buy/sell with numpad & presets
Limit Order trade/limit-order.tsx Limit buy/sell at a target price
Swap trade/swap.tsx Token-to-token swap interface
Stop-Loss / TP trade/stop-loss-tp.tsx Slider-based SL/TP order setup
Confirmation trade/confirmation.tsx Order review before submitting
Success trade/success.tsx Trade confirmed animation screen

Portfolio Tab

Screen File Description
Portfolio portfolio/index.tsx Holdings with P&L, period chart, quick links
Balance portfolio/balance.tsx Full balance breakdown by asset class, coin, staking & cash
Allocation portfolio/allocation.tsx Interactive donut chart by asset weight
Performance portfolio/performance.tsx Historical portfolio value line chart
Profit & Loss portfolio/profit-loss.tsx Realized & unrealized P&L breakdown
Rebalance portfolio/rebalance.tsx AI rebalance target vs current allocation
Wallet portfolio/wallet.tsx Deposit addresses with QR codes

Profile Tab

Screen File Description
Profile profile/index.tsx User overview with tier badge, stats, menu
Edit Profile profile/edit.tsx Update name, email, phone, avatar
Settings profile/settings.tsx Dark mode, notifications, privacy, security toggles
Security profile/security.tsx Password, biometric, 2FA management
Notifications profile/notifications.tsx Notification centre with read/unread state
Watchlist profile/watchlist.tsx Saved coins list with add/remove
Price Alerts profile/price-alerts/index.tsx Create and manage price alert triggers
Deposit profile/deposit.tsx Deposit address with QR code and copy
Withdraw profile/withdraw.tsx Withdrawal form with address input
Transactions profile/transactions/index.tsx Full trade history with filters
Transaction Detail profile/transactions/[id].tsx Individual transaction receipt
Staking profile/staking/index.tsx Active staking positions & rewards
Stake Asset profile/staking/stake-asset.tsx Choose asset and lock period to stake
Rewards profile/rewards.tsx Cashback and reward history
Referral profile/referral.tsx Referral code with share & earnings
AI Advisor profile/ai/index.tsx AI trading signal dashboard
AI Chat profile/ai/chat.tsx Chat with AI trading assistant
Risk Profile profile/ai/risk.tsx Risk tolerance assessment
Help Centre profile/support/help-center.tsx Support topic cards
FAQ profile/support/faq.tsx Frequently asked questions accordion
Contact profile/support/contact.tsx Support contact form
Terms profile/support/terms.tsx Terms & Conditions

Tech Stack

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

Category Library Version Purpose
Framework Expo SDK ~54.0 Core mobile framework
Navigation Expo Router ~6.0 File-based routing
UI Styling NativeWind + Tailwind CSS ^4.2 / ^3.4 Utility-first styling
State Zustand ^5.0 Global state management
Security expo-secure-store ~15.0 Encrypted key-value storage (iOS Keychain / Android Keystore)
Persistence expo-secure-store ~15.0 Encrypted storage for auth state & user data
Charts victory-native ^41.20 Line, area & pie charts (GPU-rendered)
Graphics @shopify/react-native-skia 2.2.12 Chart rendering engine & gauge arcs
Bottom Sheets @gorhom/bottom-sheet ^5.2 Draggable bottom sheets
Sliders @miblanchard/react-native-slider ^2.6 SL/TP price sliders
Animations react-native-reanimated ~4.1 Smooth gesture animations
Gestures react-native-gesture-handler ~2.28 Touch gesture system
Fonts @expo-google-fonts/inter ^0.4 Inter (6 weights)
Gradients expo-linear-gradient ~15.0 Gradient backgrounds
Biometrics expo-local-authentication ~17.0 Face ID / Touch ID
Camera expo-image-picker ~17.0 KYC photo & selfie upload
Notifications expo-notifications ~0.32 Push notification permissions
QR Codes react-native-qrcode-svg ^6.3 Wallet QR codes
Data Fetching @tanstack/react-query ^5.96 Ready for API integration
Language TypeScript ~5.9 Full type safety

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

April 2026

Initial Release

1.0.0

New Full auth flow — welcome, onboarding, sign in/up, OTP, biometric, forgot password

New KYC verification flow — 4 screens: personal info, document upload, selfie, review

New 5 main tabs — Home, Market, Trade, Portfolio, Profile

New 55+ screens fully implemented

New Market News — list with coin filter & sentiment badges + article detail screen

New Portfolio Balance — full asset breakdown by class, per-coin, staking & cash with hide/show toggle

New Interactive charts — line, area, and donut (victory-native + Skia)

New Dark & Light theme with animated transition

New Zustand global store with encrypted persistence (expo-secure-store)

New Global bottom sheet manager — useSheet() hook with confirm, info & custom types

New Stop-Loss / Take-Profit sliders

New Push notification permission request on app launch and from Settings

New Toast notification system

New 20 cryptocurrencies with realistic mock data

New TypeScript — 100% type-safe, 0 compiler errors

Need help? Visit support.pxlaxis.com to submit a ticket.

Cryptrix v1.0.0
Expo SDK 54
React Native 0.81
TypeScript 5.9
55+ Screens

Need help or customization?
Visit support.pxlaxis.com

© 2026 Cryptrix. All Rights Reserved.

Built with Expo SDK 54 · React Native 0.81 · TypeScript