Hire our proven, in-house React Native Developers

Q: Give an outline of the React Native architecture.

High overview:

1. Main (UI) Thread
2. JS Thread
3. Native Modules Thread
4. Bonus: Render Threads (only in Android 5.0 and up)
   

Explanation: 

In the Main thread React Native handles rendering React components to Native views.  Hence the word native in React Native. 

The business logic runs on the JS thread whenever you need to make a call to any native modules it requires a call over the bridge. 

Q: Describe how the React Native bridge works?

This bridge allows you to communicate with native modules that are exported via the @ReactMethod annotation on Android and RCT_EXPORT_METHOD() macro on iOS.  This extends functionality for features that are better done in the native ecosystem.

Bonus or Other Valid Explanations: 

• React Native bundles a Javascript Virtual Machine, JavascriptCore developed by Apple.

In the JS thread javascript code then gets processed through the virtual machine.

• React native initializes a context that initiates the JavascriptCore engine and exports all native modules in order to be consumed by Javascript code.
  

Q: Write a simple animation to scale an element from 1 to 2 using the Animated API.

Something along the lines of the following, but it should have Animated.Something and an Animated.View, and use the correct syntax for transform on the style prop.

-- CODE language-jsx keep-markup --
Animated.timing(this.state.scale {
  toValue: 2,
  duration: 2000
}).start();


<Animated.View style={{transform: [
  { scale: this.state.scale },
‍
] }}>{ can be anything }</Animated.View>

Q: Using ReactNative’s provided API, write an example of how you would store a key value pair on the device.

Should look something like this:

-- CODE language-jsx keep-markup --
await AsyncStorage.setItem('@MySuperStore:key', 'I like to save it.');

Q: How do you handle Platform specific code in React Native?

• If I’m making a call to a specific android or iOS function I’ll just wrap it with a check
  ‍if (Platform.OS === ‘ios’)

• If the designs will vary between both platforms or if functionality will be complex based on platform you can use Platform-specific extensions.

Example: modal.android.js and modal.ios.js

Q: What techniques or libraries would you use to implement a splash screen in React Native?

Wrong answers are “I don’t or have ever used/implemented splash screens”, not having a splash screen is a bad user experience in most cases 

Libraries: 

• react-native-splash-screen 
• React-native-boot-splash

Techniques:

• Create an .xib file for ios, use the xcode editor or something
• pngs or xml
• On first startup, show a png or screen designed at startup
• Making sure the splash screen doesn’t flash white before showing (using rn-splash screen or another technique)
  

Q: For apps that require an internet connection, what techniques or libraries would you use to handle when a user loses their connection?

Libraries

• @react-native-community/netinfo
  

Techniques

• Add an event listener to check that the user is connected to the internet and display a model or error message when they aren’t connected prevent them from taking actions that require the internet
  

Q: What navigation library do you use and why?

The answer to this question is opinion based, focus on the rationale behind why they use a specific library.

Q: How do you pass props between screens using the navigation library of your choice?

Depends on the library, but some answers might be based around using redux instead

https://reactnavigation.org/docs/params/

For React Navigation, something like this

-- CODE language-jsx keep-markup --
navigation.navigate('Details', {
  itemId: 86,
  otherParam: 'anything you want here',
‍
});

Q: Does a screen remain mounted when navigating to a different screen in React Navigation and similar libraries? What are the implications either way?

For libraries like React Navigation, that model themselves on native navigation, screens remain mounted when navigating. This causes problems with relying on react lifecycle methods like componentWillMount and componentWIllUnMount

https://reactnavigation.org/docs/navigation-lifecycle/

Q: What techniques or libraries would you use to comprehensively test a React Native application for maximal coverage?

• Snapshots: Not a complete answer, snapshots do not test user interaction functions.
• Enzyme: This is a great way to interact with your rendered component.  
  - Follow Up: What are the limitations of using enzyme with React Native?
    - Enzyme is only able to shallow mount component
    - Enzyme requires adaptor libraries based on React versions.
• Spies: Using spies with a rendered component from Enzyme allows us to test interaction functions.
• Integration Testing: Testing Redux connected components with mock state/store.
  

Q: How do you handle phones with notches?

Use SafeAreaView or a library helper like iphone-x-helper

Make sure components like snackbar positions take into account the notch

Q: What steps do you take when debugging an app that is crashing?

Lots of possible answers:

• Check xcode/android studio logs
• Use react native debugger
• Log out variables
• Logcat
• etc 

Q: What module can you use to run tasks after all animations and interactions have finished?

InteractionManager.runAfterInteractions

Q: What techniques or libraries do you use for responsiveness?

Lots of possible answers:

• Get the device size using Device API and create styles based on pixel size
• pixelDensity API
• React-native-responsive
• Other libraries
  

Q: How do you make sure the keyboard does not cover form inputs?

KeyboardAvoidingView or another library around keeping the input above the keyboard

Q: What is wrong with this component?

-- CODE language-jsx keep-markup --
‍<Image source={{uri: 'https://www.fullstacklabs.co/img/components/Logo/logo-light@2x.png'}} />

Images in React Native require a width and height

Q: What techniques might you use to improve the performance of a screen with a lot of elements?

Lots of possible answers, but the main one is using Flatlist and lazily loading elements.