Five suggestions for React Native code test assignments

Interviewing and hiring developers is a challenging process, and there is more to it than simply showing up and randomly asking candidates questions. The hiring of React Native developers encompasses a perfect blend of interview stages which includes technical and soft skills testing, as well as checking whether a candidate would fit well into your company’s dynamic.

Whether you’re a CEO, CTO, HR professional, hiring manager, or recruiter, we believe the following coding test suggestions will benefit you when interviewing and hiring React Native developers.

Five suggestions for React Native code test assignments

For the listed coding suggestions, we had an informative talk with Jasmin Fajkic, a software engineer and mobile tech lead with senior-level experience in React Native. From his point of view, the following five suggestions are sufficient to test the core skills of a potential new React Native developer for your team.

Movie list app with TMDB API

For this task, the candidate should create a movie list app that fetches data directly from the TMDB API. It will display many movies with a ‘load more’ button and search functionality so that the users can view more movie details if needed.

• The benefits and relevance of this task

What do you assess with this task?

• Real-world API integration

This way, the candidate will showcase their experience integrating with a real-world API (such as the Movie Database or TMDB). Also, you will test their ability to properly fetch data from external sources to populate the app later. With this, the candidate also demonstrates their ability to work with APIs and understand how to best handle data from an external source in a React Native app.

• UI/UX implementation

The candidate will have the chance to create a visually gorgeous UI that will display a list of many movies (with “load more” and search functionality). The candidate here shows their designing skills too, and how they they can implement user-friendly, responsive UI in React Native.

• State management

Here the candidate needs to manage the state of the app, such as the handling of loading and error states, or managing search functionality, to storing details about the movies. The candidate here shows their skills in state management with React Native and how they handle asynchronous data fetching, app-level state management, and UI updating.

• Performance optimization

The candidate optimizes the app's performance during fetching and displaying large data amounts from the TMDB API. They must implement efficient data loading techniques, like pagination (or lazy loading), to ensure smooth scrolling and fast load time. This also shows their ability to optimize the performance of the React Native app and achieve an excellent user experience.

• Testing skills

With this task, the candidate shows their skill in testing by writing unit tests, or integration tests, for the movie list app. It shows the candidate’s skills in writing comprehensive tests for React Native components, functions, or services that ensure an app's stability, reliability, and functionality.

Login / sign up form with navigation

For this, the candidate needs to create a login/sign-up form that will include proper keyboard handling and will implement navigation between screens. Also, with this task, they will demonstrate how they make protected routes. They should be able to simulate authentication without using any actual API.

• The benefits and relevance of this task

What do you assess with this task?

• Keyboard handling

The candidate should show their ability to implement proper keyboard handling techniques (such as keyboard visibility management, handling keyboard events, and adjusting UI layout). They should also show how they create a flawless UX by ensuring the UI is responsive and functional, even when the keyboard is visible.

• Protected routes

Here they will show how they implement protected routes, such as restricting access to specific screens. Features can also be limited to certain screens based on their authentication status. With this, the candidate shows how well they understand app security, user authentication, and authorization mechanisms in the React Native app.

• Navigation implementation

The candidate will implement navigation between screens, for example, from the login screen to another sign-up screen or vice versa. With this, they show how they work with libraries in React Native (such as React Navigation or React Native Navigation) and how they manage different screens for passing data between them.

• UI/UX implementation

Here they create a visually pleasing, user-friendly login/sign-up form, which must include proper error handling, feedback to users, and input validation. The candidate here shows how well they design and implement a sophisticated, polished UI/UX in React Native app.

• Mock authentication

Here the candidate simulates authentication but doesn’t use any API. Instead, they focus more on the logic and implementation of the form (login/sign up) without being concerned with external dependencies. With this, they show how they code and how creative they get when implementing authentication logic, UI feedback, and error handling – with no external services help.

Codebase organization with hooks and context

The candidate must organize a codebase using React Hooks and context in this task. With this, they will implement a stable app architecture and show how they structure folders and use hooks for state management.

• The benefits and relevance of this task

What do you assess with this task?

• Correct code organization

Here the candidate will demonstrate how they use best practices to organize a codebase (some best practices might include separation of concerns, proper folder structure, and modularization). Here, the candidate structures a React Native app, making it scalable, maintainable, and simple to understand.

• Stable app architecture

Let them show how well they understand architectural patterns (such as Flux, MVC, Redux, etc.). They should also implement scalable, stable app architecture using context and hooks. You’ll see how they implement a robust architecture (and how they design it) for handling complex state management requirements. This ensures the performance and stability of the app.

• Good use of React hooks and context

The candidate here will show you how well they work with React hooks (useState, useContext, useEffect) for state management and implementing context for global state management. You’ll see how well they understand the practices in React development and how well they can write clean code with hooks and context.

• In-depth understanding of React concepts

Here you’ll test their understanding of React concepts (component lifecycle, props, state management, context). This is essential for organizing the codebase and implementing hooks and context for state management. You’ll see their expertise with React generally and how well they utilize advanced concepts in real-world applications.

• Best practices in code quality

You need to check how well they follow all best practices for code quality. Their code must be clean, maintainable, and with meaningful variables. It should also show proper function names, comments, documentation and follow coding standards.

You’ll see if the candidate is attentive to detail, shows professionalism, and commits well to writing high-quality code - all of this is important for producing React Native apps that are production-ready.

Firebase integration with Push notifications

For this task, the candidate should implement Firebase in a React Native project. They must include well-set-up push notifications using a library (for example, a library such as react-native-firebase). Also, they need to show they know how to integrate analytics and crash reporting with the help of Firebase.

• The benefits and relevance of this task

What do you assess with this task?

• Knowledge and expertise with push notifications

You should test their knowledge on working with push notifications. Here, pay attention to the push notification functionality – they should use a library like react-native-firebase.

You will see how well they work with real-time notifications and how they handle push notifications to make the React Native app as good as possible. This is crucial for engaging with the app users and always providing them with app updates on time.

• Knowledge of Firebase integration

See how well the candidate integrates the Firebase services into the React Native app. They should set up the Firebase project, configure the Firebase SDK, and implement the push notifications, crash reporting, analytics, etc. From this, you’ll see whether theymaster the Firebase, which is undeniably a powerful backend-as-service platform for mobile app development.

• Practical experience with third-party libraries

Try to see if the candidate works well with the react-native-firebase or generally with the third-party libraries because that is crucial. They must implement the Firebase as perfectly as possible and research, evaluate, and flawlessly use the mentioned libraries in the real-world app. This shows you how well they, as developers, leverage existing solutions to save time and effort.

• Analytics and crash reporting integration

At this point, they must show that they integrate the Firebase analytics perfectly and the crash reporting to the app. They should showcase how well they collect and analyze the user data for insights, and you’ll see how their method affects the performance and stability of the app. Also, you’ll notice if the candidate handles crashes and errors well and if they use the crash reporting services properly. All of this is crucial to deliver a reliable, high-quality app.

• Good understanding of the backend-as-a-service (BaaS) concept

They should demonstrate how well they understand BaaS as a concept by working with Firebase (a popular BaaS platform). Here you’ll see if they understand how to work with cloud-based services or how they handle data storage and retrieval.

Also, you’ll see how they implement real-time updates and if they manage the app’s functionalities well without the need to build and maintain custom backend infrastructure (otherwise, a key concept in modern app development).

Travel planning app

Here, the candidate will create a travel planning app that allows users to organize their trips - searching flights and hotels, saving travel preferences, and creating and managing their trips. The app should have features like displaying the flights and hotel search results. It should allow users to save and view trip drafts and implement offline mode functionality.

The candidate should show how well they understand state management, data persistence, and error handling. They should get bonus points if the app includes the following features: real-time flight tracking, integration with travel APIs, and showing a visually beautiful user interface.

• The benefits and relevance of this task

What do you assess with this task?

• Real-world application

The travel app needs practical solutions such as accommodation and flight search, saving preferences, trip management, offline mode, error handling, and API integration. During the test, you will see how well they can build a complex app with many features that will mimic all requirements of a real-world travel app.

• Error handling and offline mode

They should be able to handle network errors and API failures well and provide users with a seamless offline experience. These aspects of error handling and offline mode are crucial to test for a mobile app because they ensure the app handles unexpected scenarios and provides a smooth user experience.

• State management and data persistence

They should show how well they understand application state management, asynchronous data retrieval handling, updates, and persisting data locally on the device when using the React Native app. This is crucial to building a scalable, high-performance mobile app that successfully handles data changes and offline scenarios.

• Integration with third-party APIs

Here, the candidate needs to integrate with travel APIs for fetching the hotel and flight data and implement features like tracking for real-time flights. You will see how well they work with third-party APIs, how they handle the API responses, and how they implement data retrieval and updates. This lets you understand how well the candidate integrates external services for a rich app experience.

• User interface and visual appeal

Give the candidate bonus points if the UI is gorgeous and gives a delightful user experience. See how nicely the candidate creates UI components, how they implement smooth animations and transitions, and how they design a user-friendly interface that has to be easy to use and intuitive. The beautiful UI is essential for user engagement and satisfaction, all thanks to the candidate’s design skills and their attention to detail.

The dos, don’ts, and practices for coding test assignments

Once you have the coding tasks ready, most of your job is done, or at least the most important things are taken care of. But it doesn’t hurt to remember some best practices in coding task assignments and the things to avoid doing.

The dos

• Assign relevant tasks

The coding assignments must be relevant to React Native. Assigning an unrelated coding task for this skill won't make sense.

“The code assignment must be relevant to the job role and the responsibilities. Assignments that don’t directly align with the job role will lead to inaccurate assessment of a candidate’s ability to perform.”

Jasmin Fajkic

• Solve real-world problems

The whole point of the coding tasks should be a final creation that would solve real-world problems for users and add to their daily life practicality. These can also be some challenges you have faced in your line of business.

• Consider pair programming

This is a good idea if you want to be more involved in the overall reviewing and while the developer works on the task too. With every line of code a developer makes, you’ll see it too, and you can clarify what’s going on with each line of code.

• Apply the same rules and standards for every candidate

Applying the same rules and standards to all candidates with the same coding assignments would be fair and expected.

For example, have the coding assignments standardized, and the same for all those applying for the React Native developer position. It wouldn’t be ok or acceptable to give easy coding tasks to one and complex tasks to another. And don’t forget that the timeframe for completion should also be the same for every candidate.

The don’ts

• Complex requirements

Avoid assigning tasks that are too difficult because they won’t be validly representative of the actual work a candidate will be doing. This leads to frustration and confusion for the candidate, and they may not showcase their abilities in the best way.

• Lack of clear instructions

When candidates start their tasks, they need to know what they’re doing and not be confused.

“Ensure the instructions are clear, concise, and easy to understand. Ambiguous instructions will confuse the candidates or cause misinterpretation. Clearly outline the assignment's goals, requirements, and expectations, so a candidate knows exactly what is expected of them.”

• Emphasis on memorization

“A candidate shouldn’t focus on memorizing details or syntax because this may not accurately reflect their problem-solving or critical thinking skills. Focus on tasks that assess the candidate’s ability to grasp and apply fundamental concepts, principles, and best practices in React Native development.”

• Unrealistic time constraints

Set realistic timeframes for finishing the coding tasks. Avoid putting too much pressure on the candidate, which will negatively affect their work quality. Consider the complexity of the assignment and provide a reasonable time without rushing them or making them feel overwhelmed.

• Lack of flexibility in the tasks

“Avoid tasks with just one correct answer, solution, or approach. React Native often involves multiple valid solutions and approaches, and you should assess the candidate’s ability to brainstorm for solutions with their critical thinking, problem-solving, and flexibility.“

• Insufficient feedback or evaluation criteria

Don’t provide insufficient feedback or vague criteria for the code task. Provide clear evaluation criteria and outline what you will assess from their solution and how you’ll evaluate it. This way, candidates will understand how you’ll review their work, and they’ll be more than happy to receive your clear feedback.

Importance of coding test assignments when hiring developers

Two important aspects to cover when hiring a great developer quickly are ticking off a well-written developer job ad posting and creating a detailed and relevant coding assignment. If you tick off these two at first, your developer search will surely be successful.

During the recruitment and hiring of developers, the core aspect in the middle of it all is the coding, i.e., how well a candidate does on the practical side of things. These technical coding tasks are essential to evaluate a prospective team member's skills because, in development and IT, theory doesn’t do much on its own.

With coding test assignments, candidates can show how much they know and back up their theory answers with expertise. And these coding test assignments are strongly preferred because:

• You quickly get to the best set of skills and expertise – You will need to review many applications, which will generally slow down the outcome of hiring. But, by assigning coding tests, you’ll quickly see which candidate(s) have the best hands-on expertise with the skill. At this point, you will also see how cooperative a candidate is and how they communicate.

• You save time and money – Compared to in-person interviews, in most cases, online coding tests have proven to be more practical, cost-efficient, and save you time. And their perk is that they are done remotely too.

• You conduct in-depth, valid interviews – With coding assignments, you evaluate the way a candidate uses their critical thinking, their organizational skills, their time management, etc. And, you directly get to their expertise without beating around the bush.

• You test their ability to work under healthy pressure – In development, there will be occasions of working under pressure and meeting deadlines. So, it doesn’t hurt to check if a developer works well under pressure, but of course, you’d check this by observing how well they handled the coding task overall.

Why do you need a great React Native developer?

To gain all the benefits of working with React Native, you need a developer that masters it and knows how to work with the ins and outs of this framework. But, if you don’t test a developer thoroughly, you risk hiring the wrong person for the job and losing time and money in the long run.

It’s vital to properly assess the React Native develpers because you need these developers for:

• Reusing code

• Achieving a native look and feel of UI

• Achieving cost-efficiency

• Using third-party plugins

• Focusing on a gorgeous UI

• Utilizing live reload

Conclusion

While there are many coding and practical assignments, our five mentioned above get as close to the assessment goal as possible. If you use these suggestions, you’ll check a candidate’s skills more thoroughly, and save yourself some time while filtering through the React Native developer candidates.