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