[expo-updates] New JS API useUpdates() (#23532)

`useUpdates()`, a simpler JavaScript API for `expo-updates`.

- Wraps information on the currently running app bundle, and any
available or downloa

[expo-updates] New JS API useUpdates() (#23532)

`useUpdates()`, a simpler JavaScript API for `expo-updates`.

- Wraps information on the currently running app bundle, and any
available or downloaded new updates
- Reads from and receives change events from the native state machine,
so it always reflects the current state of the native code
- Can be called from any component in the application
- Tracks the last time the device checked the update server for an
available update
- Existing async methods (`checkForUpdateAsync()`, `fetchUpdateAsync()`)
can be called without waiting for results -- the hook will automatically
refresh when the methods complete

## Example Usage

```tsx UpdatesDemo.tsx
import { StatusBar } from 'expo-status-bar';
import * as Updates from 'expo-updates';
import React from 'react';
import { Pressable, Text, View } from 'react-native';

export default function UpdatesDemo() {
const { currentlyRunning, availableUpdate, 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" />
) : null}
<StatusBar style="auto" />
</View>
);
}

function Button(props: { text: string; pressHandler: () => void }) {
const { text, pressHandler } = props;
return (
<Pressable
style={({ pressed }) => {
return pressed ? [styles.button, styles.buttonPressed] : styles.button;
}}
onPress={pressHandler}>
<Text style={styles.buttonText}>{text}</Text>
</Pressable>
);
}
```

# How

- New method `useUpdates()`
- New supporting TS types

# Test Plan

- Unit tests included
- E2E tests included
- Manual testing

# Checklist

<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->

- [x] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `expo prebuild` & EAS Build (eg:
updated a module plugin).

show more ...