THIS PAGE IS PART OF OUR COMPLETE REACT NATIVE HIRING GUIDE. WE RECOMMEND STARTING THERE

React Native Developer Technical Interview Questions

How can you keep animations from being blocked on the JavaScript thread? Describe how this works and explain some of the limitations.

- Mike Lamb (intermediate)

ANSWER

  1. By adding useNativeDriver: true to the animation options
  2. It works by passing the animation to the native thread where it will not be blocked by the JavaScript thread
  3. This will work on non-layout properties like opacity and transform, but will not work on things like flex, or position

Explain the re-architecture of React Native and the importance of the changes?

- Miguel Espinoza (hard)

ANSWER

  1. Facebook is working internally to change the way Javascript interfaces with Native Modules. This is an overhaul of the UI-Layer, it’s codenamed “Fabric”
  2. TurboModules will be the next iteration of NativeModules. Importantly this will ensure native modules are loaded eagerly instead of all at once avoiding startup overhead
  3. Also, TurboModules can be called synchronously avoiding asynchronous calls across the RN bridge
  4. Along with this change the core of React Native is going lean. Which means many libraries such as Async Storage, Geolocation and Device information are moving to separate repositories

What is a Fragment and why would you use one?

- Adam Burdette (intermediate)

ANSWER

  1. A fragment is a way of grouping JSX elements together without adding to the render tree by wrapping them in an additional view.
  2. A good example of where to use a fragment is in a dedicated component of a screen where no additional container styling is needed.
  3. The benefits of using a fragment is less complex styling in some cases and less complex rendering.

What does StyleSheet.create do?

- Ricardo Berdejo (easy)

ANSWER

  1. StyleSheet.create method ensures that values are immutable and opaque, they are also only created once.

What are hooks and when would you use them?

- Adam Burdette (hard)

ANSWER

  1. Hooks is a way to use stateful logic, effects, etc outside of a class.
    A hook is a useful way to share stateful logic across multiple functional components, examples include: A modal’s open/closed state, Form state, and Subscribing to events

What strategy would you use to optimize a large list of items on FlatList?

- Jose Arce (intermediate)

ANSWER

  1. Use PureComponent on renderItem with bind methods
  2. Add keyExtractor property
  3. Add pagination
  4. Define getItemLayout
  5. Define removeClippedSubviews true

Can you provide some ideas on how to prevent memory leaks in your app?

- Jose Arce (intermediate)

ANSWER

  1. Release timers/listeners added in componentDidMount
  2. Handle closure scope

Do you know how can you detect memory leaks on the app?

- Jose Arce (advanced)

ANSWER

  1. Xcode and Android studio provide tools to track the memory used by an app. These tools can be used to test the app on both devices and simulators.

How can you improve the performance (load speed, rendering quality) of images?

- Jose Arce (easy)

ANSWER

  1. Server-side compression
  2. Third-party tools such as Cloudinary
  3. Image caching

Name at least one style property that can increase tappable area around an element

- Dan Seawel (easy)

ANSWER

  1. padding (and also paddingVertical, ...Horizontal, ...Left, ...Right, ...Top, ...Bottom)
  2. minHeight and minWidth
  3. hitSlop
  4. Make Tappleble Areas Larger

Further Resources

RN Developer Job Description TemplateReact Native Coding ChallengeScheduling Email TemplateFinal Interview QuestionsInterview Process OverviewOffer LetterReact Native Screening QuestionsReact Native Developer PersonasNon-technical InterviewCompany Culture and ValuesReact Native Online Hiring TestFullStack Labs Feedback
fsl team

Looking for React Native developers? FullStack can help.

New Apps. Legacy Apps. Team Augmentation & Staffing.

Let's Talk