useHotUpdaterStore
Read update progress from React components.
Use useHotUpdaterStore to show OTA update progress in your React Native UI.
For most apps, progress and isUpdateDownloaded are enough. Use
artifactType and details only when you want to render progress for
individual download entries.
Basic usage
progress is a number from 0 to 1. isUpdateDownloaded becomes true
when the update has finished downloading and can be applied with
hotUpdater.reload().
import { useHotUpdaterStore } from "@hot-updater/react-native";
import { Button, Text, View } from "react-native";
import { hotUpdater } from "./hotUpdater";
function App() {
const { progress, isUpdateDownloaded } = useHotUpdaterStore();
return (
<View>
<Text>{Math.round(progress * 100)}%</Text>
<Button
title="Reload"
onPress={() => hotUpdater.reload()}
disabled={!isUpdateDownloaded}
/>
</View>
);
}State
| Field | Type | Description |
|---|---|---|
progress | number | Overall update progress from 0 to 1. |
isUpdateDownloaded | boolean | true when progress reaches 1. |
artifactType | "diff" | null | Current download type, or null before progress starts. |
details | object | null | Progress for individual download entries. |
When artifactType is "diff", Hot Updater is using the manifest-based update
path. It can reuse local files, download individual files or patches, or choose
a full archive based on download cost. details contains totalFilesCount,
completedFilesCount, and files for the actual download entries.
A full archive download appears as one bundle.tar.br entry. Its file counts
refer to that download, not the number of assets extracted from the archive.
import { useHotUpdaterStore } from "@hot-updater/react-native";
import { Text, View } from "react-native";
function UpdateProgress() {
const { artifactType, details, progress } = useHotUpdaterStore();
return (
<View>
<Text>{Math.round(progress * 100)}%</Text>
{artifactType === "diff" && details ? (
<Text>
{details.completedFilesCount}/{details.totalFilesCount} downloads
</Text>
) : null}
</View>
);
}Optimizing renders with selectors
Pass a selector when a component only needs one field from the store.
import { useHotUpdaterStore } from "@hot-updater/react-native";
import { Button, Text } from "react-native";
import { hotUpdater } from "./hotUpdater";
function ProgressDisplay() {
const progress = useHotUpdaterStore((state) => state.progress);
return <Text>{Math.round(progress * 100)}%</Text>;
}
function UpdateButton() {
const isUpdateDownloaded = useHotUpdaterStore(
(state) => state.isUpdateDownloaded,
);
return (
<Button
title="Reload"
onPress={() => hotUpdater.reload()}
disabled={!isUpdateDownloaded}
/>
);
}