Implementation Summary & Technical Report

The project demonstrates Native integration back and forth between iOS and React Native

1. RNPriceListViewController presents React Native module name CDC_Interview
2. Native API calling via Turbo Module in RNNativeInterviewModule

Screenshots

Commit messages

Since this project doesn't point to any remote repo so I'll leave the commit messages here to demonstrate my workflow for the solution:

• chore: clean placeholder txt extensions, initialize project & install packages
• feat(native): create RNNativeInterviewModule swift file and link to .mm file
• feat(native): implement fetchPriceList using USDPriceUseCase & AllPriceUseCase JSON loading logic
• feat(native): implement RNPriceListViewController hosting React native root view
• feat(js): observe change from Support EUR and refetch corresponding data
• feat(js): implement useFetchPriceList hook with normalization
• feat(js): optimize Crypto list performance with best practices
• ui: add PriceList component with loading/error/empty states
• ...

1. Implementation Details

1.1 Feature Flag Driven Data Source

• Implemented Support EUR feature flag wiring between native iOS (FeatureFlagProvider using RxSwift BehaviorRelay) and React Native through RNNativeInterviewEventsEmitterModule.
• When flag OFF: native use case USDPriceUseCase returns JSON subset (USD only) -> JS normalizes to unified CryptoCurrency model.
• When flag ON: native AllPriceUseCase returns extended list including EUR; JS appends EUR price after USD when available.
• Event: Native emits onFeatureFlagDataChanged -> JS hook (useFetchPriceList via InterviewEventsEmitter) triggers refetch & state reconciliation.

1.2 Turbo Module Strategy

• NativeInterviewModule defined in specs/NativeInterviewModule.ts is a Turbo Module implementation.
• Promise method fetchPriceList() loads appropriate bundled JSON (usdPrices.json or allPrices.json) depending on feature flag state at invocation time.
• Data normalization on both native and JS sides handle return the Object with fields we needed.

1.3 React Native Embedding (iOS Host Controller)

• RNPriceListViewController hosts the React component inside a native navigation stack using RCTReactNativeFactory (Fabric enabled). This ensures a single RN runtime & renderer instance.
• AppDelegate sets moduleName and custom dependency provider wiring without eagerly instantiating multiple bridges.

1.4 UI Component (PriceList.tsx)

• Displays list of crypto entries with conditional EUR suffix.
• Added tag chips (e.g. deposit / withdrawal) rendered inline with name for better scannability.
• Loading, error, empty states implemented for robust UX.
• Pull to refresh ties to native fetch via the module.

1.5 Performance & Stability Enhancements

• FlatList optimizations: constant item height (70), getItemLayout, removeClippedSubviews, tuned initialNumToRender, windowSize, maxToRenderPerBatch, memoized row component (PriceRow) + stable callbacks (useCallback).
• Avoids unnecessary renders: extracted separator & empty component; removed transient state copies.
• Feature flag listener uses a single subscription and cleans up properly to avoid memory leaks.

2. Performance Considerations

Concern	Action	Benefit
List re-renders	memo(PriceRow), stable callbacks	Reduced JS work per state change
Layout measurement cost	getItemLayout with fixed item + separator height	Faster scroll start & less layout thrash
Memory / mounting pressure	Windowing props (initialNumToRender, windowSize, batching)	Lower peak memory & smoother scroll
Bridge overhead	Single RN runtime via factory	Fewer native/JS context creations
Conditional EUR formatting	Inline numeric formatting with early exits	Minimal overhead

3. Assumptions Made

• None

4. Future Improvements

Technical

• Integrate TypeScript codegen types directly from schema to ensure strict alignment.
• Introduce unit tests (Jest) for hook normalization & price formatting; snapshot tests for list row.
• Add E2E tests (Detox) toggling feature flag to validate live update.
• Migrate formatting to native (Swift NumberFormatter) with locale awareness & pass formatted strings.
• Implement search / filtering with debounced input + useTransition (if RN concurrent features used).

Performance

• Pre-size underlying arrays & diff via stable keys to later adopt FlashList (if allowed) for large datasets.
• Offload heavy parsing to background thread in native (if JSON size grows) and pass typed objects via JSI.

5. Developer Workflow Artifacts

• Clean separation between native data access, flag propagation, and JS presentation.
• Single responsibility modules: hook vs UI list vs native use cases.
• Clear fallback & document as code comments to accelerate debugging during interview review.

6. How to Verify

1. Unzip project and install dependencies:

   yarn install
   cd ios/CDC_Interview && pod install

2. Run the project:

   yarn ios

3. Launch app; observe USD prices only initially (flag off).
4. Navigate to Settings -> toggle Support EUR.
5. Return (or observe live) list now shows USD: X EUR: Y where available.
6. Pull to refresh to confirm manual refetch path.

7. Additional Supplements

Sample Normalized Item Shape

interface CryptoCurrency {
  id: number;
  name: string;
  usd: number;      // always present
  eur?: number;     // present only if flag ON and value exists
  tags?: string[];  // optional meta
}

Reduce API response time simulation to 1s

DispatchQueue.global()
                .asyncAfter(deadline: .now() + 1)