5. Gestures & animaties
5. Gestures & animaties
In deze oefeningenreeks oefen je op:
- Het gebruik van gestures in React Native
Swipen tussen afbeeldingen
Gebruik het fling gebaar om een swipe functionaliteit toe te voegen. Als er ingezoomd is op een afbeelding, moet de gebruiker naar links en rechts kunnen swipen om tussen de afbeeldingen te navigeren.
Afbeeldingen selecteren & verwijderen
Als de gebruiker lang op een afbeelding drukt, moet deze geselecteerd worden en verschijnt de mogelijkheid om de afbeelding te verwijderen in de header.
Je kan gebruik maken van het long press gebaar om dit te implementeren.
Een geselecteerde afbeelding krijgt een border om aan te geven dat deze geselecteerd is. Via de delete knop worden alle geselecteerde afbeeldingen verwijderd, je hoeft de afbeeldingen niet uit de galerij te verwijderen, zo kan de gebruiker de afbeelding nog altijd terugvinden als deze per ongeluk verwijderd werd. Het is dus voldoende om de afbeeldingen uit de MMKV data te verwijderen.
Naast de delete knop verschijnt er ook een cancel knop waarmee alle geselecteerde afbeeldingen gedeselecteerd worden.
Camera sluiten via swipe-gebaar
Breid de CameraUI component uit zodat deze gesloten kan worden door naar boven of onder te swipen. Als de camera meer dan 1/2 van het scherm versleept wordt, moet de UI gesloten worden.
Dit gebeurt echter niet onmiddellijk, als je de camerafeed minstens 1/2 naar boven geswiped hebt, wordt de swipebeweging afgemaakt tot de feed helemaal langs boven verdwenen is. Als je naar beneden swiped, moet de feed doorbewegen tot deze volledig langs onder verdwenen is.
In de documentatie van de withTiming functie, kan je meer informatie vinden over hoe je een callback kunt meegeven die uitgevoerd wordt als de animatie afgehandeld is.
Als je aan scheduleOnRN een functie met parameters doorgeeft, moet je dit als volgt doen.
scheduleOnRN(fn, param1, param2, ...)