Web Expert 2

Appearance

De App voorbereiden voor de App Stores ​

Van zodra je een functioneel prototype van je React Native app hebt gebouwd, kan je beginnen aan de voorbereiding om je applicatie via de Apple App Store en Google Play Store op de markt te brengen. Hoewel Expo een handige hosting-optie biedt, vergroot het indienen bij de officiële app stores je bereik aanzienlijk.

React Native apps gedragen zich over het algemeen als native apps, wat platformspecifieke compatibiliteitsproblemen vermindert. Er zijn wel verschillende optimalisatiestappen vereist om je app klaar te maken voor het indienen bij een store.

Inhoud

Essentiële App Assets en Configuratie ​

App Iconen ​

Het icoon van je app is de belangrijkste visuele identificatie en speelt een cruciale rol in gebruikersherkenning en branding. Zowel iOS als Android hebben specifieke vereisten voor app-iconen:

Algemene Best practices voor iconen:

  • Gebruik PNG-formaat voor de beste kwaliteit
  • Zorg ervoor dat je icoon duidelijk is, zelfs wanneer het verkleind wordt
  • Test hoe je icoon eruitziet op verschillende apparaten

iOS Icoon Vereisten

  • Afmetingen: 1024x1024px (extra formaten aanbevolen)
  • Vierkante afbeeldingen zonder transparantie
  • "Safe zone" overwegingen (belangrijke elementen moeten binnen het centrale gebied vallen)

Android Icoon Vereisten

Code Voorbeeld: App Icoon Configureren in app.json

json
{
  "expo": {
    "name": "Je App Naam",
    "icon": "./assets/icon.png",
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon-foreground.png",
        "backgroundImage": "./assets/adaptive-icon-background.png"
      }
    }
  }
}

Best Practice: Gebruik de Expo documentatie over app-iconen om ervoor te zorgen dat je assets aan alle specificaties voldoen. Tools zoals App Icon Generator kunnen helpen bij het maken van alle vereiste formaten.

Splash Screens ​

Het splash screen is het eerste visuele element dat gebruikers zien bij het opstarten van je app, wat onmiddellijke merkherkenning en een soepele laadervaring biedt:

Belangrijke overwegingen:

  • Moet eenvoudig en visueel aantrekkelijk zijn en aansluiten bij je merk
  • Moet responsief zijn voor verschillende schermformaten en oriëntaties
  • Moet voor een gepaste duur worden weergegeven (niet te lang of te kort)

Code Voorbeeld: Splash Screen Configureren in app.json

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

Bundle Identifiers en Versienummers ​

Elke app vereist unieke identifiers en een correct versiebeheer:

iOS Bundle Identifier:

  • Formaat: omgekeerde domeinnotatie (bijv. be.jouwbedrijf.jouwapp)
  • Moet uniek zijn in de gehele App Store
  • Kan niet worden gewijzigd na de eerste indiening

Android Package Name:

  • Vergelijkbaar formaat als iOS (bijv. be.jouwbedrijf.jouwapp)
  • Moet uniek zijn in Google Play
  • Kan niet worden gewijzigd na publicatie

Versienummers:

  • version: Zichtbaar voor gebruikers (bijv. "1.0.0")
  • buildNumber (iOS) en versionCode (Android): Interne volgnummers die moeten toenemen bij elke update

Code Voorbeeld: Identifiers en Versies Configureren

json
{
  "expo": {
    "version": "1.0.0",
    "ios": {
      "bundleIdentifier": "be.jouwbedrijf.jouwapp",
      "buildNumber": "1"
    },
    "android": {
      "package": "be.jouwbedrijf.jouwapp",
      "versionCode": 1
    }
  }
}

Cross-Platform Testen en User Interface Overwegingen ​

Apparaat Formaten ​

Je app moet worden getest op meerdere apparaattypes om een consistente gebruikerservaring te garanderen:

  • Smartphones (verschillende schermformaten)
  • Tablets en iPads (grotere schermen met verschillende beeldverhoudingen)
  • Verschillende OS-versies
  • Diverse apparaatmogelijkheden (camera, GPS, etc.)

Test Tip: Gebruik Expo's device preview functie of test op fysieke apparaten om te verifiëren dat je layout correct aanpast op verschillende schermformaten.

De statusbalk ​

De statusbalk kan de layout van je app verstoren als deze niet correct wordt afgehandeld:

jsx
import {StatusBar} from 'expo-status-bar';

export default function App() {
    return (
        <View style={styles.container}>
            {/* Ingesteld op 'auto' om licht of donker te gebruiken op basis van scherminhoud */}
            <StatusBar style="auto"/>
            {/* App inhoud */}
        </View>
    );
}

Platformspecifieke UI Richtlijnen ​

Voor de beste gebruikerservaring en om de kansen op app store acceptatie te vergroten:

iOS Design Principes:

Android Design Principes:

  • Volg Material Design richtlijnen
  • Implementeer platform navigatiepatronen (bijv. terug-knop gedrag)
  • Gebruik geschikte Android-componenten

Implementatie Tip: Gebruik Platformspecifieke code wanneer nodig:

jsx
import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
    padding: Platform.OS === 'android' ? 16 : 15,
  }
});

Privacybeleid en Permissies ​

Privacybeleid Vereisten ​

Een privacybeleid is essentieel voor app store indiening:

  • iOS: Verplicht voor alle apps
  • Android: Steeds meer vereist, vooral voor apps die gevoelige permissies vragen

Je privacybeleid moet duidelijk uitleggen:

  • Welke gegevens je app verzamelt
  • Hoe de gegevens worden gebruikt
  • Hoe gebruikers om gegevensverwijdering kunnen vragen
  • Welke externe diensten toegang kunnen hebben tot gebruikersgegevens

Implementatie Tip: Neem een link naar het privacybeleid op in de instellingen of de about sectie van je app, en verwijs ernaar in je app store vermelding.

Afhandelen van Permissies ​

Permissiebeheer is cruciaal voor zowel gebruikerservaring als app store goedkeuring:

iOS Permissies:

  • Vereisen expliciete toestemming van de gebruiker voor camera, locatie, etc.
  • Hebben duidelijke uitleg nodig in het info.plist bestand

Android Permissies:

  • Expo bevat standaard veel permissies
  • Kan afwijzing veroorzaken indien niet correct gerechtvaardigd

Voorbeeld voor het beperken van Android Permissies:

json
{
  "expo": {
    "android": {
      "permissions": [
        "CAMERA",
        "ACCESS_FINE_LOCATION"
      ]
    }
  }
}

IDFA (Identifier for Advertisers) ​

Bij het indienen bij de App Store word je gevraagd naar IDFA-gebruik:

  • Expo bevat standaard IDFA-functionaliteit
  • Apple vereist uitleg over hoe IDFA wordt gebruikt
  • Je moet App Tracking Transparency implementeren als je IDFA gebruikt

Veelvoorkomende Afwijzingsredenen en hoe deze te vermijden ​

1. App Crashes en Prestatieproblemen ​

Preventiestrategieën:

  • Implementeer uitgebreide foutafhandeling
  • Test op echte apparaten, niet alleen op simulators
  • Test randgevallen (slechte connectiviteit, weinig opslagruimte)
  • Implementeer correct state management
  • Gebruik tools voor prestatiemonitoring

2. Overmatige of Ongerechtvaardigde Permissies ​

Preventiestrategieën:

  • Vraag alleen permissies die je app echt nodig heeft
  • Leg duidelijk uit waarom elke permissie nodig is
  • Configureer permissies correct in het app.json bestand
  • Implementeer correcte permissie-aanvraaglogica met duidelijke gebruikersinformatie

3. Gebroken Links en Functionaliteit ​

Preventiestrategieën:

  • Verifieer dat alle links werken vóór indiening
  • Test offline functionaliteit
  • Zorg ervoor dat backend services betrouwbaar zijn
  • Implementeer correcte foutstatussen voor API-fouten

4. Ondermaatse Gebruikersinterface ​

Preventiestrategieën:

  • Volg platformspecifieke ontwerprichtlijnen
  • Zorg voor responsieve layouts op alle apparaten
  • Implementeer correcte toegankelijkheidsfuncties
  • Gebruik assets en typografie van hoge kwaliteit

5. Misleidende App Beschrijving of Functionaliteit ​

Preventiestrategieën:

  • Zorg ervoor dat app store screenshots de app nauwkeurig weergeven
  • Claim geen functies die je app niet heeft
  • Wees duidelijk over in-app aankopen of beperkingen
  • Geef nauwkeurige app-categorie en leeftijdsbeoordelingen

Volgende Stappen: Configureren van app.json ​

Het app.json bestand is cruciaal voor het configureren van je app voor store indiening. In het volgende deel gaan we dieper in op dit bestand.