import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import * as Updates from 'expo-updates';
export default function EASUpdateDemo() {
const [status, setStatus] = useState('Idle');
const [lastUpdate, setLastUpdate] = useState('None');
const [updateAvailable, setUpdateAvailable] = useState(false);
async function checkForUpdate() {
setStatus('Checking for updates...');
try {
const update = await Updates.checkForUpdateAsync();
if (update.isAvailable) {
setStatus('Update available');
setUpdateAvailable(true);
} else {
setStatus('Up to date');
setUpdateAvailable(false);
}
} catch (e) {
setStatus('Error checking updates');
setUpdateAvailable(false);
}
}
async function applyUpdate() {
setStatus('Downloading update...');
try {
await Updates.fetchUpdateAsync();
setStatus('Applying update...');
await Updates.reloadAsync();
// After reload, this code runs fresh, so lastUpdate resets
} catch (e) {
setStatus('Error applying update');
}
}
return (
<View style={styles.container}>
<Text style={styles.title}>EAS Update Demo</Text>
<Text style={styles.status}>Status: {status}</Text>
<View style={styles.buttonContainer}>
<Button title="Check for Update" onPress={checkForUpdate} />
</View>
<View style={styles.buttonContainer}>
<Button title="Apply Update" onPress={applyUpdate} disabled={!updateAvailable} />
</View>
<Text style={styles.lastUpdate}>Last update: {lastUpdate}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
status: { fontSize: 16, marginBottom: 20 },
buttonContainer: { marginVertical: 10, width: '60%' },
lastUpdate: { marginTop: 30, fontSize: 14, fontStyle: 'italic' }
});This React Native screen uses Expo Updates API to check and apply over-the-air updates.
When the user taps 'Check for Update', the app calls Updates.checkForUpdateAsync() to see if a new update is available. The status text updates to show the result.
If an update is available, the 'Apply Update' button becomes enabled. When tapped, it downloads the update with Updates.fetchUpdateAsync() and then reloads the app with Updates.reloadAsync() to apply the update immediately.
Errors during checking or applying updates are caught and shown in the status text.
The last update time is shown but remains 'None' here because this example does not persist update timestamps across reloads. In a real app, you could save the update time in persistent storage.
