Hopp til innhold
apphavn
[email protected]Be om tilbud

Tjenester

React Native-utvikling – apper i TypeScript for iOS og Android

Har dere en nettside eller webapp bygget i React, og utviklere som kan TypeScript? Da er React Native-utvikling den korteste veien til en TypeScript-app som kjører på både iPhone og Android. Vi bygger React Native-apper fra Trondheim, til fast pris, med publisering i App Store og Google Play inkludert og kildekoden i deres eie.

Be om tilbudPrøv appkalkulatoren
Hva koster en React Native-app?
Appavklaring2 dager + 1 uke til leveranse20 000 kr fast pris
MVP-app2–12 ukerfra 20 000 kr
Bedriftsapp4–7 månederfra 100 000 kr
Se alle priser

React Native ble sluppet av Meta i 2015 og vedlikeholdes fortsatt av dem. Koden skrives i JavaScript eller TypeScript, men grensesnittet tegnes med plattformens egne, native komponenter. Det er altså ikke en nettside pakket inn i en app. Siden versjon 0.76 er den nye arkitekturen standard, der JavaScript og native kode snakker direkte sammen uten den gamle «broen», noe som gir raskere oppstart og jevnere grensesnitt.

I Norge er AtB-appen for kollektivreiser i Trøndelag det beste eksempelet. Den er skrevet i React Native og TypeScript, er åpen kildekode under EUPL-1.2, og brukes i tilpassede utgaver av FRAM i Møre og Romsdal, Reis Nordland og Svipper i Troms. Konsulentselskapet Bekk anslår at man sparer nær 45 % av arbeidet med React Native sammenlignet med to native apper.

01

Når React Native passer

Den klareste grunnen er at dere allerede har React-kompetanse. Frontend-utviklerne deres kan bidra i appen, og forretningslogikk, typer og API-klienter kan deles mellom nettsiden og appen. Det senker både byggekostnaden og kostnaden ved å ha appen i mange år.

Den andre grunnen er tempo. Med Expo og EAS Update kan rettelser i JavaScript-koden sendes rett til brukernes telefoner uten ny runde i butikkene. For apper som endres ofte, som kampanjer, innhold og billettregler, er det en reell fordel. Og fordi React Native bruker plattformens egne komponenter, føles appen hjemme på både iPhone og Android uten at dere må designe hver knapp selv.

Skal appen først og fremst brukes i nettleseren, kan en webapp eller PWA være både enklere og raskere å bygge. Det sier vi fra om i appavklaringen.

02

Expo, EAS og oppdateringer utenom butikkene

React Natives egen dokumentasjon anbefaler å bygge nye apper med et rammeverk oppå React Native, og det er Expo som gjelder i praksis. Expo gir ferdige løsninger for navigasjon, kamera, posisjon, varsler og alt det andre en app trenger, slik at vi bruker tiden på deres funksjoner i stedet for på oppsett.

Tre begreper er verdt å kjenne som bestiller. EAS Build er Expos skytjeneste som bygger de ferdige app-filene for iOS og Android, med signering og nøkler på plass, uten at noen trenger en Mac på pulten. EAS Update lar oss sende oppdateringer av JavaScript-kode, stiler og bilder rett til installerte apper. Endringer i native kode, tillatelser eller SDK-versjon krever fortsatt et nytt bygg og en ny innsending til butikkene. Native moduler er små biter Swift eller Kotlin vi skriver selv når appen trenger noe Expo ikke dekker, for eksempel en spesiell skanner eller en betalingsterminal.

For dere betyr det at en feil som oppdages fredag, kan være rettet hos brukerne samme dag. Nye funksjoner går gjennom butikkene som før, slik reglene til Apple og Google krever.

03

Når vi fraråder React Native

Har dere ingen React-kompetanse og vil ha en app som ser identisk ut på begge plattformer ned til minste detalj, gir Flutter-utvikling ofte et strammere resultat, fordi Flutter tegner alt selv. Skal appen lene seg på tunge plattformfunksjoner som Apple Watch, avanserte widgets, Bluetooth-tett maskinvare eller bakgrunnstjenester på Android, får dere mer for pengene med native iOS-apputvikling eller Android-apputvikling. Og apper med sanntids 3D eller tung videobehandling bygger vi native uansett.

React Native har også flere bevegelige deler enn native: React Native selv, Expo, og en rekke biblioteker som alle får nye versjoner. Det er håndterbart med en vedlikeholdsavtale, men det er en kostnad dere skal kjenne til før dere velger.

04

Dette leverer vi i en React Native-app

  • Prosjekt satt opp med Expo og TypeScript, med lint, typer, automatiske tester og kodegjennomgang av all kode fra første dag.
  • Design fra Figma implementert med plattformens komponenter, med støtte for mørk modus og tekstskalering.
  • Innlogging, push-varsler, betaling, kart, kamera og offline-lagring, pluss en backend bygget for formålet, se backend, API og integrasjoner.
  • Bygg og distribusjon gjennom EAS, med testversjoner til dere via TestFlight og Google Plays testspor, og publisering på deres egne kontoer.
  • Dokumentasjon og overlevering, slik at eget team eller en annen leverandør kan ta over.

05

Hva koster en React Native-app?

Prisene dekker design, utvikling for begge plattformer, testing og publisering. Alle priser er eks. mva.

  • 2 dager + 1 uke til leveranse

    Appavklaring

    to dagers produktworkshop, kravspesifikasjon, skisser, teknisk arkitektur og bindende fastpristilbud

    20 000 kr fast pris.

    Beløpet trekkes fra prosjektprisen om dere går videre med oss.

  • 2–12 uker

    MVP-app

    én kjerneflyt, iOS og Android fra én kodebase, backend, publisering

    fra 20 000 kr

  • 4–7 måneder

    Bedriftsapp

    innlogging, backend, push, adminpanel, 1–2 integrasjoner

    fra 100 000 kr

  • 6–12 måneder

    Kompleks app / plattform

    betaling, roller, flere integrasjoner, sanntid, KI

    fra 200 000 kr

  • Timepris ved løpende arbeid

    utvikling 700 kr/t
    arkitektur og teknisk ledelse 990 kr/t

Kan dere gjenbruke logikk og API-klienter fra en eksisterende React-løsning, havner prosjektet gjerne i nedre del av spennet. Fast pris får dere etter appavklaringen, og den endres bare hvis kravspesifikasjonen endres, skriftlig og før arbeidet starter. Se alle priser på apputvikling, eller prøv appkalkulatoren.

06

React Native eller Flutter?

React NativeFlutter
SpråkTypeScript/JavaScriptDart
GrensesnittPlattformens egne komponenter; føles som iOS på iPhone og Android på AndroidTegnes av Flutters egen motor; identisk på begge
Deling med webLogikk, typer og API-klienter kan deles med en React-nettsideEgen web-versjon fra samme kode, men lite deling med en eksisterende nettside
Oppdateringer utenom butikkeneJa, for JavaScript og ressurser via EAS UpdateIkke innebygd
Passer best nårDere har React-kompetanse og oppdaterer ofteDere vil ha eget designuttrykk og kanskje desktop

Begge er gode valg for de fleste bedriftsapper. Vi har skrevet en grundigere guide om Flutter eller React Native.

07

Slik jobber vi med React Native-utvikling

Vi starter med en appavklaring og et bindende tilbud. Så designer vi flyter og skjermer i Figma og lar dere teste en klikkbar prototype, se appdesign og UX. Utviklingen går i to ukers sprinter med demo hver uke, og dere får hver ny versjon på egne telefoner underveis. Etter lansering får dere 90 dagers feilgaranti, og kan velge en avtale om vedlikehold og drift av app som holder React Native, Expo og bibliotekene oppdatert. Hele løpet står under slik jobber vi.

08

Kvalitet og eierskap i React Native-appen

Ingen kode går inn i hovedgrenen uten kodegjennomgang og grønne automatiserte tester. Dere eier repo, butikkontoer og Expo-konto fra dag én, og etter lansering har dere 90 dagers feilgaranti. Hva kvalitetsstandarden omfatter, står under kvalitet og garantier.

09

Vanlige spørsmål om React Native-utvikling

Er en React Native-app en nettside i en app?

Nei. React Native bruker plattformens egne komponenter for knapper, lister og navigasjon, så appen tegnes av iOS og Android på samme måte som en native app. En nettside i en app, en såkalt WebView-app, er noe annet og gir dårligere ytelse og følelse. Vi bygger ikke WebView-apper som hovedløsning.

Kan vi gjenbruke koden fra nettsiden vår?

Delvis. Forretningslogikk, datamodeller, typer og kode som snakker med API-et kan som regel deles hvis nettsiden er skrevet i React og TypeScript. Selve skjermene må bygges på nytt, fordi mobil har andre komponenter og andre skjermstørrelser. Vi vurderer gjenbruken konkret i appavklaringen.

Fungerer Vipps og BankID i React Native?

Ja. Vipps integreres gjennom Vipps MobilePays HTTP-baserte API-er mellom backend og Vipps, og appen sender brukeren til Vipps-appen for godkjenning. BankID og ID-porten bruker OpenID Connect, som er uavhengig av rammeverk. Det samme gjelder Altinn, HelseID, Fiken og Tripletex.

Hva er Expo, og må vi bruke det?

Expo er rammeverket React Natives egen dokumentasjon anbefaler for nye apper, med ferdige biblioteker og skytjenester for bygg, distribusjon og oppdateringer. Dere må ikke bruke det, men vi anbefaler det for nesten alle nye prosjekter fordi det sparer oppsett og gjør drift enklere. Koden er fortsatt deres, og Expo kan fjernes senere om dere skulle ønske det.

Kan dere overta en eksisterende React Native-app?

Ja. Vi begynner med en kodegjennomgang av React Native-versjon, arkitektur, avhengigheter og testdekning, og gir dere en skriftlig vurdering med plan. Apper som fortsatt kjører den gamle arkitekturen, må som regel oppgraderes først. Overtakelse kan gjøres som del av en vedlikeholdsavtale. Har dere et webteam på React som trenger mobilkompetanse med på laget, kan dere leie en React Native-utvikler.

Hvor lang tid tar en React Native-app?

En MVP med én kjerneflyt tar 2–12 uker fra oppstart til begge butikker, og en bedriftsapp med innlogging, backend og adminpanel 4–7 måneder. Har dere allerede et API og et designsystem fra nettsiden, går det raskere. Tiden fastsettes i appavklaringen sammen med prisen.

10

Relaterte tjenester

Neste steg

Be om tilbud på React Native-appen

Fortell oss hva appen skal gjøre, om dere har en React-løsning fra før, og hvilke systemer den må snakke med. Dere får en anbefaling om React Native, Flutter eller native, og et prisspenn, fra oss i Trondheim. Vi jobber med bedrifter i hele landet, fra Trøndelag, der AtB-appen hører hjemme, til Oslo og Tromsø.

Har dere et webteam på React og vil vite om React Native er riktig vei? Beskriv appen kort, så svarer vi med vurdering og prisspenn innen én virkedag. Vil dere regne selv først, bruk appkalkulatoren.

Eller skriv til[email protected]

Kilder