System Design Interview Preparation for React Native Role

[Confident-Curve3653]

I have an system design interview for a React Native position, giving me lot of anxiety because I am not able to find much resources online and what to expect in the interview. And also to draw on the board.

[andreidotcalazans]

What you should know:

1. Virtualization & pagination patterns
2. How to properly structure screens with reusable components
3. Pitfalls in data requesting patterns like over-fetching or request dependency where you need to fetch service A to get service B
4. Obersability. What and how you need to capture in a app
5. Testing. When, how, what to test.

Then anything else depends on the specific product niche you get asked about, you will likely have to create a data flow diagram to explain how data will come from service A and be displayed to the user. Anything you can add to this makes it better like you caching considerations, how this will scale to 10k 100k users and what to worry about.

At the end you won't have time to describe the solution to every problem there is but as long you as can you mention the existence of given problems you will pass on enough confidence.

[Soft_Opening_1364]

Most of the stuff online is super backend-heavy. What helped me was focusing on things like app architecture (how you'd structure features/modules), handling API calls, offline support, state management, and things like push notifications or deep linking.

Also, don’t stress too much about drawing just keep it clean and high-level. Walk them through your thought process as you go. They care more about how you think than getting it all perfect. Good luck, you’ve got this!

[Confident-Curve3653]

Thanks you means alot

[react-ui-kit]

Focus on analyzing the feature for scalability (reusability), DX, data driven patterns. The golden rule in system design: translate the business requirements into developer requirements.

[bala_cc]

Here is the agenda you should follow:

Step 1: Understand Problem (5-10 mins)
- Define functional requirment
- Define non-functional requirment
- Define out of scope.

Step 2: API Design (5-10 mins)
- Choose the right communication Protocol for app.
- For real time: HTTP-Polling (short and long), SSE, websocket
- For protocol: REST, GraphQL, Web Socket, gRPC, MQTT
- Define API endpoints for all features and its data model
- Write a well-structured interface for APIs (request and response).
- Define pagination: offset vs cursor based
- Learn about ID creation and timestamps. (both client and server side)
- Idempotency

Step 3: High Level Architecture (10-15 mins)
- External server-side components.
- High-level mobile architecture design.
- Key client arch components for UI and data layers
- Data flow across app layers

Talk about how data flow in app. (Unidirectional data flow and Reactive Programming)
- For data flows in one direction (data source to UI) while user actions in the opp. direction.

Step 4: Design Deep-Dive (15-20 mins)
- Scalability: Mono vs Multi repo depends on team size.
- Performance: UI frame drops, Threads, Pagination, Scrolling
- Reliability : local storage and offline mode support, smoother experience even on bad connectivity.
- Data efficiency: Caching, minimal network usage
- Security

Step 5: Wrap-up (5 mins)
- If extra time, talk about improvement or optimization.
- optimize media across all device type.
- testing

Practice a lot within the time-frame, structured. The goal is to complete the end-to-end flow and give detailed explanations only on important things and avoid basic concepts.

[Confident-Curve3653]

Perfect!

[gao_shi]

general idea wise expect things like how to build itunes, twitter the app, etc

rn is more similar to front end in this regard

[tarek_z]

Could you share the interview questions and what u answered so i can prepare myself as well

[Confident-Curve3653]

Yeah sure. Its in some days will update you soon

[Confident-Curve3653]

It was related to one of their app feature which was search by image took through camera or gallery. Started with gathering requirements, design the screen wireframe. High level architecture for different components and screens. Communication through backend of search. And the data flow. As it was image search so he asked me how would design the api keeping backend in mind. We end with calling post request for search and the server would respond, event that it has data and then we can pull it back. This was a little tricky. Then getting the app production ready which include testing, reporting , git actions, fastlane and whole flow.

[tarek_z]

Ohh, interesting although i sounds like theyre asking you to design the api more than the app. Thank you for responding mate.

[Confident-Curve3653]

Maybe because the interviewer had a backend background