Nyheter och Uppdateringar 21 min läsning

Expo SDK 55: Komplett guide till nya funktioner, migrering och framtiden för React Native

Komplett guide till Expo SDK 55 med React Native 0.83.1 och React 19.2. Legacy Architecture borta, Hermes v1 tillgänglig, 75% mindre OTA-uppdateringar via bytecode-diffning, och detaljerad steg-för-steg-migrering från SDK 54.

Editorial Team

Varför Expo SDK 55 är en milstolpe (på riktigt)

I januari 2026 släppte Expo en av sina mest ambitiösa uppdateringar någonsin: Expo SDK 55. Byggd på React Native 0.83.1 och React 19.2.0 är det här inte bara en vanlig punktuppgradering — det är ett genuint paradigmskifte. Legacy Architecture? Borta. Hermes v1? Äntligen här. Och så har vi ett helt nytt mallsystem med plattformsnativa flikar som ger nya projekt en riktigt bra start.

Ärligt talat har jag väntat på den här releasen ett tag. Övergången till New Architecture har pågått i åratal, och med SDK 55 är den äntligen komplett och obligatorisk. Paketversioner följer nu en enhetlig namnkonvention kopplad till SDK-versionen (äntligen!), och det nya brownfield-stödet gör det enklare än någonsin att integrera Expo i befintliga nativa appar.

React Native 0.83.1 är i sig en stabilitetsrelease utan stora brytande förändringar, vilket betyder att SDK 55 kan fokusera helt på att leverera nya funktioner och en bättre utvecklarupplevelse ovanpå en solid grund. React 19.2 ger dessutom tillgång till de senaste React-funktionerna som många i ekosystemet har längtat efter.

Så, låt oss dyka in. I den här artikeln går vi igenom varje väsentlig nyhet i SDK 55 med praktiska kodexempel, en steg-för-steg-migrering från SDK 54, och tips för hur du får ut maximalt av de nya funktionerna.

Legacy Architecture är borta för gott

SDK 54 var den sista versionen som stödde Legacy Architecture. Med SDK 55 är New Architecture det enda alternativet. Punkt slut. Fabric-renderaren, TurboModules och Bridgeless-läget är nu standard i varje Expo-projekt utan möjlighet att vända tillbaka.

Den här förändringen är resultatet av många års arbete. Sedan New Architecture först introducerades har Expo och React Native-teamet arbetat systematiskt för att säkerställa att alla kärnbibliotek och majoriteten av tredjepartsbibliotek stöder den nya arkitekturen. Med SDK 55 anser teamet att ekosystemet är moget nog för att helt ta bort det gamla alternativet.

Konkret har konfigurationsflaggan newArchEnabled tagits bort helt från app.json. I SDK 54 och tidigare behövde du explicit aktivera New Architecture:

// app.json - SDK 54 (gammal konfiguration, GÄLLER INTE LÄNGRE)
{
  "expo": {
    "newArchEnabled": true,
    "plugins": [
      ["expo-build-properties", {
        "android": { "newArchEnabled": true },
        "ios": { "newArchEnabled": true }
      }]
    ]
  }
}

Från och med SDK 55 behövs den här flaggan inte längre. New Architecture är alltid aktiverad:

// app.json - SDK 55 (ingen newArchEnabled-flagga)
{
  "expo": {
    "name": "min-app",
    "slug": "min-app",
    "scheme": "minapp",
    "plugins": ["expo-router"]
  }
}

Vad innebär det i praktiken?

  • Fabric Renderer: Ersätter helt det gamla Paper-systemet. Du får concurrent rendering och bättre scrollprestanda direkt från start.
  • TurboModules: Nativa moduler laddas nu lazily, vilket minskar appens starttid markant jämfört med den gamla Bridge-mekanismen.
  • Bridgeless Mode: Den gamla JavaScript-Native-bron är helt eliminerad — latensen i kommunikationen mellan de två lagren minskar avsevärt.
  • Automatisk Codegen: Gränssnittskod mellan JavaScript och native genereras automatiskt från TypeScript- eller Flow-specifikationer.

Om ditt projekt fortfarande använder bibliotek som beror på Legacy Architecture är det nu absolut nödvändigt att uppgradera dem. De flesta populära bibliotek som react-native-reanimated, react-native-gesture-handler och react-native-screens har fullt stöd för New Architecture sedan lång tid tillbaka. Kolla React Native Directory för att verifiera kompatibilitet.

Den nya standardmallen: nativa flikar och /src/app-struktur

SDK 55 introducerar en helt omdesignad projektmall som betonar plattformsnativa konventioner. Två stora förändringar sticker ut: användningen av det Native Tabs API och en ny /src/app-mappstruktur.

Nativa flikar som standard

Tidigare använde standardmallen en anpassad fliknavigering byggd med React-komponenter. Nu använder SDK 55 istället plattformens egna flik-API:er, vilket ger en genuin iOS- och Android-känsla direkt från start. På webben anpassas layouten för responsiva skärmstorlekar.

// src/app/(tabs)/_layout.tsx - Native Tabs i SDK 55
import { Tabs } from 'expo-router/tabs';

export default function TabLayout() {
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: '#0a7ea4',
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: 'Hem',
          tabBarIcon: ({ color }) => (
            <IconSymbol name="house.fill" color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="explore"
        options={{
          title: 'Utforska',
          tabBarIcon: ({ color }) => (
            <IconSymbol name="paperplane.fill" color={color} />
          ),
        }}
      />
    </Tabs>
  );
}

Mappstruktur med /src/app

Applikationskoden har flyttats från /app till /src/app. Det här separerar appens källkod tydligare från konfigurationsfiler i projektets rot, och det följer den konvention som många storskaliga React-projekt redan använder:

mitt-projekt/
  src/
    app/
      (tabs)/
        _layout.tsx
        index.tsx
        explore.tsx
      _layout.tsx
      +not-found.tsx
    components/
    hooks/
    constants/
  app.json
  package.json
  tsconfig.json

Skapa ett nytt projekt med den nya mallen så här:

npx create-expo-app@latest mitt-projekt --template default@next

Om du uppgraderar ett befintligt projekt behöver du inte flytta din mappstruktur — Expo Router stöder fortfarande /app-mappen. Men för nya projekt rekommenderas starkt att följa den nya konventionen.

Motivationen bakom flytten till /src/app handlar egentligen om ordning och reda. Det separerar applikationskod från konfigurationsfiler och rotmappar som node_modules, android, ios med mera. Särskilt i större kodbaser med många utvecklare gör det projektet betydligt lättare att navigera.

Hermes v1: nästa generations JavaScript-motor

En av de mest spännande nyheterna i SDK 55 är möjligheten att välja in Hermes v1. Det här är en betydande uppgradering av JavaScript-motorn som driver React Native, med förbättrat stöd för moderna JavaScript-funktioner och märkbara prestandaförbättringar.

Vad är nytt i Hermes v1?

Hermes v1 representerar ett stort steg framåt med förbättrat stöd för:

  • ES6-klasser: Full nativ implementation istället för transpilering
  • const/let-syntax: Effektivare variabelhantering i motorn
  • async/await: Förbättrad prestanda för asynkrona operationer
  • Överlag bättre exekvering av modern JavaScript-kod

Aktivera Hermes v1

Hermes v1 är opt-in i SDK 55, så du måste aktivt välja att slå på det. Observera att det kräver att React Native byggs från källkod, vilket avsevärt ökar byggtiderna. Konfigurationen görs i app.json:

{
  "expo": {
    "plugins": [
      ["expo-build-properties", {
        "buildReactNativeFromSource": true,
        "useHermesV1": true
      }]
    ]
  }
}

Dessutom behöver du överskriva Hermes-kompilatorversionen i din package.json:

{
  "overrides": {
    "hermes-compiler": "250829098.0.4"
  }
}

För Yarn-användare, använd resolutions istället för overrides:

{
  "resolutions": {
    "hermes-compiler": "250829098.0.4"
  }
}

Bytecode-diffning för mindre OTA-uppdateringar

En annan riktigt stor förbättring relaterad till Hermes är bytecode-diffning i expo-updates och EAS Update. Istället för att ladda ner kompletta Hermes-bytekodfiler vid varje uppdatering kan klienten nu begära och tillämpa binära patchar (diffar) mot tidigare installerade bytekodfiler.

Resultatet? Uppskattningsvis 75% reduktion av nedladdningsstorleken för Hermes-bytekod och JavaScript på både Android och iOS.

För att sätta det i perspektiv: om din app normalt skickar en OTA-uppdatering på 4 MB Hermes-bytekod skulle samma uppdatering med bytecode-diffning bara bli ungefär 1 MB. För användare på långsamma nätverk eller i regioner med dyra dataabonnemang är det en avgörande förbättring.

Aktivera bytecode-diffning genom att lägga till enableBsdiffPatchSupport i din uppdateringskonfiguration:

{
  "expo": {
    "updates": {
      "url": "https://u.expo.dev/ditt-projekt-id",
      "enableBsdiffPatchSupport": true
    }
  }
}

Den här funktionen planeras bli standard i SDK 56, så det är en god idé att börja använda den redan nu.

Expo Router: nativa funktioner och navigeringsupplevelser

Expo Router har fått flera viktiga uppgraderingar i SDK 55 som tar navigeringsupplevelsen närmare det som riktiga nativa appar erbjuder. Här är de viktigaste nyheterna.

Material 3 Colors API

Ett nytt Colors API lägger till dynamiska Material 3-stilar på Android och adaptiva färger på iOS. Din app kan automatiskt anpassa sig till användarens systemtema och färgpreferenser:

import { useThemeColor } from '@react-navigation/native';

export default function ThemedScreen() {
  const backgroundColor = useThemeColor('surface');
  const textColor = useThemeColor('onSurface');

  return (
    <View style={{ flex: 1, backgroundColor }}>
      <Text style={{ color: textColor }}>
        Anpassar sig till systemets tema
      </Text>
    </View>
  );
}

Apple Zoom Transition

SDK 55 introducerar stöd för Apple Zoom Transition — interaktiva delade element-övergångar på iOS med nativa zoom-animationer och gester. Det här är aktiverat som standard i nya projekt och skapar en mjuk, naturlig känsla vid navigering:

import { Stack } from 'expo-router';

export default function Layout() {
  return (
    <Stack
      screenOptions={{
        animation: 'zoom',
      }}
    >
      <Stack.Screen name="index" />
      <Stack.Screen name="details" />
    </Stack>
  );
}

SplitView (experimentellt)

En länge efterfrågad funktion är det experimentella stödet för SplitView, som möjliggör flerkolumnslayouter. Det här är särskilt värdefullt för iPad-appar och surfplattor där en master-detail-layout är standard:

import { SplitView } from 'expo-router';

export default function SplitLayout() {
  return (
    <SplitView>
      <SplitView.Primary>
        <MasterList />
      </SplitView.Primary>
      <SplitView.Detail>
        <DetailView />
      </SplitView.Detail>
    </SplitView>
  );
}

Eftersom funktionen fortfarande är experimentell bör du testa den ordentligt innan du använder den i produktionsappar.

Stack.Toolbar API

Det nya Stack.Toolbar API ger tillgång till UIToolbar på iOS, vilket gör det möjligt att bygga menyer och åtgärder direkt i navigationsfältet. Det här är för närvarande en iOS-exklusiv funktion:

import { Stack } from 'expo-router';

export default function ScreenWithToolbar() {
  return (
    <>
      <Stack.Screen
        options={{
          title: 'Min skärm',
        }}
      />
      <Stack.Toolbar>
        <Stack.Toolbar.Item
          title="Redigera"
          onPress={() => console.log('Redigera')}
        />
        <Stack.Toolbar.Item
          title="Dela"
          systemIcon="square.and.arrow.up"
          onPress={() => console.log('Dela')}
        />
      </Stack.Toolbar>
      <MyContent />
    </>
  );
}

Fler routerförbättringar

  • Experimentellt stöd för footers i form sheets på Apple-plattformar
  • Standardhantering av safe areas i native-tabs-layouter på både iOS och Android
  • Uppgradering av react-native-screens till version 4.20.0

Brownfield-stöd: integrera Expo i befintliga nativa appar

För många organisationer är en fullständig omskrivning till React Native helt enkelt inte realistisk. SDK 55 introducerar det nya paketet expo-brownfield som drastiskt förändrar möjligheten att integrera Expo i befintliga nativa iOS- och Android-appar.

Isolerad integrationsstrategi

Det nya paketet möjliggör en isolerad integrationsstrategi där du utvecklar din React Native-kod separat och paketerar den som ett nativt bibliotek:

  • AAR (Android Archive) för Android
  • XCFramework för iOS

Det fina med den här approachen är att ditt befintliga nativa team inte ens behöver installera Node.js eller hantera JavaScript-verktygskedjor. De kan helt enkelt importera det genererade biblioteket precis som vilken annan nativ dependency som helst.

Funktioner i expo-brownfield

Paketet innehåller:

  • Config plugin för att konfigurera nativa targets
  • CLI-verktyg för att bygga artefakter (AAR och XCFramework)
  • API:er för tvåvägs kommunikation mellan React Native-modulen och den nativa värdappen
  • Navigerings-API:er för att hantera övergångar mellan nativa skärmar och React Native-vyer
// Installera expo-brownfield
npx expo install expo-brownfield

// Bygg AAR för Android
npx expo-brownfield build --platform android

// Bygg XCFramework för iOS
npx expo-brownfield build --platform ios

Den traditionella integrerade ansatsen (där React Native ingår i samma byggprocess som den nativa appen) stöds fortfarande, men den nya isolerade metoden rekommenderas för organisationer med separata nativa och React Native-team.

Tänk dig scenariot: ditt Android-team fortsätter arbeta i Android Studio med sina vanliga verktyg, medan React Native-teamet separat utvecklar och paketerar nya funktionsmoduler som sedan integreras som en vanlig AAR-dependency. Samma princip gäller för iOS med XCFramework. Det här är en riktig game-changer.

Tvåvägs kommunikation

expo-brownfield erbjuder ett enkelt meddelandesystem för kommunikation mellan den nativa värdappen och React Native-modulen:

// I din React Native-kod
import { BrownfieldBridge } from 'expo-brownfield';

// Lyssna på meddelanden från den nativa sidan
BrownfieldBridge.addMessageListener('userLoggedIn', (data) => {
  console.log('Användare inloggad:', data.userId);
});

// Skicka meddelande till den nativa sidan
BrownfieldBridge.sendMessage('navigateToNative', {
  screen: 'settings',
});

Ny paketversionsstandard

Okej, den här förändringen är kanske inte lika flashig som nya API:er, men den är otroligt välkommen. Från och med SDK 55 använder alla Expo SDK-paket samma huvudversion som SDK:et.

Det innebär till exempel att versionen av expo-camera som är kompatibel med SDK 55 är ^55.0.0. Inte mer förvirrande versionsnummer att hålla reda på.

Innan (SDK 54 och tidigare)

{
  "dependencies": {
    "expo": "~54.0.0",
    "expo-camera": "~15.0.0",
    "expo-location": "~17.0.0",
    "expo-notifications": "~0.28.0",
    "expo-image": "~1.12.0"
  }
}

Nu (SDK 55)

{
  "dependencies": {
    "expo": "^55.0.0",
    "expo-camera": "^55.0.0",
    "expo-location": "^55.0.0",
    "expo-notifications": "^55.0.0",
    "expo-image": "^55.0.0"
  }
}

Ser du skillnaden? Nu kan du med ett ögonkast se om dina paket är avsedda för rätt SDK-version. Om du ser ^55.x.x vet du att paketet hör ihop med SDK 55. Enkelt och tydligt.

Nya API:er och förbättringar

SDK 55 innehåller en imponerande samling nya API:er och förbättringar. Här går vi igenom de viktigaste.

expo-widgets (alfa)

Det nya expo-widgets-paketet (i alfaversion) gör det möjligt att bygga iOS-hemskärms-widgets och Live Activities med Expo UI-komponenter utan att behöva skriva nativ Swift-kod. Widgets byggs med @expo/ui-komponenter:

// widgets/MyWidget.tsx
import { Widget, Text, VStack } from '@expo/ui';

export default function MyWidget() {
  return (
    <Widget>
      <VStack>
        <Text style={{ fontSize: 16, fontWeight: 'bold' }}>
          Dagens väder
        </Text>
        <Text style={{ fontSize: 32 }}>
          22 grader
        </Text>
      </VStack>
    </Widget>
  );
}

Observera att expo-widgets är i alfa och för närvarande bara stöder iOS. Android-stöd förväntas komma i framtida versioner. Trots alfastatusen är det ett stort steg framåt — hemskärms-widgets har blivit en allt viktigare del av mobilupplevelsen, särskilt på iOS 17 och senare.

expo-blur: stabil Android-implementation

Från och med SDK 55 använder expo-blur det betydligt effektivare RenderNode API på Android 12 och nyare, vilket möjliggör bakgrundsoskärpor till en låg prestandakostnad. Migrering till det nya API:et kräver att du omsluter det innehåll som ska vara oskärpt med en <BlurTargetView>-wrapper:

import { BlurView, BlurTargetView } from 'expo-blur';

export default function BlurExample() {
  return (
    <BlurTargetView style={{ flex: 1 }}>
      {/* Innehåll som kan bli oskärpt */}
      <Image
        source={require('./bakgrund.jpg')}
        style={{ width: '100%', height: '100%' }}
      />
      <BlurView
        intensity={80}
        style={{
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0,
          height: 100,
        }}
      >
        <Text>Oskärpt överlappning</Text>
      </BlurView>
    </BlurTargetView>
  );
}

De nya ändringarna är icke-brytande om du inte vill migrera till det nya API:et ännu.

expo-audio: låsskärmskontroller och bakgrundsinspelning

Ljudpaketet expo-audio har fått två efterlängtade funktioner: låsskärmskontroller och bakgrundsinspelning.

Låsskärmskontroller gör det möjligt att visa uppspelningskontroller (spela, pausa, nästa spår) direkt på låsskärmen och i kontrollcentret. Bara en spelare i taget kan vara aktiv:

import { useAudioPlayer } from 'expo-audio';

export default function AudioScreen() {
  const player = useAudioPlayer(audioSource);

  const enableLockScreen = async () => {
    await player.setAsActiveLockScreenPlayer();

    await player.updateLockScreenMetadata({
      title: 'Min podcast',
      artist: 'Podcast AB',
      artwork: 'https://example.com/cover.jpg',
      duration: 3600,
    });
  };

  return (
    <View>
      <Button title="Aktivera låsskärm" onPress={enableLockScreen} />
      <Button title="Spela" onPress={() => player.play()} />
      <Button title="Pausa" onPress={() => player.pause()} />
    </View>
  );
}

expo-sqlite: utvecklarverktyg och ny syntax

expo-sqlite har fått flera trevliga förbättringar:

  • SQLite Inspector DevTools-plugin: Granska och manipulera din databas direkt från utvecklarverktygen
  • Tagged template literals: En ny, mer läsbar syntax för databassökningar
  • SQLITE_ENABLE_MATH_FUNCTIONS: Aktiverat som standard, vilket ger tillgång till matematiska funktioner direkt i SQL
import * as SQLite from 'expo-sqlite';

const db = await SQLite.openDatabaseAsync('minapp.db');

// Ny tagged template literal-syntax
const anvandare = await db.getAllAsync`
  SELECT * FROM users WHERE age > ${18} ORDER BY name ASC
`;

// Matematiska funktioner nu tillgängliga som standard
const resultat = await db.getFirstAsync`
  SELECT SQRT(population) as sqrt_pop FROM cities WHERE name = ${'Stockholm'}
`;

expo-video: Picture-in-Picture och prestandaförbättringar

Videopaketet har fått ett gäng uppgraderingar:

  • Picture-in-Picture (PiP) har omarbetats på Android för att stödja hantering av flera VideoViews
  • Nya seekTolerance och scrubbingModeOptions för bättre skrubbningsprestanda
  • Nya fält för averageBitrate och peakBitrate i videospårsinformationen
  • Prestandaförbättringar på iOS genom att ladda större delar av videodata asynkront
import { VideoView, useVideoPlayer } from 'expo-video';

export default function VideoScreen() {
  const player = useVideoPlayer(videoSource, (player) => {
    player.loop = true;
  });

  return (
    <VideoView
      player={player}
      style={{ width: '100%', aspectRatio: 16 / 9 }}
      allowsPictureInPicture={true}
      nativeControls={true}
    />
  );
}

expo-image: HDR och SF Symbols

expo-image stöder nu HDR-bilder på iOS, vilket ger rikare och mer levande färgåterskapning på enheter med HDR-skärmar. Dessutom kan paketet nu rendera SF Symbols:

import { Image } from 'expo-image';

// HDR-bildstöd
<Image
  source={require('./hdr-foto.heic')}
  style={{ width: 300, height: 200 }}
  allowDownscaling={false}
/>

// SF Symbols (via expo-symbols)
import { SymbolView } from 'expo-symbols';

<SymbolView
  name="heart.fill"
  style={{ width: 40, height: 40 }}
  tintColor="red"
/>

Swift 6-läge i Expo Modules

Expo Modules Core har antagit Swift 6-språkläge, vilket aktiverar striktare kompilatorkontoller som garanterar att koden är fri från data races. Det här är särskilt viktigt för moduler som körs på flera trådar:

// I din anpassade Expo-modul med Swift 6
import ExpoModulesCore

public class MyModule: Module {
  public func definition() -> ModuleDefinition {
    Name("MyModule")

    AsyncFunction("fetchData") { (url: String) -> String in
      // Swift 6 garanterar att denna asynkrona kod
      // är fri från data races
      let data = try await URLSession.shared.data(from: URL(string: url)!)
      return String(data: data.0, encoding: .utf8)!
    }
  }
}

Fler förbättringar i korthet

  • expo-camera: Möjlighet att exkludera streckkods-API:er för att minska appens storlek
  • expo-sharing: Experimentellt stöd för att ta emot delad data via djuplänkar
  • expo-contacts/next, expo-media-library/next, expo-calendar/next: Nya objektorienterade API:er med SharedObjects för direkt datamanipulering
  • ArrayBuffer-stöd tillagt i Expo Modules Core
  • StaticFunction och StaticAsyncFunction tillagda i Class API

Brytande förändringar och migreringsguide

Varje stor SDK-uppgradering medför brytande förändringar. Här är en komplett översikt och en steg-för-steg-guide för att migrera från SDK 54 till SDK 55.

Sammanfattning av brytande förändringar

  1. Legacy Architecture borttagen: newArchEnabled-flaggan finns inte längre. New Architecture är alltid aktiverat.
  2. Push-notiser i Expo Go (Android): Försök att använda push-notiser i Expo Go på Android kastar nu fel istället för varningar. Migrera till development builds.
  3. expo-av borttagen från Expo Go: expo-av har tagits bort från Expo Go eftersom det ersatts av expo-video och expo-audio. Paketet får inte längre patchar.
  4. Notification-konfiguration borttagen: Fältet notification i app.json-schemat har tagits bort. Migrera till expo-notifications config plugin.
  5. removeSubscription() utfasad: Använd istället subscription.remove().
  6. expo-video-thumbnails utfasad: Ersatt av generateThumbnailsAsync från expo-video. Paketet tas bort i SDK 56.

Steg-för-steg-migrering från SDK 54

Steg 1: Uppgradera Expo och alla paket

Kör följande kommando för att uppgradera Expo SDK och automatiskt fixa kompatibla paketversioner:

npx expo install expo@^55.0.0 --fix

Det här kommandot uppdaterar expo till version 55 och justerar alla relaterade paket till kompatibla versioner.

Steg 2: Ta bort newArchEnabled

Öppna app.json och ta bort all referens till newArchEnabled:

// Ta bort dessa rader från app.json:
"newArchEnabled": true,

// Och från expo-build-properties plugin:
"android": { "newArchEnabled": true },
"ios": { "newArchEnabled": true }

Steg 3: Migrera från expo-av

Om du använder expo-av, migrera till expo-video och expo-audio:

// Ta bort expo-av
npx expo install --remove expo-av

// Installera ersättningarna
npx expo install expo-video expo-audio

Uppdatera dina importer:

// FÖRE (expo-av)
import { Audio, Video } from 'expo-av';

const sound = new Audio.Sound();
await sound.loadAsync(require('./ljud.mp3'));
await sound.playAsync();

// EFTER (expo-audio)
import { useAudioPlayer } from 'expo-audio';

const player = useAudioPlayer(require('./ljud.mp3'));
player.play();
// FÖRE (expo-av Video)
import { Video } from 'expo-av';

<Video
  source={{ uri: 'https://example.com/video.mp4' }}
  style={{ width: 300, height: 200 }}
  useNativeControls
/>

// EFTER (expo-video)
import { VideoView, useVideoPlayer } from 'expo-video';

const player = useVideoPlayer('https://example.com/video.mp4');

<VideoView
  player={player}
  style={{ width: 300, height: 200 }}
  nativeControls
/>

Steg 4: Migrera notification-konfiguration

Om du har ett notification-fält i app.json, flytta konfigurationen till expo-notifications config plugin:

// FÖRE - app.json
{
  "expo": {
    "notification": {
      "icon": "./assets/notification-icon.png",
      "color": "#ffffff"
    }
  }
}

// EFTER - app.json
{
  "expo": {
    "plugins": [
      ["expo-notifications", {
        "icon": "./assets/notification-icon.png",
        "color": "#ffffff"
      }]
    ]
  }
}

Steg 5: Uppdatera removeSubscription-anrop

Ersätt alla removeSubscription()-anrop med det nya mönstret:

// FÖRE
import * as Notifications from 'expo-notifications';

const subscription = Notifications.addNotificationReceivedListener(
  notification => {
    console.log(notification);
  }
);

// Senare...
Notifications.removeSubscription(subscription); // UTFASAD

// EFTER
const subscription = Notifications.addNotificationReceivedListener(
  notification => {
    console.log(notification);
  }
);

// Senare...
subscription.remove(); // RÄTT SÄTT

Steg 6: Migrera från expo-video-thumbnails

// FÖRE
import * as VideoThumbnails from 'expo-video-thumbnails';

const { uri } = await VideoThumbnails.getThumbnailAsync(videoUri, {
  time: 15000,
});

// EFTER
import { generateThumbnailsAsync } from 'expo-video';

const thumbnails = await generateThumbnailsAsync(videoUri, {
  times: [15000],
});

Steg 7: Migrera push-notiser från Expo Go

Om du testar push-notiser i Expo Go på Android, skapa en development build istället:

# Skapa en development build
npx expo run:android

# Eller med EAS Build
eas build --profile development --platform android

Steg 8: Uppdatera paketversioner

Kontrollera att alla dina Expo-paket följer den nya versionskonventionen. Om du ser paket med gamla versionsnummer, kör uppgraderingskommandot igen:

# Kontrollera versioner
npx expo install --check

# Fixa eventuella versionsavvikelser
npx expo install --fix

Steg 9: Verifiera och testa

Kör följande kontroller efter migrering:

# Kontrollera att alla paket är kompatibla
npx expo-doctor

# Rensa cacher
npx expo start --clear

# Kör din app och verifiera funktionalitet
npx expo run:ios
npx expo run:android

Expo UI-biblioteket och utvecklarupplevelsen

Utöver de specifika paketförbättringarna har SDK 55 även gjort framsteg med det bredare Expo UI-biblioteket och utvecklarverktygen.

Expo UI beta

Expo UI-biblioteket rör sig mot en stabil 1.0-release planerad till mitten av 2026. I SDK 55 har flera SwiftUI-komponenter uppgraderats:

  • DateTimePicker har bytt namn till DatePicker och stöder nu intervall
  • Switch har bytt namn till Toggle
  • CircularProgress och LinearProgress har slagits ihop till ProgressView
  • Section använder nu title-prop och isExpanded istället för collapsible
  • Form ersätter scrollEnabled med scrollDisabled-modifieraren

Jetpack Compose-stöd för Android förväntas komma sent under SDK 55-betan eller i den stabila releasen.

AI-verktyg och MCP-server

Expo satsar på AI-integration, vilket känns väldigt aktuellt. SDK 55 utvidgar MCP-servern så att Expo Module-plugins och CLI-kommandon automatiskt kan installeras. Det officiella expo/skills-repositoriet erbjuder AI-agentfärdigheter för att bygga, distribuera och felsöka applikationer.

Webbförbättringar

Expo Web har också fått kärlek i SDK 55:

  • Omskriven felöverlappning för bättre felsökning
  • Alfa server-side rendering (SSR) för förbättrad laddningsprestanda
  • Experimentella dataladdare för mer effektiv datahämtning

Praktiska tips och bästa praxis

För att få en smidig övergång till SDK 55, här är några praktiska tips baserade på erfarenheter från betaperioden.

1. Testa i en separat branch

Skapa alltid en separat git-branch för SDK-uppgraderingar. Det ger dig möjlighet att återgå om något går snett:

git checkout -b upgrade/sdk-55
npx expo install expo@^55.0.0 --fix
# Testa noggrant
git commit -am "Uppgradera till Expo SDK 55"

2. Kontrollera tredjepartsbibliotek

Innan uppgraderingen, kontrollera att alla dina tredjepartsbibliotek är kompatibla med New Architecture. Använd npx expo-doctor för att identifiera potentiella problem.

3. Utnyttja den nya versionskonventionen

Den nya konventionen gör det enkelt att kontrollera kompatibilitet. Om ett paket inte har version ^55.x.x är det sannolikt inte uppdaterat för SDK 55 ännu.

4. Börja använda bytecode-diffning

Om du använder EAS Update, aktivera enableBsdiffPatchSupport redan nu. 75% reduktion i uppdateringsstorlek — dina användare (särskilt de på marknader med begränsad bandbredd) kommer att tacka dig.

5. Planera migreringen från expo-av

expo-av får inte längre patchar. Även om det fortfarande fungerar utanför Expo Go bör du prioritera migrering till expo-video och expo-audio.

6. Utforska expo-brownfield för stegvis adoption

Om du arbetar i en organisation med befintliga nativa appar kan expo-brownfield vara precis vad du behöver för att introducera React Native stegvis utan en big-bang-migrering.

7. Använd development builds

Med borttaget stöd för push-notiser och expo-av i Expo Go är det viktigare än någonsin att använda development builds. De ger dig samma utvecklarupplevelse som Expo Go men med full tillgång till alla nativa API:er. Investera tid i att sätta upp en EAS Build-pipeline tidigt.

8. Håll koll på Expo Go-begränsningar

Eftersom SDK 55 har tagit bort flera funktioner från Expo Go (push-notiser, expo-av) är det bra att skapa en lista över vilka funktioner i din app som kräver en development build. Dokumentera det i ditt projekts README så att alla i teamet vet vad som gäller.

Sammanfattning och framtidsutsikter

Expo SDK 55 är utan tvekan en av de mest betydelsefulla releaserna i Expos historia. Genom att helt ta bort Legacy Architecture, introducera Hermes v1 och leverera en rad nativa funktioner som SplitView, Apple Zoom Transition och Material 3-färgstöd tar Expo ett definitivt steg mot att göra React Native till en förstklassig plattform för nativ apputveckling.

Här är de viktigaste punkterna att ta med sig:

  • New Architecture är nu standard och obligatorisk — ingen mer konfiguration behövs
  • Hermes v1 erbjuder bättre prestanda — opt-in för nu, men förväntad standard i framtida versioner
  • 75% mindre OTA-uppdateringar — tack vare bytecode-diffning
  • Enhetlig paketversionshantering — alla paket följer SDK:ets huvudversion
  • Brownfield-stöd — gör det möjligt att integrera Expo som nativt bibliotek
  • Rikare nativa upplevelser — genom SplitView, Stack.Toolbar, Apple Zoom och Material 3
  • Widgets på hemskärmen — expo-widgets öppnar upp för nya användningsområden

Oavsett om du bygger en ny app från grunden eller stegvis moderniserar en befintlig nativ applikation erbjuder SDK 55 verktygen och API:erna för att göra det på ett effektivt och framtidssäkert sätt.

Framöver kan vi förvänta oss att Hermes v1 blir standard i SDK 56, att bytecode-diffning aktiveras som standard, och att expo-widgets når stabil status med Android-stöd. Expo UI-biblioteket planeras nå 1.0 i mitten av 2026.

För att hålla dig uppdaterad, besök Expo Changelog och delta i gemenskapen på Expo Discord. Lycka till med din uppgradering!

Om Författaren Editorial Team

Our team of expert writers and editors.