React Native Interview Questions — A Guide For The Founder (Part II)

Here’s a complete list of top questions you should ask during interview with React Native developer for your project: general, project-specific, technical.

In the previous part of the article, we observed the process of preparation for the job interview. We paused our journey at the moment of receiving a sufficient amount of proposals and the need to pre-qualify them. To help you figure out this task, we provided you with an applicant screening rubric.

Now that you shortlisted your applicants and invited them to the interview, your next step will be to prepare for the call meetings. The main task for this phase will be setting a list of questions to qualify the proficiency of React Native programmers.

You could check the skills of interviewees due to three categories:

• General: communication and collaboration skills.
• Project-specific: understanding the product requirements.
• Technical: React Native programming skills.

General interview questions

Collaboration and communication are soft skills and directly impact your project strategy and the business itself. So, the main point is to make sure that the candidate will get on the same page with you.

What matters here is to clarify if the prospective candidate follows the best practices in the project delivery and lets you know about the risks upfront.

1. Tell me about the most significant React Native application that you did in the past?
2. What challenges did you encounter in the course of the development?
3. What lessons did you learn while accomplishing the project?
4. How would you manage a complex task that you never faced before?
5. How do you meet the deadlines at work? What is your best suggestion at this point?
6. What is the best advice to overcome a stressful situation that happens at work?
7. How do you proceed with your work if you are missing some materials?
8. Are you a solo or a team player?
9. What do you think of the time and material approach? Did you have a chance to apply it in your previous work?
10. Are you able to join the project soon? What is your current availability?

You could change or add your personal questions to this list. Or even improvise with them, asking ones in the context of your dialogue. When working on these suggestions, we wanted to inspire you rather than restrict you.

Project-specific questions

As far as you have the specification, your next step will be to figure out if the applicant is keen on understanding the project scope. You are well prepared now, so don’t worry about discussing the details with the technical specialist.

1. How do you conceive the product features? What would you like to propose to make them better?
2. What is the most challenging part of the project? How would you manage that?
3. What extra services or third-party solutions would we need to accomplish this service?
4. What React Native libraries would you suggest for building this app? Have you worked with them before?
5. What priorities would you like to set in the development process?
6. Do you have any questions regarding the graphic designs? Are they would be enough for you to start?
7. What do you think of the design animation? Do you consider it to be complex or not?
8. What approach would you follow to make the UI rendering faster?
9. Do you need any specifications or screens to complete the timeframe estimation?
10. How long will it take to accomplish the front-end work?

A programmer who understands the requirements of your product will deliver the expected quality. That’s the key to handling the current discussion.

Technical: React Native programming skills

The following part of the interview is the technical one. To run this session successfully, you could invite a CTO or a development consultant to accompany you. If that is not an option, our guidelines will help you. The below questions are based on the requirements of the middle-level React Native programmer.

Q1: What are the main advantages of React Native?

The most significant advantage of React Native is that it enables building the mobile UI for iOS and Android with the same programming language — JavaScript.

Of course, some specific mobile features require Swift and Java knowledge, but generally, 70–80% of React Native code is reusable in both platforms. What does it mean for the employers? They save their expenses, as there is no need to hire front-end designers specifically for each mobile OS.

The other essential advantage of React Native is that it is friendly to web developers experienced in React. They could use the same JavaScript Syntax Extension (JSX) and components build concept.

Hiring becomes easier, since JavaScript developers are plentiful, and you don’t need to seek out native specialists (Toptal blog).

The transition from React to mobile app development takes less effort. It gives one crucial benefit to the business: if they have in-house React developers, they could construct a mobile app by their means.

Q2: What are the advantages of native apps over cross-platforming apps?

Native apps are created with the same language as the programming environment where they are to run. Such an approach enables passing the rendering methods straight to the host platform and getting the native views immediately.

Cross-platforming apps use the middleware layer to translate and pass the data from one language realm (JavaScript) to another (Objective C or Java). So, it extends the time for data processing and slows down the performance.

Usually, the native applications require fewer third-party libraries to operate with the hardware services. They could communicate straight with inbuilt components to enable the camera, calendar, GPS, etc.

Q3: What is JSX in React Native?

JSX is a syntax extension for the JavaScript language envisioned for composing elements in React. It enables writing the HTML within the JavaScript code. Meanwhile, it has some specifics in React Native. Instead of using the HTML tags <div> and <span> it provides the component <View>, which is responsible for the corresponding options. For the text markup React Native uses the self-named component <Text>.

Even though React Native’s JSX has some differences, it follows the same principle as React: it allows writing the markup language within the main application code. Also, like in React, it translates the JSX to JavaScript using the Babel compiler.

Q4: What is component-driven development?

The component-driven approach allows building the UI with reusable or repeated code patterns. These patterns are called components and contain the information reflecting the UI and logic.

The same as in React, React Native’s components have a specific hierarchy and could be parents, children, and ancestors.

Two types of data have been processed by components: state and props. Props stand for properties. They are immutable data and can be fetched from a parent to a child. It works only in terms of the functional components.

The class components render the mutable or dynamic data only after a certain event happens. This data type is called State.

Besides class and functional components, React Native provides the core components. Their main categories are: <View>, <Text>, <Image>, <TextInput>, <ScrollView>, <ListView>, Android-specific and iOS-specific. They are ready-to-use and aimed to speed up the development work.

Q5: What components in React Native are?

React Native is like React, but it uses native components instead of web components as building blocks (React Native docs).

React Native components are built with React. But they are not the web views in a browser. They are the native views on the mobile OS platform.

Q6: What makes components native?

In Android development, you write views in Kotlin or Java; in iOS development, you use Swift or Objective-C. With React Native, you can invoke these views with JavaScript using React components (React Native docs).

Android and iOS provide their APIs to talk with the other language environments. React Native uses a bridge that translates the data to the appropriate format and invokes needed methods via the native host API. In return, the mobile platform renders the native UI code.

Since the React Native components are developed with JavaScript and CSS, they need to be compiled into the native code. This is what the Yoga engine performs: it converts the React components to the native views on the run time.

Q7: Why is JavaScript used in React Native?

JavaScript is an event-driven language, so it helps build dynamic interfaces. While the user interacts with the mobile screens, React Native recognizes every event and responds to it with new data. This data updates the view of the mobile screen.

From the other side, each mobile platform embeds the JavaScript engine. For example, iOS includes the JavaScript Core, which displays the content in the Safari browser. With that help, React Native app executes the code within the JavaScript thread while running the app.

Q8: What are threads in React Native?

React Native application is processing the data within a few separated threads:

• Native (Main) Thread;
• JavaScript Thread;
• Shadow Thread.

Multi-threaded data processing gets more advantages over single-threaded. It prevents performance issues due to distributing the tasks among several parts.

The UI thread is responsible for the native part of the application. It deals with the native views and checks for the events on the UI. Also, the UI thread contains the screen designs of the application. It fetches the data on layouts parameters to the native UI Manager, which updates the design on the screen.

The JavaScript thread is in charge of the logic of the application. It combines the JavaScript code written by React Native developers. The code within this thread is bundled (Virtual Machine at Android) or run by the JavaScriptCore (at iOS). As you noticed, React Native uses the existing compilers of the mobile platforms, which is efficient in terms of the app’s size.

Since React Native implements another type of layout tree, it needs to get translated to the native UI tree. The Shadow thread constructs a layout tree understandable by the host operating system. It is possible due to the Yoga engine.

The communication between the threads is available due to the React Native bridge.

Q9: What is the React Native Bridge?

The essential advantage of React Native is that it invokes the native UI views on the mobile platform. Due to the bridge technology, it becomes possible to connect the application logic with the UIView manager on the native side.

React Native bridge converts the data to the JSON format. If a user did an action on the mobile screen, the UI thread reports to the main JavaScript thread. It batches the data to a JSON message and sends it over to the JS thread.

The Bridge is the layer that connects JavaScript and Native modules and is basically a transport layer that transports asynchronous serialized batched response messages from JavaScript to Native modules.

Vladimir Novik, Software Architect, Independent Consultant, Entrepreneur, Author, Worldwide speaker, Mentor

Thus, the data between the native and react native sides are processed asynchronously. This way seems to be slower, but it is preventing message blocking.

With that said, React Native’s architecture is suited to render 60 frames per second, which is quite acceptable for the user’s perception.

Q10: What is React Native boilerplate?

React Native boilerplate is a set of tools needed to initiate mobile app development. It involves reusable code templates and libraries for user profile creation, authentication via social media, background themes.

The usage of boilerplate leverages the development speed and helps the team follow the unified standards. For example, React Native boilerplate helps development teams implement TypeScript in their processes.

Besides that, React Native boilerplate helps to apply new services and features to the project once they are needed: multi-language support, react hooks, automated UI tests and regular check-ups on the library updates.

References to materials:

1. How React Native constructs app layouts (and how Fabric is about to change it).
2. Understanding the React Native bridge concept.
3. React Native: Understanding Threads.
4. How React Native boilerplate helps us build mobile apps faster [Starter Kit for 2021].