Into React Native

2 weken geleden • 2 minuten lezen

Na een uitgebreide proof of proncept neer te zetten voor mijn eerste Laravel project bij Artcore Society, mocht ik beginnen aan de bijhorende native app van de applicatie.

Dit vond ik een super leuke afwisseling bij de uitwerking van de API services, maar ook challenging, aangezien de lessen van Koen over React Native nu toch al weer even geleden waren!

Ngrok

Om mijn API services te laten communiceren met de nieuwe app in React Native, moest ik even nadenken. Steeds wanneer de fetch API binnen React Native aangesproken werd, kreeg ik direct een networking failed error te zien.

Uiteindelijk realiseerde ik dat mijn iPhone waarop de app draaide, geen verbinding kon maken met de homestead server op mijn laptop. Hiervoor dacht ik terug aan Ngrok, die ik vorig jaar tijdens Webtech leerde kennen met een workshop van Bibi – één van mijn klasgenoten en collega’s bij Designosource!

Na ngrok binnen te halen binnen mijn Laravel project, startte ik de tunnel met een link naar mijn vagrant boxmet homestead en de connectie slaagde! Mijn native app kon communiceren met mijn Laravel API services!

Maps

Om met de Google Maps API te werken binnen de native app heb ik kennisgemaakt met react-native-maps, een handige abstractielaag over zowel Google Maps voor Android en Apple Maps voor iOS, handig!

Sessies

Ook nog een interessante nieuwigheid was het verwerken van mijn Laravel-app sessie naar native. Hiervoor heb ik een API service geschreven die met een POST-request over een HTTPS verbinding de gebruiker kan inloggen, waarmee de sessie dan globaal lokaal wordt opgeslagen in AsyncStorage