Over-the-air updates (EAS Update) in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the main benefit of using EAS Update in React Native apps?

Choose the best description of the primary advantage of using EAS Update for React Native apps.

A It replaces the need for any app store submission permanently.

B It automatically updates the native code of the app without user intervention.

C It only updates the app when the user manually checks for updates.

D It allows developers to push JavaScript and asset updates directly to users without app store approval.

💡 Hint

Think about how updates can reach users faster than app store releases.

EAS Update lets developers send JavaScript and asset changes directly to users, bypassing the slower app store review process. Native code changes still require app store updates.

❓ ui_behavior

intermediate

What happens in the app UI when a new EAS Update is available and configured to check on app start?

Select the correct behavior of the app UI when an EAS Update is detected at app launch.

A The app crashes because it cannot handle updates at launch.

B The app ignores the update and continues running the old version until manually restarted.

C The app shows a loading screen while downloading the update, then reloads the app automatically.

D The app prompts the user to download the update and waits for confirmation.

💡 Hint

Think about how seamless updates improve user experience.

When configured to check on start, the app downloads the update silently and reloads automatically, showing a loading screen during this process.

❓ lifecycle

advanced

When using EAS Update, which app lifecycle event is best to trigger checking for updates to minimize user disruption?

Choose the lifecycle event where checking for EAS Updates is most appropriate.

A When the app goes to the background.

B Right after the app has fully loaded and is idle.

C Only when the user navigates to the settings screen.

D During the app's cold start before rendering the main UI.

💡 Hint

Consider when the app is least busy and can download updates without interrupting the user.

Checking for updates after the app is fully loaded and idle reduces disruption and avoids delaying app start.

❓ navigation

advanced

How should navigation state be handled when an EAS Update triggers a full app reload?

Select the best practice for preserving user navigation state across an EAS Update reload.

A Save the navigation state before reload and restore it after the update completes.

B Reset navigation to the home screen after every update reload.

C Ignore navigation state; users must start fresh after updates.

D Prevent updates from reloading the app to keep navigation intact.

💡 Hint

Think about user experience continuity during updates.

Saving and restoring navigation state ensures users return to where they left off after an update reload.

🔧 Debug

expert

You deployed an EAS Update but users report the app crashes immediately after update reload. What is the most likely cause?

Identify the root cause of the crash after an EAS Update reload.

A The update included native code changes which require a full app store release.

B The update bundle was corrupted during upload to EAS servers.

C The app did not check for updates on app start.

D The app's JavaScript bundle size exceeded the limit allowed by EAS.

💡 Hint

Remember what EAS Update can and cannot update.

EAS Update cannot update native code. Including native changes in an OTA update causes crashes because the native binary is out of sync.

Practice

1.

What is the main benefit of using Over-the-air (OTA) updates with EAS Update in a React Native app?

easy

A. Fix bugs and add features without waiting for app store approval

B. Increase app size by adding more assets

C. Require users to reinstall the app for every update

D. Disable app functionality temporarily during updates

Solution

1. Step 1: Understand OTA update purpose

   OTA updates let developers fix bugs and add features quickly without app store delays.

2. Step 2: Compare options

   Only Fix bugs and add features without waiting for app store approval describes this benefit correctly; others describe drawbacks or unrelated effects.

3. Final Answer:

   Fix bugs and add features without waiting for app store approval -> Option A

4. Quick Check:

   OTA updates = fast fixes and features [OK]

Hint: OTA updates = fast fixes without app store wait [OK]

Common Mistakes:

• Thinking OTA updates increase app size
• Believing users must reinstall app for OTA
• Assuming app disables during update

2.

Which of the following is the correct way to import the Expo Updates API in a React Native app?

?

easy

A. import { Updates } from 'expo';

B. import Updates from 'react-native-updates';

C. const Updates = require('expo-updates');

D. import * as Updates from 'expo-updates';

Solution

1. Step 1: Recall Expo Updates import syntax

   The official Expo Updates API is imported using "import * as Updates from 'expo-updates';".

2. Step 2: Check other options

   Options A, B, and C use incorrect package names or import styles not recommended for Expo Updates.

3. Final Answer:

   import * as Updates from 'expo-updates'; -> Option D

4. Quick Check:

   Correct import = import * as Updates from 'expo-updates'; [OK]

Hint: Expo Updates import uses * as Updates from 'expo-updates' [OK]

Common Mistakes:

• Using wrong package name like 'react-native-updates'
• Using require instead of import
• Importing Updates from 'expo' instead of 'expo-updates'

3.

Given this React Native code snippet using Expo Updates API, what will be logged if an update is available?

import * as Updates from 'expo-updates';

async function checkUpdate() {
  const update = await Updates.checkForUpdateAsync();
  if (update.isAvailable) {
    console.log('Update found!');
  } else {
    console.log('No update available.');
  }
}

checkUpdate();

medium

A. SyntaxError

B. No update available.

C. Update found!

D. Nothing is logged

Solution

1. Step 1: Analyze checkForUpdateAsync result

   The function returns an object with isAvailable true if an update exists.

2. Step 2: Follow the if condition

   If update.isAvailable is true, it logs 'Update found!'. Otherwise, logs 'No update available.'

3. Final Answer:

   Update found! -> Option C

4. Quick Check:

   Update available logs 'Update found!' [OK]

Hint: If update.isAvailable true, logs 'Update found!' [OK]

Common Mistakes:

• Confusing checkForUpdateAsync return value
• Expecting syntax error from async function
• Thinking nothing logs without await

4.

Identify the error in this code snippet that tries to fetch and reload an update using Expo Updates API:

import * as Updates from 'expo-updates';

async function updateApp() {
  const update = Updates.checkForUpdateAsync();
  if (update.isAvailable) {
    await Updates.fetchUpdateAsync();
    Updates.reloadAsync();
  }
}

medium

A. reloadAsync() must be called before fetchUpdateAsync()

B. Missing await before Updates.checkForUpdateAsync()

C. fetchUpdateAsync() should not be awaited

D. No error, code is correct

Solution

1. Step 1: Check async function usage

   Updates.checkForUpdateAsync() returns a Promise and must be awaited to get the result.

2. Step 2: Identify missing await impact

   Without await, update is a Promise, so update.isAvailable is undefined causing error.

3. Final Answer:

   Missing await before Updates.checkForUpdateAsync() -> Option B

4. Quick Check:

   Always await async calls to get results [OK]

Hint: Always await async calls like checkForUpdateAsync() [OK]

Common Mistakes:

• Forgetting await on async functions
• Calling reloadAsync() before fetching update
• Assuming fetchUpdateAsync() is synchronous

5.

You want your React Native app to check for OTA updates on app start, download them silently, and apply on next app reload. Which approach correctly implements this behavior?

?

hard

A. Use Updates.checkForUpdateAsync(), then if available, call Updates.fetchUpdateAsync() without reload, apply on next start

B. Call Updates.reloadAsync() immediately on app start to force update

C. Only call Updates.fetchUpdateAsync() without checking availability

D. Use Updates.checkForUpdateAsync() and reloadAsync() immediately without fetching

Solution

1. Step 1: Understand OTA update flow

   Check for update availability first, then fetch update silently if available.

2. Step 2: Apply update on next reload

   Fetching update downloads it; reloadAsync applies update immediately, but we want to apply on next app start.

3. Final Answer:

   Use Updates.checkForUpdateAsync(), then if available, call Updates.fetchUpdateAsync() without reload, apply on next start -> Option A

4. Quick Check:

   Check, fetch silently, reload later = Use Updates.checkForUpdateAsync(), then if available, call Updates.fetchUpdateAsync() without reload, apply on next start [OK]

Hint: Check availability, fetch silently, reload later for smooth update [OK]

Common Mistakes:

• Reloading app immediately causing bad UX
• Fetching update without checking availability
• Reloading without fetching update