Nommo Mobile App

A React Native CLI application that transposes the Next.js Nommo frontend into a mobile trading platform.

Architecture Overview

This mobile app maintains the same architectural principles as the frontend Next.js application:

Core Features Implemented

1. Authentication System

   • Login/Signup screens with form validation
   • Redux state management for authentication
   • JWT token handling with AsyncStorage

2. Navigation Structure

   • Bottom tab navigation (Dashboard, Portfolio, Markets, Wallet, Profile)
   • Stack navigation for authentication flow
   • Theme-aware navigation styling

3. Global Theme System

   • Light/Dark mode support
   • Theme context with persistence
   • Consistent color scheme across all screens
   • Theme selector component

4. Redux State Management

   • Authentication slice
   • TypeScript-safe hooks
   • Proper store configuration

5. Internationalization (i18n)

   • Multi-language support (English, French, Arabic)
   • Device locale detection
   • Namespace-based translation organization

6. API Integration

   • React Native-compatible API call function
   • Token management with AsyncStorage
   • Error handling and response formatting
   • Custom hooks for common API operations

7. Screen Implementation

   • Dashboard: Portfolio overview, quick actions, market updates
   • Portfolio: Holdings view, performance charts, transactions
   • Markets: Stock listings, search, market indices
   • Profile: User information, settings, theme selector
   • Wallet: Balance view, deposit/withdraw actions

Technical Stack

• React Native CLI v0.80.1
• TypeScript for type safety
• Redux Toolkit for state management
• React Navigation v7 for navigation
• React i18next for internationalization
• AsyncStorage for local data persistence
• React Hook Form for form handling
• Axios for API calls

Project Structure

src/
├── assets/           # Images, fonts, etc.
├── components/       # Reusable UI components
├── context/          # React contexts (ThemeContext)
├── enum/            # TypeScript enums
├── hooks/           # Custom React hooks
├── i18n/            # Internationalization setup
├── interfaces/      # TypeScript interfaces
├── locales/         # Translation files (en/fr/ar)
├── navigation/      # Navigation configuration
├── redux/           # Redux store and slices
├── screens/         # App screens (auth + main)
├── styles/          # Global styles and themes
└── utils/           # Utility functions (API)

Running the App

Prerequisites

For iOS Development (macOS only):

1. Xcode (version 12 or later)

   • Install from the Mac App Store
   • Accept Xcode license: sudo xcodebuild -license accept

2. iOS Simulator

   • Comes with Xcode installation
   • Additional simulators can be downloaded from Xcode > Preferences > Components

3. CocoaPods (for iOS dependencies)

   # Recommended: Install via Homebrew (avoids Ruby version issues)
   brew install cocoapods
   
   # Alternative: Install via gem (may require Ruby 3.1+ or specific version)
   # If you encounter Ruby version errors, use the Homebrew method above
   sudo gem install cocoapods
   

4. Watchman (optional but recommended)

   brew install watchman
   

For Android Development:

1. Android Studio
2. Android SDK (API level 34 or higher)
3. Java Development Kit (JDK) (version 17-20)

Setup iOS Dependencies

Before running on iOS, install the required pods:

cd ios && pod install && cd ..

Running the App

1. Start Metro Bundler (in project root):

   npm start
   # OR
   npx react-native start
   

2. Run on iOS Simulator (in a new terminal):

   # Run on default iOS simulator
   npm run ios
   
   # OR run with specific simulator
   npx react-native run-ios --simulator="iPhone 15 Pro"
   
   # OR run on a specific iOS version
   npx react-native run-ios --simulator="iPhone 15 Pro (17.5)"
   

3. Run on Android (make sure Android emulator is running):

   npm run android
   # OR
   npx react-native run-android
   

4. Run on Physical Device:

   # iOS (device must be connected and configured)
   npx react-native run-ios --device
   
   # Android (device must be connected with USB debugging enabled)
   npx react-native run-android --device
   

Running in Xcode Simulator

Step-by-Step Guide:

1. Start Metro Bundler (in project root):

   npm start
   # Keep this terminal running
   

2. Choose one of these methods to run on iOS:

   Method 1: Using React Native CLI (Recommended)

   # In a new terminal - Run on default iOS simulator
   npm run ios
   
   # OR specify a particular simulator
   npx react-native run-ios --simulator="iPhone 15 Pro"
   

   Method 2: Using Xcode

   # Open the workspace in Xcode
   open ios/NommoMobile.xcworkspace
   
   # In Xcode:
   # 1. Select your target device/simulator from the dropdown
   # 2. Press Cmd+R or click the Play button to build and run
   

3. List Available Simulators:

   xcrun simctl list devices available
   

4. Common Simulator Options:

   • iPhone 15 Pro (Latest)
   • iPhone 15
   • iPhone 14 Pro
   • iPhone SE (3rd generation) (Smaller screen testing)
   • iPad Pro (12.9-inch) (6th generation) (Tablet testing)

Running with Specific iOS Version:

npx react-native run-ios --simulator="iPhone 15 Pro (17.5)"

First Run Checklist:

• ✅ Xcode installed and license accepted
• ✅ CocoaPods installed
• ✅ pod install completed successfully
• ✅ Metro bundler running
• ✅ iOS Simulator available

Expected Behavior:

1. Metro bundler starts and shows "Loading dependency graph..."
2. iOS Simulator opens automatically
3. App builds and installs on simulator
4. You should see the Nommo Mobile login screen

Running on Physical Devices

iOS Physical Device Setup:

1. Prerequisites:

   • iPhone/iPad with iOS 12.4 or later
   • Apple Developer Account (free or paid)
   • USB cable (Lightning or USB-C depending on device)

2. Device Configuration:

   # Enable Developer Mode on your device:
   # Settings > Privacy & Security > Developer Mode > Toggle ON
   

3. Xcode Setup:

   # Open workspace in Xcode
   open ios/NommoMobile.xcworkspace
   
   # In Xcode:
   # 1. Select your physical device from the device dropdown
   # 2. Go to Signing & Capabilities tab
   # 3. Select your Team (Apple Developer Account)
   # 4. Xcode will automatically create provisioning profile
   

4. Trust Developer Certificate:

   • On your device: Settings > General > VPN & Device Management
   • Trust the developer certificate

5. Run on Device:

   # Method 1: Using React Native CLI
   npx react-native run-ios --device
   
   # Method 2: Using Xcode (Cmd+R after setup)
   # Method 3: Using npm script
   npm run ios -- --device
   

Android Physical Device Setup:

1. Prerequisites:

   • Android device with Android 6.0 (API level 23) or higher
   • USB cable
   • USB debugging enabled

2. Enable Developer Options:

   # On your Android device:
   # Settings > About phone > Tap "Build number" 7 times
   # Go back to Settings > Developer options
   

3. Enable USB Debugging:

   # In Developer options:
   # - Enable "USB debugging"
   # - Enable "Install via USB" (Android 12+)
   # - Optionally enable "Stay awake" for development
   

4. Connect and Verify Device:

   # Check if device is detected
   adb devices
   
   # You should see your device listed
   # If not detected, try different USB cable or port
   

5. Run on Device:

   # Make sure only one device is connected, or specify device
   npx react-native run-android --device
   
   # Or use npm script
   npm run android
   
   # If multiple devices, list them first:
   adb devices
   # Then specify device:
   npx react-native run-android --deviceId=DEVICE_ID
   

Common Physical Device Issues:

iOS Device Issues:

# "Could not find device" error
# - Ensure device is unlocked and trusted
# - Check USB connection
# - Restart Xcode and reconnect device

# Code signing errors
# - Verify Apple Developer Account in Xcode
# - Clean build: Product > Clean Build Folder in Xcode
# - Delete app from device and reinstall

# "This app cannot be installed" error
# - Check device storage space
# - Verify iOS version compatibility
# - Trust developer certificate on device

Android Device Issues:

# Device not detected
adb kill-server
adb start-server
adb devices

# Permission denied errors
# - Enable USB debugging again
# - Try different USB port/cable
# - Allow USB debugging when prompted on device

# Installation failed
# - Enable "Install via USB" in developer options
# - Clear app data if app already exists
# - Check device storage space

Wireless Development (Advanced):

iOS Wireless Development:

# In Xcode with device connected via USB:
# Window > Devices and Simulators > Select device > "Connect via network"
# Disconnect USB, device should appear with network icon

Android Wireless Development:

# Enable wireless debugging (Android 11+)
# Developer options > Wireless debugging > Enable

# Pair device (one-time setup)
adb pair IP_ADDRESS:PORT
# Enter pairing code shown on device

# Connect wirelessly
adb connect IP_ADDRESS:PORT

# Verify connection
adb devices

Available iOS Simulators

To see available simulators:

xcrun simctl list devices available

Common simulator options:

• iPhone 15 Pro
• iPhone 15
• iPhone 14 Pro
• iPhone SE (3rd generation)
• iPad Pro (12.9-inch) (6th generation)

Development Commands

# Start Metro with cache reset
npm start -- --reset-cache

# Build iOS for release
npx react-native run-ios --configuration Release

# Build Android for release
npx react-native run-android --variant=release

# Clean build
# iOS
cd ios && xcodebuild clean && cd ..
# Android
cd android && ./gradlew clean && cd ..

Troubleshooting

CocoaPods Installation Issues:

# If you get Ruby version errors when installing CocoaPods via gem:
# Error: "securerandom requires Ruby version >= 3.1.0"

# Solution 1: Use Homebrew (Recommended)
brew install cocoapods

# Solution 2: Install specific securerandom version
gem install securerandom -v 0.3.2
sudo gem install cocoapods

# Solution 3: Use rbenv to manage Ruby versions
brew install rbenv
rbenv install 3.1.0
rbenv global 3.1.0
# Then restart terminal and try: gem install cocoapods

# Verify CocoaPods installation
pod --version

Physical Device Connection Issues:

# iOS Device Issues:
# Check device connection and trust
xcrun simctl list devices available
# Look for your physical device in the list

# Reset device trust
# Disconnect device, go to Settings > General > Reset > Reset Location & Privacy
# Reconnect and trust computer again

# Android Device Issues:
# Check ADB connection
adb devices
# Should show device as "device" not "unauthorized"

# Reset ADB connection
adb kill-server
adb start-server

# Enable USB debugging again if needed
# Settings > Developer options > USB debugging

iOS Simulator Issues:

# Reset iOS simulator
xcrun simctl erase all

# Kill Metro process if stuck
npx react-native start --reset-cache

# Reinstall pods
cd ios && rm -rf Pods && pod install && cd ..

Common Metro Issues:

# Clear Metro cache
npx react-native start --reset-cache

# Clear npm/yarn cache
npm cache clean --force
# OR
yarn cache clean

Build Issues:

# If you get "Could not read package.json" error:
# Make sure you're in the correct directory
cd /path/to/NOMMO/mobile-app/NommoMobile

# Clean everything and reinstall
rm -rf node_modules
npm install
cd ios && rm -rf Pods && pod install && cd ..
npx react-native start --reset-cache

Transposition Status

✅ Core Architecture: Fully transposed
✅ Theme System: Complete with persistence
✅ Authentication: Redux + AsyncStorage
✅ Navigation: Bottom tabs + stack
✅ i18n: Multi-language support
✅ API Layer: React Native compatible
✅ Main Screens: Dashboard, Portfolio, Markets, Profile

The mobile app successfully maintains the architectural patterns and user experience design of the original Next.js frontend while being optimized for mobile platforms.

---

Original React Native CLI Documentation

This is a new React Native project, bootstrapped using @react-native-community/cli.

Getting Started

Note

: Make sure you have completed the Set Up Your Environment guide before proceeding.

Step 1: Start Metro

First, you will need to run Metro, the JavaScript build tool for React Native.

To start the Metro dev server, run the following command from the root of your React Native project:

# Using npm
npm start

# OR using Yarn
yarn start

Step 2: Build and run your app

With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app:

Android

# Using npm
npm run android

# OR using Yarn
yarn android

iOS

For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).

The first time you create a new project, run the Ruby bundler to install CocoaPods itself:

bundle install

Then, and every time you update your native dependencies, run:

bundle exec pod install

For more information, please visit CocoaPods Getting Started guide.

# Using npm
npm run ios

# OR using Yarn
yarn ios

If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.

This is one way to run your app — you can also build it directly from Android Studio or Xcode.

Step 3: Modify your app

Now that you have successfully run the app, let's make changes!

Open App.tsx in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by Fast Refresh.

When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:

• Android: Press the R key twice or select "Reload" from the Dev Menu, accessed via Ctrl + M (Windows/Linux) or Cmd ⌘ + M (macOS).
• iOS: Press R in iOS Simulator.

Congratulations! 🎉

You've successfully run and modified your React Native App. 🥳

Now what?

• If you want to add this new React Native code to an existing application, check out the Integration guide.
• If you're curious to learn more about React Native, check out the docs.

Troubleshooting

If you're having issues getting the above steps to work, see the Troubleshooting page.

Learn More

To learn more about React Native, take a look at the following resources:

• React Native Website - learn more about React Native.
• Getting Started - an overview of React Native and how setup your environment.
• Learn the Basics - a guided tour of the React Native basics.
• Blog - read the latest official React Native Blog posts.
• @facebook/react-native - the Open Source; GitHub repository for React Native.