Gcbuying Mobile

Overview

The Gcbuying mobile app enables users to trade gift cards and cryptocurrency on the go. With over 100,000 downloads across both platforms, the app is a critical channel for user engagement.

The Challenge

When I took over the mobile development, the situation was challenging:

• Two separate codebases: Native Android (Kotlin) and iOS (Swift) apps
• Developer departure: The original native developer had left the company
• Maintenance burden: Bug fixes and features had to be implemented twice
• Inconsistent UX: Different behaviors and UI between platforms
• Slow iteration: Feature releases took twice as long

The native apps were functional but maintaining two codebases with a small team was unsustainable.

The Solution

I made the decision to rebuild both apps as a single React Native application:

Why React Native?

1. Single Codebase: Write once, deploy to both platforms
2. JavaScript/TypeScript: Leverage existing web team skills
3. Hot Reloading: Faster development iteration
4. CodePush: Over-the-air updates without app store delays
5. Native Performance: Near-native performance with native modules where needed

Technical Implementation

Architecture

src/
├── components/       # Reusable UI components
├── screens/          # Screen components
├── navigation/       # React Navigation setup
├── store/            # Redux state management
├── services/         # API and business logic
├── hooks/            # Custom React hooks
├── utils/            # Helper functions
└── native/           # Native module bridges

Key Features

Trading Features

• Gift card selling with camera capture
• Cryptocurrency trading interface
• Real-time price updates via WebSocket
• Transaction history and tracking

Security

• Biometric authentication (Face ID / Touch ID / Fingerprint)
• Secure token storage with Keychain/Keystore
• Certificate pinning for API calls
• Session management with auto-logout

User Experience

• Push notifications for transaction updates
• Offline mode with cached data
• Dark mode support
• Smooth animations with Reanimated

Native Modules

For performance-critical features, I built custom native modules:

// Camera module for gift card capture
import { NativeModules } from 'react-native';
const { GiftCardScanner } = NativeModules;
 
// Biometric authentication
import { NativeModules } from 'react-native';
const { BiometricAuth } = NativeModules;

State Management

Used Redux Toolkit for predictable state management:

• Auth Slice: User authentication state
• Wallet Slice: Balance and transaction data
• Trading Slice: Active trades and rates
• UI Slice: Theme, notifications, loading states

Migration Strategy

The migration was executed carefully to avoid disrupting existing users:

1. Feature Parity: Matched all existing native app features
2. Beta Testing: Released to internal testers first
3. Gradual Rollout: Staged rollout on Play Store and App Store
4. Monitoring: Crash reporting and analytics from day one
5. Quick Fixes: CodePush for rapid bug fixes

Results

The unified React Native app delivered significant improvements:

• 100K+ downloads across both platforms
• 50% faster feature development
• Single codebase to maintain
• Consistent UX across platforms
• 4.5+ star rating on app stores
• OTA updates for instant bug fixes

Technologies Used

• Framework: React Native, TypeScript
• State: Redux Toolkit, RTK Query
• Navigation: React Navigation 6
• UI: React Native Reanimated, Gesture Handler
• Storage: AsyncStorage, Keychain
• Updates: CodePush
• Analytics: Firebase Analytics, Crashlytics