Welcome to the React Native Technical Assessment. This repository is designed to test your ability to optimize a React Native application for performance, user experience, and stability.
-
Install Dependencies Run the setup script to install all necessary packages.
npm run setup # OR npm install && npx expo install @shopify/flash-list expo-image
-
Start the Server
npm start
This will start the Metro Bundler. You can press
wto run in the web browser, or use the Expo Go app on your physical device.
You will be working on a simple "Feed" application that currently suffers from several UX and performance issues.
Your goal is to complete 4 Key Optimization Tasks. Detailed instructions for each task can be found in the docs/ folder.
| Order | Task | Focus | Description |
|---|---|---|---|
| 1 | Layout Stability | UX | Prevent layout shifts using Skeletons. |
| 2 | Virtualized List Performance | Performance | Maintain 60 FPS using FlashList. |
| 3 | Asset Optimization | Performance | Progressive image loading with BlurHash. |
| 4 | Deterministic Data Fetching | Stability | Implement cursor-based infinite scrolling. |
src/api/: Contains a standard mock API simulating network delay.src/components/: Contains the UI components (Feed.js,FeedItem.js).docs/: Instructions for each task.
- You are allowed to use documentation (React Native, Expo, libraries).
- Focus on code quality and best practices.
- Do not modify the
mockApi.jslogic (unless for debugging), treat it as a fixed backend service. - Have fun!
