Het app.json bestand in React Native Applicaties

Het app.json bestand is een essentieel configuratiebestand in React Native applicaties, vooral wanneer je Expo gebruikt. Dit bestand bevat verschillende instellingen die bepalen hoe je applicatie wordt gebouwd, geïmplementeerd en gepresenteerd aan gebruikers op verschillende platforms. Het begrijpen van deze configuraties is essentieel voor het maken van professionele React Native applicaties.

Inhoud

• Wat is het app.json bestand?
• Basisstructuur en belangrijke configuraties
  • Expo Configuratie Sectie
• Splash Screen Configuratie
• Platform-specifieke configuraties
  • Android Configuratie
  • iOS Configuratie
  • Web Configuratie
• Asset Management
• Over-the-Air (OTA) Updates
  • Hoe werken OTA Updates?
  • Voordelen van OTA Updates:
• Geavanceerde configuraties
• Veelvoorkomende problemen en probleemoplossing
• Samenvatting

Wat is het app.json bestand?

Het app.json bestand dient als het centrale configuratiebestand dat metadata over de applicatie bevat. Wanneer je klaar bent om je app te bouwen en te implementeren, zullen Expo en React Native dit bestand gebruiken om de noodzakelijke platformspecifieke builds met de juiste instellingen te genereren.

Basisstructuur en belangrijke configuraties

{
  "expo": {
    "name": "MijnGeweldigeApp",
    "slug": "mijn-geweldige-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "android": {
      "package": "com.jouwbedrijf.mijngeweldigeapp",
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.jouwbedrijf.mijngeweldigeapp"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "updates": {
      "fallbackToCacheTimeout": 0
    }
  }
}

Expo Configuratie Sectie

De configuraties beginnen met het expo object dat alle instellingen bevat die betrekking hebben op de applicatie:

Basis App Informatie

• name: Dit is de gebruikersvriendelijke naam van je applicatie die verschijnt in de Expo app en op het startscherm van het apparaat van de gebruiker na installatie. Kies een duidelijke, beknopte naam die je applicatie beschrijft.

• slug: Een URL-vriendelijke naam (kleine letters, geen spaties) die wordt gebruikt bij het publiceren van je app met Expo. Dit wordt een deel van de URL wanneer de app wordt gehost op de servers van Expo.

• version: Het versienummer van je applicatie, meestal volgens semantische versioning (bijv. 1.0.0). Dit is belangrijk voor updates en inzendingen in de app stores.

Weergave Oriëntatie

• orientation: Bepaalt hoe je app wordt weergegeven op het apparaat. Opties zijn onder andere:
  • portrait (standaard): App wordt in verticale oriëntatie weergegeven
  • landscape: App wordt in horizontale oriëntatie weergegeven
  • default: App kan draaien op basis van de oriëntatie van het apparaat

Applicatie Icoon

• icon: Specificeert het pad naar de icoonafbeelding van de applicatie. Platform-specifieke iconen moeten gespecificeerd worden binnen de ios en android objecten

Splash Screen Configuratie

Het splash screen is wat gebruikers zien terwijl je app aan het laden is. Het correct configureren hiervan creëert een professionele eerste indruk:

"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
}

• image: Pad naar je splash screen afbeelding
• resizeMode: Bepaalt hoe de splash screen afbeelding past op verschillende schermgroottes:
  • contain: Behoudt de beeldverhouding en zorgt ervoor dat de hele afbeelding zichtbaar is
  • cover: Vult het scherm volledig, kan delen van de afbeelding afsnijden
  • native: Gebruikt het native splash screen gedrag van het platform
• backgroundColor: De achtergrondkleur die achter de splash afbeelding wordt weergegeven

De splash afbeelding geef je standaard best een grootte van 1242×2436 pixels omdat het op die manier grotere schermformaten ondersteunt. Expo zal de afbeelding ook wel op passende wijze schalen voor verschillende apparaten.

Platform-specifieke configuraties

Android Configuratie

"android": {
"package": "be.jouwbedrijf.mijngeweldigeapp",
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#ffffff"
}
}

• package: Dit is de unieke identifier voor je app in de Google Play Store, met behulp van de reverse DNS notatie ( bijv. com.bedrijfsnaam.appnaam). Eenmaal gepubliceerd kan dit niet worden gewijzigd.

• adaptiveIcon: (Optioneel) Configureert Android's adaptieve iconen (vanaf Android 8.0+):

  • foregroundImage: De voorgrondlaag van je adaptieve icoon
  • backgroundColor: De achtergrondkleur voor je adaptieve icoon

iOS Configuratie

"ios": {
"supportsTablet": true,
"bundleIdentifier": "be.jouwbedrijf.mijngeweldigeapp"
}

• supportsTablet: Boolean die aangeeft of je app iPad-apparaten ondersteunt
• bundleIdentifier: De unieke identifier voor je app in de App Store (vergelijkbaar met Android's package name)

Web Configuratie

"web": {
"favicon": "./assets/favicon.png"
}

• favicon: Specificeert het icoon dat moet worden gebruikt wanneer je app in een webbrowser draait

Asset Management

"assetBundlePatterns": ["**/*"]

Deze configuratie bepaalt welke assets worden gebundeld met je applicatiebuild:

• Het standaard ["**/*"] patroon omvat alle bestanden in de assets directory
• Je kunt dit beperken tot specifieke bestandstypen of subdirectories om je bundelgrootte te optimaliseren

Over-the-Air (OTA) Updates

Met Over-The-Air (OTA) updates kunnen we de applicatie bijwerken zonder een nieuwe versie naar de app stores te hoeven sturen.

"updates": {
"fallbackToCacheTimeout": 0,
"enabled": true
}

• fallbackToCacheTimeout: Tijd (in milliseconden) om te wachten op updates voordat wordt teruggevallen op de gecachete versie
• enabled: Boolean om OTA-updates in of uit te schakelen

Hoe werken OTA Updates?

1. Wanneer we onze app bouwen, wordt een versie gepubliceerd naar Expo
2. Zelfs nadat de app in de app stores staat, kan deze nog steeds bijgewerkt worden via Expo
3. Expo fungeert als een distributiekanaal voor JavaScript-bundles, waardoor de kernfunctionaliteit van de app kan worden bijgewerkt zonder een nieuwe binaire versie uit te brengen

Voordelen van OTA Updates:

• Snellere update-cyclus: geen goedkeuringsproces van app stores nodig
• Direct bugfixes kunnen doorvoeren
• Consistente gebruikerservaring op alle platforms
• Verminderde afhankelijkheid van app store release cyclussen

Geavanceerde configuraties

Naast deze basisinstellingen ondersteunt app.json heel wat geavanceerde configuraties:

• plugins: Voor het toevoegen van native modules van derden
• hooks: Voor het uitvoeren van aangepaste scripts tijdens het build proces
• notification: Voor het configureren van push notificaties
• permissions: Voor het declareren van vereiste apparaatmachtigingen
• locales: Voor het ondersteunen van meerdere talen

Veelvoorkomende problemen en probleemoplossing

• Onjuiste icoonformaten: Als je app-icoon wazig lijkt of wordt afgewezen door app stores, zorg er dan voor dat het aan de formaateisen voldoet
• Splash screen flikkering: Als je splash screen flikkert, controleer dan of de backgroundColor overeenkomt met het initiële scherm van je app
• Bundle identifier conflicten: Als je een foutmelding ontvangt over dubbele bundle identifiers, zorg er dan voor dat je package name/bundle identifier uniek is

Samenvatting

Het app.json bestand is een krachtig configuratiehulpmiddel waarmee je kunt aanpassen hoe je React Native applicatie verschijnt en zich gedraagt op verschillende platforms. De tijd nemen om dit bestand goed te configureren zorgt voor een professionele, consistente ervaring voor je gebruikers.

Raadpleeg de officiële Expo-documentatie voor de meest up-to-date informatie over app.json configuraties, aangezien beschikbare opties kunnen uitbreiden of veranderen met nieuwe releases.