Jutsu Expo:expo Updates

Expo Updates

Use this skill when implementing over-the-air (OTA) updates to deploy JavaScript and asset updates without app store releases.

Key Concepts

Configuration

// app.json
{
  "expo": {
    "updates": {
      "enabled": true,
      "checkAutomatically": "ON_LOAD",
      "fallbackToCacheTimeout": 0,
      "url": "https://u.expo.dev/[project-id]"
    },
    "runtimeVersion": {
      "policy": "sdkVersion"
    }
  }
}

Checking for Updates

import * as Updates from 'expo-updates';
import { useEffect, useState } from 'react';
import { View, Text, Button } from 'react-native';

export default function App() {
  const [updateAvailable, setUpdateAvailable] = useState(false);

  useEffect(() => {
    async function checkForUpdates() {
      if (!__DEV__) {
        const update = await Updates.checkForUpdateAsync();
        setUpdateAvailable(update.isAvailable);
      }
    }
    checkForUpdates();
  }, []);

  const handleUpdate = async () => {
    const { isNew } = await Updates.fetchUpdateAsync();
    if (isNew) {
      await Updates.reloadAsync();
    }
  };

  if (updateAvailable) {
    return (
      <View>
        <Text>Update Available!</Text>
        <Button title="Update Now" />
      </View>
    );
  }

  return <View>{/* Your app */}</View>;
}

Runtime Versions

// app.config.ts
export default {
  expo: {
    runtimeVersion: {
      policy: 'appVersion', // Match app version
    },
    // Or use custom logic
    runtimeVersion: '1.0.0',
  },
};

Best Practices

Update Hook

import * as Updates from 'expo-updates';
import { useEffect, useState } from 'react';

export function useUpdates() {
  const [isChecking, setIsChecking] = useState(false);
  const [isDownloading, setIsDownloading] = useState(false);
  const [updateAvailable, setUpdateAvailable] = useState(false);

  useEffect(() => {
    const subscription = Updates.addListener((event) => {
      if (event.type === Updates.UpdateEventType.UPDATE_AVAILABLE) {
        setUpdateAvailable(true);
      }
    });

    return () => subscription.remove();
  }, []);

  const checkForUpdate = async () => {
    if (__DEV__) return;

    setIsChecking(true);
    try {
      const update = await Updates.checkForUpdateAsync();
      setUpdateAvailable(update.isAvailable);
    } finally {
      setIsChecking(false);
    }
  };

  const downloadAndApplyUpdate = async () => {
    if (__DEV__) return;

    setIsDownloading(true);
    try {
      const update = await Updates.fetchUpdateAsync();
      if (update.isNew) {
        await Updates.reloadAsync();
      }
    } finally {
      setIsDownloading(false);
    }
  };

  return {
    isChecking,
    isDownloading,
    updateAvailable,
    checkForUpdate,
    downloadAndApplyUpdate,
  };
}

Silent Updates

import { useEffect } from 'react';
import * as Updates from 'expo-updates';

export function useSilentUpdates() {
  useEffect(() => {
    async function update() {
      if (__DEV__) return;

      try {
        const update = await Updates.checkForUpdateAsync();
        if (update.isAvailable) {
          await Updates.fetchUpdateAsync();
          // Don't reload immediately - wait for next app start
        }
      } catch (error) {
        console.error('Update check failed:', error);
      }
    }

    update();
  }, []);
}

Common Patterns

Update Screen

import * as Updates from 'expo-updates';
import { useState } from 'react';
import { View, Text, Button, ActivityIndicator } from 'react-native';

export function UpdateScreen() {
  const [loading, setLoading] = useState(false);

  const handleUpdate = async () => {
    setLoading(true);
    try {
      const update = await Updates.fetchUpdateAsync();
      if (update.isNew) {
        await Updates.reloadAsync();
      }
    } catch (error) {
      console.error('Update failed:', error);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" />
        <Text>Updating...</Text>
      </View>
    );
  }

  return (
    <View>
      <Text>Update Available</Text>
      <Button title="Update Now" />
    </View>
  );
}

EAS Update Configuration

// eas.json
{
  "build": {
    "production": {
      "channel": "production"
    },
    "preview": {
      "channel": "preview"
    }
  }
}

Related Skills

• expo-config: Configuring updates
• expo-build: Building with EAS