kx-update-manager

A tiny banner + hook to ship OTA (over-the-air) updates with expo-updates.

When an update is available, show a call-to-action and update with one tap. Perfect for apps using EAS Update.

✨ Features

• ⚡️ Drop-in banner: one line in your app root
• 🪝 Hook: trigger checks manually or build your own UI
• 🧩 Expo SDK 50+ compatible
• 🔤 Uses @expo/vector-icons (Material Icons)

1) Requirements

• Expo SDK: 50+
• expo-updates: 0.20+
• React / React Native: React 18+, React Native 0.72+
• @expo/vector-icons: 14+ (for the banner icon)

If you use EAS Update (recommended), the app must be linked to an Expo project.

Heads up: OTA updates only apply on binaries built with EAS (not in the dev client/expo start).

2) Install

# Install this package
yarn add kx-update-manager

# Ensure peer deps match your Expo SDK
yarn add expo-updates @expo/vector-icons

3) Link your app to EAS (once per app)

npx eas login
npx eas init
npx eas update:configure

This will add EAS metadata to your app config (app.json / app.config.js), including the projectId, runtimeVersion policy, and the updates.url. You should see something like:

be sure to have expo-update in your plugins

{
  "plugins": {
    "expo-dev-client",
    "expo-apple-authentication",
    "expo-updates",
  },
  "expo": {
    "owner": "your-expo-username",
    "runtimeVersion": { "policy": "appVersion" },
    "updates": {
      "url": "https://u.expo.dev/<your-project-id>"
    },
    "extra": {
      "eas": { "projectId": "<your-project-id>" }
    }
  }
}

If the project was previously linked to another account and you need to re-link, remove the extra.eas.projectId field and run npx eas init again.

4) Create build profiles (eas.json)

Define separate profiles (e.g., test, production) and pin each one to an EAS Update channel.

{
  "cli": { "version": ">= 10.0.0" },
  "build": {
    "test": {
      "distribution": "internal",
      "credentialsSource": "remote",
      "channel": "test",
      "android": { "buildType": "apk" },
      "ios": { "simulator": false }
    },
    "production": {
      "distribution": "store",
      "credentialsSource": "remote",
      "channel": "production"
    }
  }
}

The channel embedded in a build determines which branch/channel your OTA updates will come from.

5) Use the banner

Add the component near the top of your app tree (e.g., in App.tsx):

import React from 'react';
import { View } from 'react-native';
import UpdateManager  from 'kx-update-manager';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <UpdateManager
        title="Update available"
        icon="refresh"            // MaterialIcons name
        backgroundColor="#5A5A5A"
        isManual={true}            // Recommended: show CTA; set false to auto-apply
      />
      {/* ...rest of your app */}
    </View>
  );
}

Props

| Prop | Type | Default | Description | |------------------|---------|----------------------------|------------------------------------------------------------------------------------| | isManual | boolean | false | If false, the update downloads & reloads automatically (no CTA). | | icon | string | "refresh" | Material Icons glyph name (from @expo/vector-icons/MaterialIcons). | | title | string | "Actualización disponible" | Banner text when an update is available. | | backgroundColor| string | "#5A5A5A" | Banner background color. |

Tip: Use isManual={true} if you want the banner to show a button labeled “Actualizar”. With isManual={false}, updates are fetched & applied automatically when available.

7) Build a binary for your test channel

# Android (internal QA)
eas build -p android --profile test

# iOS (internal QA via TestFlight / Ad Hoc)
eas build -p ios --profile test

Install that build on a device. OTA updates will only apply to binaries that were built with the matching channel.

8) Ship an OTA

Publish to the branch/channel your binary listens to:

# Send an OTA to the "test" channel
eas update --branch test -m "OTA: enable kairox-updates banner"

Behind the scenes: EAS maps your branch (e.g., test) to the channel embedded in the binary ("channel":"test" in eas.json). YOU NEED TO LINK YOUR CHANNEL WITH YOUR BRANCH EXAMPLE: Channel: Test --> Branch: Test