React Native Expo App Enhancements

Project Overview

KeystoneQS is a React Native (Expo) application used for estimation, quantity surveying, and MEP-related documentation. The app currently requires:

1. Three new screens based on Figma UI
2. Integration of provided APIs for the three MEP screens
3. Fixing an existing iOS UI rendering issue

---

2. Resources Provided

Figma UI Design

Attached link will be shared later

Screens to implement:

MEP 1
MEP 2
MEP 3

Backend APIs

Developer will receive:

API endpoints
Request parameters
Response examples
Authentication (if any)

APIs are ready and tested.

---

3. Technical Requirements

Tech Stack

React Native (Expo)
React Navigation
Axios / Fetch (existing project uses ___)
Functional Components + Hooks
Existing UI Components must be reused

Codebase Requirements

Follow existing folder structure
Follow existing styling approach (e.g., tailwind, stylesheet, theme colors)
Reuse UI components such as:

CustomHeader
FormContainer
ReusableCard
Buttons
Dropdown / Select2
Table / List components (if present)

---

4. Work Scope

---

A. Implement Three New Screens

Create 3 screens exactly as per Figma:

---

MEP 1 Screen

UI Requirements:

Header with title "MEP 1"
Filters / dropdowns (if present in Figma)
List/table/card UI
Summary data components
Proper spacing as per Figma
Responsive layout for both iOS and Android

API Integration:

Call MEP1 API on screen load
Implement loading & error states
Map API response to UI fields
Use try/catch + async/await
Pull-to-refresh (if required)

---

2. MEP 2 Screen

UI Requirements:

Similar layout to MEP 1 but with variations as shown in Figma
Cards, values, labels should match the design exactly

API Requirements:

Integrate MEP2 API
Parse values and display in appropriate components
Use existing card component if applicable
Handle empty states when API return no data

---

3. MEP 3 Screen

UI Requirements:

Multiple data sections
Structured values, icons, or labels depending on Figma layout
Ensure correct typography & spacing

API Integration:

Integrate MEP3 API
Some fields might need conditional rendering
Data mapping must follow the exact UI order from Figma

---

B. Navigation Setup

Add these routes:

```
<Stack.Screen name="MEP1" component={MEP1Screen} />
<Stack.Screen name="MEP2" component={MEP2Screen} />
<Stack.Screen name="MEP3" component={MEP3Screen} />
```

If accessed via dashboard → add navigation from the dashboard buttons.

---

C. iOS Bug Fix

Problem:
When minimizing the app on iOS and returning after some time:

Some UI components appear blank
Some components stop rendering until screen refresh

Possible root causes (developer must diagnose):

1. AppState handling issue
2. Unmounted components losing state
3. Recoil/Zustand/Redux state reset after AppState change
4. useEffect not re-running when app returns to foreground
5. React Navigation route is focused but component didn’t re-render
6. FlatList with missing keyExtractor or unstable keys
7. Conditional UI rendering based on stale state

Ensure components re-render and do not return `null` or stale values
Fix any conditional rendering issues

The goal: UI should never appear blank after minimizing & reopening on iOS.

---

D. Testing Requirements

Developer must test on:

iOS

iPhone 11 or above (simulator acceptable)
Background/foreground behavior
Scrolling + pagination (if present)
Safe area padding

Android

API calls
Navigation transitions
Back button behavior

Unit Testing

(Not mandatory but appreciated)
Basic validation of API mapping.

---

E. Deliverables

Developer must provide:

Fully implemented screens

MEP1Screen.js
MEP2Screen.js
MEP3Screen.js


3. Final build test

Expo development build or QR preview

4. Clean code with comments

Proper naming
No unused imports
No console logs