Een eerste react native project

Inhoud

• React Native code
• Componenten in React Native
  • Soorten Componenten
• Een React Native applicatie opzetten
  • React Native Applicatie Installeren en Uitvoeren
  • De IOS Simulater (macOS only)
• Android Emulator
• Een project opzetten
• De Expo SDK

React Native code

Hieronder kan je een voorbeeld zien van React Native code.

import { StyleSheet, Text, View } from 'react-native'

export default function App() {
  return (
          <View style={styles.container}>
            <Text>React Native gebruikt de React Library</Text>
            <Text>
              Maak gebruik van native componenten zoals 'View' en 'Text',
              in plaats van web componenten zoals 'div' en 'span'.
            </Text>
          </View>
  )
}

Uit het voorbeeld kunnen we afleiden dat het volledig in JavaScript is geschreven, gebruik makend van de React library. Het component App stuurt JSX terug, die wordt weergegeven op de mobiele app.

React Native gebruikt maakt gebruik van React, met dat verschil dat er geen divs en spans gebruikt worden. In plaats daarvan zijn er verschillende soorten componenten voorhanden, bijvoorbeeld Text en View. React gebruikt webcomponenten, terwijl React Native native mobiele componenten gebruikt. Dit zijn wrappers rond native componenten en werken voor zowel iOS als Android.

Je schrijft dus native code onder de motorkap. Maar als React Native ontwikkelaar hoef je de native code niet te kennen. Je schrijft ze gewoon allemaal met JavaScript en React. In tegenstelling tot traditionele native apps hoef je niet te coderen in Swift of Objective-C voor iOS en Java of Kotlin voor Android. Er kunnen momenten zijn waarop je native code moet aanraken voor wat aanpassingen. Maar meestal wordt ongeveer 90% van je code gedeeld tussen iOS en Android. Vergeet niet dat dit geen mobiele webapp of hybride app is. Je bouwt een echte native mobiele app die niet te onderscheiden is van een app gebouwd met Swift, Objective-C of Java.

Omdat React Native een UI framework is, speelt styling een zeer belangrijke rol in React Native. Je kunt in het voorbeeld zien dat we een component genaamd StyleSheet aanroepen dat wordt voorzien om stijlen te creëren. React Native gebruikt geen CSS of speciale taal. In plaats daarvan kun je al je stijlen maken met gewoon JavaScript. Dit is een interessante benadering en een soort mentaliteitsverandering voor de meesten van jullie. De stijlnamen en -waarden komen overeen met CSS, en er kunnen enkele subtiele verschillen zijn. Merk hier ook op dat alles is gedefinieerd in camelCase. Voor lay-out opties gebruikt React Native flexbox, en elk component in React Native kan ook zijn eigen bijbehorende stylesheet hebben. Afhankelijk van je platform, of het nu een iOS- of een Android-toestel is, heb je soms extra aangepaste styling nodig, en React Native biedt een platformspecifieke styling voor die situaties.

Componenten in React Native

Componenten zijn de bouwstenen van zowel React als React Native, en ze vertegenwoordigen kleine stukjes code die samen een geheel vormen. Je kunt ze zien als bouwstenen met hun eigen functionaliteit of gebruikersinterface (UI).

Soorten Componenten

1. Kerncomponenten (Core Components) De kerncomponenten zijn de componenten die standaard worden meegeleverd met React Native. Wanneer je React Native installeert, krijg je deze componenten direct beschikbaar. Voorbeelden van kerncomponenten zijn:

   • View
   • Text
   • Image
   • ScrollView
   • FlatList

   Deze componenten worden vertaald naar native weergaven op zowel iOS als Android.

2. Community Componenten Naast de kerncomponenten zijn er ook community componenten. Dit zijn componenten die door derden zijn ontwikkeld en beschikbaar zijn in de React Native community of andere open source repositories. Voorbeelden van community componenten zijn:

   • React Native Camera
   • React Native Video
   • React Native Audio
   • Geolocatie
   • Vingerafdruk

3. Eigen Componenten Met React Native heb je ook de mogelijkheid om je eigen native componenten te maken. Als je een component wilt aanpassen, kun je je eigen versie ervan maken voor zowel iOS als Android.

Een React Native applicatie opzetten

React Native Applicatie Installeren en Uitvoeren

Tot nu toe hebben we geleerd wat React Native is. Nu ben je waarschijnlijk nieuwsgierig hoe je een React Native-applicatie op je computer kunt draaien. Er zijn een paar benaderingen die je kunt volgen.

Installatiemethoden

Als je de React Native installatiegids bekijkt, zul je zien dat er twee methoden zijn om je React Native applicatie te installeren en uit te voeren:

1. Expo Go Quickstart
2. React Native CLI Quickstart

Dit zijn twee totaal verschillende manieren om je React Native applicatie te bouwen.

• Expo Go Quickstart: Dit is de benadering die wij in de cursus gaan gebruiken. Je hoeft dan geen andere tools te installeren zoals Android Studio of Xcode voor iOS. In plaats daarvan is alles meteen beschikbaar met Expo.

• React Native CLI Quickstart: Als je graag wat meer controle hebt over je applicatie en al bekend bent met mobiele ontwikkeling, is het waarschijnlijk beter om React Native CLI te installeren zonder Expo. Hier krijg je meer controle over je native code. Je moet dan ook wel Xcode en Android Studio installeren.

Expo

Om een applicatie op te zetten met Expo zorg je ervoor dat je eerst de laatste LTS node.js versie installeert.

Maak ook een account aan op expo.io zodat je de builds van je project kan opvolgen.

De IOS Simulater (macOS only)

Bij het bouwen van iOS-apps met Expo zijn er enkele beperkingen waar je tegenaan kunt lopen. De belangrijkste hiervan, is dat je alleen iOS-apps kunt ontwikkelen met een Mac. Voor degenen onder jullie die een Mac gebruiken, is het heel eenvoudig om de iOS Simulator te configureren.

iOS Simulator Instellen

Als je een Mac gebruikt, moet je naar de Mac App Store gaan en Xcode zoeken. Xcode bevat veel van de tools die je nodig hebt om je app lokaal te bouwen, maar dat is niet de reden waarom je het moet installeren. We zullen de app bouwen met de Expo-service, dus Xcode zelf zal niet worden gebruikt. De enige reden waarom we Xcode installeren, is om toegang te krijgen tot de Simulator.

Volg deze stappen om de iOS Simulator in te stellen:

1. Installeer Xcode:

   • Ga naar de Mac App Store en download Xcode.
   • Open Xcode en ga naar Preferences in het menu.
   • In het Locations paneel, selecteer je de meest recente versie in de drop-down voor de command-line tools. Dit zal de benodigde tools installeren om de Simulator te gebruiken.

2. Start de iOS Simulator:

   • Wanneer je de app uitvoert met de Expo command-line interface, kun je op I drukken in de command line om de iOS Simulator te starten.
   • Je kunt ook kiezen voor Run on iOS Simulator vanuit de browser-gebaseerde UI.

Android Emulator

De installatie van de Android Emulator is beschikbaar op macOS, Linux of Windows. Bij iOS noemt het virtuele apparaat een simulator, terwijl het bij Android een emulator is. Dit is gebaseerd op de naamgevingsstandaarden van de respectieve apparaten.

Installatie van de Android Emulator

Volg deze stappen om de Android Emulator te installeren:

1. Download en installeer Android Studio:

   • Download de nieuwste versie van Android Studio.
   • Open Android Studio en klik op het More Actions menu en selecteer SDK Manager.
   • Selecteer in de linker kolom Android SDK.
   • Kies in het scherm dat verschijnt de SDK Tools. Zorg ervoor dat je de Android SDK Build Tools hebt geïnstalleerd. Als dat niet het geval is, selecteer deze dan en zorg ervoor dat je de meest recente versie hebt. Als de status "update available" aangeeft, selecteer deze dan ook.

2. Kopieer de Android SDK Locatie:

   • Voordat je op Apply klikt, kopieer je de Android SDK Locatie.
   • Klik op Apply als je de build tools moet installeren of updaten. Anders klik je op OK.

3. Voeg de Android SDK Locatie toe aan de omgevingsvariabelen:

   • Op een Windows-pc doe je dit in de Systeemeigenschappen. Zoek naar omgevingsvariabelen in Windows 10.
   • Klik op het tabblad Geavanceerd en vervolgens op Omgevingsvariabelen.
   • Maak eerst een variabele voor ANDROID_SDK_ROOT en geef het gekopieerde pad mee als waarde.
   • Voeg daarna de map platform-tools (vanuit het gekopieerde pad) toe aan de padvariabele. Dit zorgt ervoor dat je de Android-tools kunt gebruiken, ongeacht waar je je bevindt in de mapstructuur van je machine.

4. Test de configuratie:

   • Open een Command Prompt en voer adb uit. Als je een lijst met opties voor adb ziet, heb je de variabelen correct geconfigureerd.

5. Maak een Android Virtual Device (AVD):

   • Ga terug naar Android Studio, klik op het More Actions menu en selecteer Virtual Device Manager.
   • Klik op de + knop om een nieuw apparaat te maken en kies een apparaat dat je wilt. Als je problemen ondervindt met de meer geavanceerde apparaten bovenaan, kun je een van de meer generieke apparaten onderaan kiezen.
   • Klik op Next en kies de versie van Android die op je apparaat is geïnstalleerd. Als je de gewenste versie niet hebt, kun je deze hier ook downloaden.
   • Klik op Next, geef je apparaat een naam en verifieer de instellingen. Er zijn ook geavanceerde instellingen om de camera's van het apparaat te emuleren, zoals het gebruik van de webcam van de computer.
   • Klik op Finish om het instellen van de emulator te voltooien.

Begrijp dat de enige reden waarom we Android Studio hebben geïnstalleerd, is om toegang te krijgen tot de Android Emulator. We hebben de Android-ontwikkeltools niet nodig om de app te bouwen, aangezien we Expo zullen gebruiken.

Een project opzetten

1. Open een Command Prompt en navigeer naar de map waar je jouw eerste project in wil aanmaken.

2. Maak een nieuwe React Native applicatie met behulp van Expo:

   npx create-expo-app@latest example-app

   Dit commando maakt je Expo applicatie voor React Native en installeert alle benodigde pakketten. Dit kan een paar seconden duren.

3. Start het project met het volgende commando

   npx expo start

   Je krijgt nu een QR-code te zien die je kan inscannen met je smartphone op voorwaarde dat je de applicatie Expo Go hebt geïnstalleerd.

   Je kan er ook voor kiezen om de app te openen met een Emulator of Simulator. Hiervoor kan je de opties gebruiken die getoond worden. Opgelet, zorg ervoor dat jouw emulator aanstaat en werkt. Door de app hier te openen zal Expo Go op dit toestel geïnstalleerd worden.

4. Open het project met een editor om te zien wat je hebt:

   • app/index.tsx: Dit is het hoofdbestand van je applicatie. Het bevat een React-component met de naam App en gebruikt React Native-componenten zoals Text en View.
   • node_modules: Hierin staan alle geïnstalleerde pakketten.
   • assets: Hier kun je afbeeldingen, lettertypen en andere soorten assets toevoegen.
   • package.json: Dit bestand bevat de afhankelijkheden van je project, zoals expo, expo-status-bar, react, en react-native.

5. Bekijk het app/index.tsx bestand:

   • Het bevat een eenvoudig welkomstbericht.

6. Maak wijzigingen en zie ze direct:

• Pas de tekst in app/index.tsx aan naar bijvoorbeeld "Welkom in mijn cursus over React Native" en sla het bestand op.
• De emulator zal de wijzigingen direct weergeven dankzij de snelle verversingsfunctie van React Native.

Nu weet je hoe je een React Native-applicatie instelt, installeert en uitvoert met behulp van Expo op je lokale computer.

De Expo SDK

Webgebaseerde frameworks die mobiele projecten genereren, moeten een manier hebben om te communiceren met de hardware van het apparaat. In het geval van Expo wordt dit aangepakt door de modules die beschikbaar zijn in de SDK (Software Development Kit).

Hardwaremodules

• Accelerometer: Hiermee krijg je toegang tot de sensoren die beweging of trillingen detecteren.
• Camera: Hiermee kunnen ontwikkelaars toegang krijgen tot de ingebouwde camera van het apparaat, zowel de voor- als achtercamera. Naast het maken van foto's kun je hiermee ook video's opnemen.
• Audio: Hiermee kun je audio opnemen en afspelen binnen je app.

Softwaremodules

Naast de hardwaremodules werkt de SDK ook met de ingebouwde software van het apparaat:

• SMS: Hiermee krijg je toegang tot het ingebouwde berichtensysteem van het apparaat. Je kunt een array van adressen en een bericht doorgeven aan SMS vanuit je app.
• Calendar API: Hiermee kun je communiceren met de agenda van het apparaat.
• Web Browser: Hiermee kun je webpagina's openen binnen je app.

Gegevensopslag

Bij het bouwen van mobiele apps kan het nodig zijn om gegevens op te slaan binnen je app:

• AsyncStorage: Voor eenvoudige gegevens biedt AsyncStorage persistente key-value opslag.
• SQLite: Voor complexere gegevens is SQLite inbegrepen. Dit biedt een persistente database die kan worden geraadpleegd met de web SQL-stijl syntax.

Integratie met Derden

Naast de API's die Expo biedt om met het apparaat te werken, bieden ze ook een select aantal modules die werken met andere diensten van derden:

• Google: Integreert Google-authenticatie in je Expo-apps.
• Facebook: Hiermee kun je inloggen via Facebook integreren in je app.

Dit zijn slechts enkele van de API's die beschikbaar zijn in Expo. Bekijk de documentatie om alles te zien wat beschikbaar is in Expo.