The hiring process of React Native developers involves different parts, each of them requiring essential time and effort. To make the process less stressful, we suggest you follow these five steps:
- Prepare the specifications.
- Outline the job requirements.
- Create a shortlist of candidates.
- Arrange the job interviews.
- Qualify the candidates.
In this post, we will uncover the first three parts of the hiring process:
- How to create the specification for a React Native project.
- How to complete the job overview.
- How to shortlist the candidates.
By the end of the reading, you will get prepared to reach out to potential candidates. In the second part of the article, we will observe the job interview process and qualifying the candidates.
1. How to create the specification for a React Native project
Finding the best candidate requires good preparation. Your first goal will be to outline the project requirements.
Be as specific as you can. Detailed documentation draws the attention of professional developers and encourages them to apply.
What is needed to complete the project specifications:
- Explain the user flows.
- Create graphic layouts.
- Outline technical requirements.
Explain the user flows
User flows help to convey the core idea of the app. Based on that, the potential developer will evaluate the scope and define the biggest challenges in upcoming work.
After finishing this part, you will get the confidence to explain your product specifics to potential contractors. Except for that, you will check if your product app is ready for the market. These questions will help you to revise your current progress:
- Is your application flow simple and easy to use?
- Does your app help users achieve their primary goals?
- What are the most priority features in your app?
- How do you encourage users to purchase the extra services?
- What advantages do you offer to your users?
Writing the user flows is a crucial part of the product build. Here is the list of suggested questions that will help you develop the user flow overview:
- What are user types (customers, suppliers, supervisors) presented in my application?
- What abilities does each user category have?
- What information will users request after their registration?
- Do I need users to confirm their registration via email or SMS?
- How could users view the other user profile?
- How can users communicate with other users?
- What kind of third-party applications would I like to integrate with my app?
- How will the users complete the purchase process in my app?
- How do I want to track the information about new and returned users?
- Do I want to view the billing information (invoices, payments)?
- What types of notifications do I want to display to users?
Example of the user flows overview
Create graphic layouts
Now that you have the end-to-end descriptions of the user flows, your next turn will be to translate them to the graphic UI design.
Benefits of the graphic UI design:
- It helps reflect the graphic animations and business logic.
- It makes it possible to find out the challenges and risks.
- It enables making a realistic timeline and cost evaluation.
Most popular tools for the graphic UI design:
- Figma;
- Sketch;
- Adobe XD.
In general, mobile applications contain a different number of screens. There could be 20+ screens if it comes to developing a small social media app or 200+ screens if we talk about business-class mobile applications.
So, depending on your case and engagement, you could choose your way: master any of the UI design tools, create the screens by yourself or outsource this work to the UI/UX designer.
Outline technical requirements
React Native developers are creating the mobile UI. Their responsibility is to wire it up with the back-end. To handle this integration, developers need to obtain the documentation on the API first. It should involve the following parts:
- Resource descriptions.
- Endpoints and methods.
- Parameters.
- Request samples.
- Response examples.
If you are a non-technical specialist, you could ask for the help of a consultant specializing in developing the API specification.
There are a few ways to find an eligible consultant:
- Ask a question on Quora or Stack Overflow.
- Invite an expert via Upwork or Toptal.
- Book a call with a consultant at Clarity.fm.
- Find a consultancy through Clutch, Upwork, YouTeam and book a call with them.
Consultants usually possess any of these positions:
- Business analysts at a software development agency (most of the agencies produce the end-to-end documentation for the new projects).
- Software engineers with the back-end background (there could be either the back-end or full-stack engineers).
- Technical writers who specialize in back-end documentation.
The specification on the back-end will help your team keep organized and deliver the project without unexpected distractions.
2. How to complete the job overview
We have reached the middle point of our road. From now, every new step will be easier to take.
Your current task is to create the job overview. Generally, it includes the technical requirements along with preferences regarding the skills of the candidate.
You could use the following template of the job overview for React Native developers.
Job requirements template
Project overview:
- Tell about your company and the core idea of the project.
- Provide a brief summary of the user roles.
Main technical requirements:
- Mention the technological stack of your project.
- Preferences on UI design (graphic rendering, specific features).
- Third-party integrations, like map and geo-location services, mail and SMS integrations, payment gateways.
- Location.
- Language.
Expectations:
- Project duration.
- Work engagement (full-time or part-time).
- Time zone preference.
- Working environment (management system and approaches).
- Budget expectations.
Skills requirements:
- Development experience.
- Special technical skills.
- Projects on GitHub.
- Portfolio works.
- Education.
References to the materials:
- User flows overview.
- Graphic UI design.
- Back-end specification.
Sample of the job overview
Let's bring more practice to our process. At present, many companies are moving forward with creating ride-sharing services. Imagine for a moment that you represent the management of the transportation company.
Our current task is to hire a React Native developer who will accomplish the front-end for the upcoming mobile service app. The first step will be to write down the announcement for a job post.
Project overview:
The logistics company Rideshare Services Int. is looking to extend its customer service and hopes to create a cross-platforming mobile application. The app is aimed to help car drivers to make an additional income to minimize their transportation expenses.
User roles:
There are three main user categories within the app: driver, passenger, admin.
- Drivers indicate their daily route on the map and set a schedule. Based on that, the mobile app should find the passenger looking to request the ride at a specified time.
- Passengers can offer an individual price for the desired service. Drivers could take on the opportunity if they agree on the proposed cost.
- The admin user should be able to view the general statistics and moderate users.
Technological stack:
The mobile UI code needs to be created with React Native. The app developer is free of choice regarding the state management service - Redux or Mobx will work fine.
The specification is ready and could be shared with the eligible candidate. The back-end is built with Node.js (Nest.js). The database is based on Postgresql. Preferred cloud service: Amazon Web Services.
Preferences on UI design:
The screen designs are already completed with Figma. There are 90 screens ready for implementation. The requirements for the graphic animation are minimal since the project is at the early MVP stage.
Skills requirements:
- previous experience of utilizing React-hook-forms in the project is much preferred;
- experience of work with Swift and Android Studio (to be able to work with native modules on iOS and Android platforms);
- knowledge of TypeScript is must have;
- experience of work with Google Map API;
- experience with Twilio and Stripe will be a big advantage.
Location and language:
Our project will be based only in the UK for the initial stage, so that we would require only one language there. In the future, we are hoping to extend it with Norwegian and Dutch versions.
We are working in the UK time zone, but we are flexible as for your time preferences. We hope to have 3-4 hours overlap within our time zones, preferably in the morning hours.
Duration of the project:
Based on our preliminary estimation, the project would take 3,5 - 4 months to finish. Since the deadline is tight, you need to work full-time (40 hours per week).
Working environment:
- We use GitHub for the code repository.
- All communications are run through Slack and Zoom.
- We manage the tasks with Jira.
Budget expectations:
Our budget capacity varies within USD 30-35K (based on our assumptions regarding the timeline).
Required skills:
- Master's or bachelor's degree in computer sciences.
- 3+ years of experience with React Native, both iOS and Android.
- You have a good understanding of Agile and Scrum principles.
Project materials:
Besides the graphic UI layouts and specifications on the back-end, we are willing to share the user flows overview. We will send you the documentation after reviewing your application form.
Notes:
- Please, send us your resume once you are interested in taking this job position. In your answer, describe your skills regarding the project requirements.
- Share the links to the mobile apps you have done before and specify your team's role while working on the project.
Now we are ready to publish the job overview. You will receive a significant number of replies after placing the job announcement on those social platforms:
- Hub Staff Talent;
- Topdevelopers.co;
- LinkedIn;
- Youteam;
- Upwork;
- Toptal.
Except for the mentioned, there are some global social websites, which provide job search opportunities to their community. So, you could also use their service to hire the React Native developers:
- Stack Overflow;
- AngelList;
- GitHub;
- Dev.to.
Each platform will make a difference in your outreach process. For example, Upwork ensures you will get over 100 proposals on the first day. To prove our expectations, we simulated the hiring process on that platform.
We published the same job overview and requirements as we mentioned in our sample. Now you could check the outcomes of this experiment. The activity was so high that we obtained over 40 proposals in the first two hours.
Break down your job requirements so that the applicants will grasp your project idea and respond fast
So, it makes sense to iterate your publications and post your requirements on the web resources one by one.
3. How to shortlist the candidates
As you can see, you will get dozens of applications straight after publishing your detailed job overview.
Now you need to pre-qualify the candidates based on the following criteria:
- Did the applicant specify the works related to your industry area?
- Did the applicant describe their skills and experience based on your mentioned requirements?
- Could the applicant work full-time on your project?
- Did the candidate describe their role in the previous projects?
- Did the applicant provide the link to their profile at GitHub?
- Do they have some recommendations from past clients or employers?
You could use the applicant screening rubric. It will help you make the right decision based on the received proposals.
Download Applicant Screening Template
Create a list of the first 20 candidates matching your expectations. Respond to them via email or the job search platform, appreciating their time and interest. Propose them to book a meeting with you, sending them a link over Calendly or any other booking service that you normally use. Along with that, share your specifications with the candidates, so they could prepare for a job interview.
In our next post, we will provide you with further details on the hiring process of the React Native engineer. The essential part of it will be devoted to the questions you could ask your candidate during the job interview.
Thanks for reading, and good luck with your preparation!
React Native Interview Questions - A Guide For The Founder (Part II)
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.
- Tell me about the most significant React Native application that you did in the past?
- What challenges did you encounter in the course of the development?
- What lessons did you learn while accomplishing the project?
- How would you manage a complex task that you never faced before?
- How do you meet the deadlines at work? What is your best suggestion at this point?
- What is the best advice to overcome a stressful situation that happens at work?
- How do you proceed with your work if you are missing some materials?
- Are you a solo or a team player?
- What do you think of the time and material approach? Did you have a chance to apply it in your previous work?
- 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.
- How do you conceive the product features? What would you like to propose to make them better?
- What is the most challenging part of the project? How would you manage that?
- What extra services or third-party solutions would we need to accomplish this service?
- What React Native libraries would you suggest for building this app? Have you worked with them before?
- What priorities would you like to set in the development process?
- Do you have any questions regarding the graphic designs? Are they would be enough for you to start?
- What do you think of the design animation? Do you consider it to be complex or not?
- What approach would you follow to make the UI rendering faster?
- Do you need any specifications or screens to complete the timeframe estimation?
- 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.
Vladimir Novik
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.
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.