Aug 8, 2023 by
Doug Lowder
The expo-updates
module allows your app to download and manage remote updates to your application code.
We now provide a React hook, useUpdates()
, for hooking into state and lifecycle updates from the module. The new hook makes use of a new state machine implemented within the native code.
Features:
checkForUpdateAsync()
, fetchUpdateAsync()
) can be called without waiting for results -- the hook will automatically refresh when the methods completeThe useUpdates()
hook is currently in alpha and will be stable in SDK 50.
We have created the Updates API Demo app as a working example of an app that uses the new API.
import { StatusBar } from 'expo-status-bar';
import * as Updates from 'expo-updates';
import React from 'react';
import { Text, View } from 'react-native';
export default function UpdatesDemo() {
const { currentlyRunning, isUpdateAvailable, isUpdatePending } = Updates.useUpdates();
// If true, we show the button to download and run the update
const showDownloadButton = isUpdateAvailable;
React.useEffect(() => {
if (isUpdatePending) {
// Update has been successfully downloaded,
// so reload with the new update bundle
Updates.reloadAsync();
}
}, [isUpdatePending]);
// Show whether or not we are running embedded code or an update
const runTypeMessage = currentlyRunning.isEmbeddedLaunch
? 'This app is running from built-in code'
: 'This app is running an update';
return (
<View style={styles.container}>
<Text style={styles.headerText}>Updates Demo</Text>
<Text>{runTypeMessage}</Text>
<Button
pressHandler={() => Updates.checkForUpdateAsync()}
text="Check manually for updates"
/>
{showDownloadButton && (
<Button pressHandler={() => Updates.fetchUpdateAsync()} text="Download and run update" />
)}
<StatusBar style="auto" />
</View>
);
}
Credits
Doug Lowder as project lead
Quinlan Jung as a contributor
Will Schurman as a contributor
Jon Samp as a tester