2. Expo Router

Tijdens deze les bouw je verder aan het uitgewerkte lesvoorbeeld en oefen je op

• Routing via Expo Router
• Het gebruiken van third party navigators

Startbestanden

Top Tabs

Momenteel wordt er op de tasks pagina gebruik gemaakt van drie knoppen bovenaan de pagina waarmee de gebruiker kan navigeren tussen afgewerkte, geplande en alle taken. Het is interessanter om de taken te integreren in een tab bar bovenaan de pagina.

Expo Router bevat standaard geen ondersteuning voor top tabs, maar omdat de library gebouwd is bovenop de React Navigation kunnen we de Material Top Tabs Navigator die voor React Navigation geschreven is gebruiken. Ga in de documentatie van de top tabs op zoek naar de commando's om deze component te installeren.^[1]

Voeg onderstaande code toe die een navigator aanmaakt die op dezelfde manier werkt als de navigators die we in de les besproken hebben.

import {
    createMaterialTopTabNavigator,
    MaterialTopTabNavigationEventMap,
    MaterialTopTabNavigationOptions,
} from '@react-navigation/material-top-tabs'
import {ParamListBase, TabNavigationState} from '@react-navigation/native'
import {withLayoutContext} from 'expo-router'

const Navigator = createMaterialTopTabNavigator().Navigator

const TopTabs = withLayoutContext<
    MaterialTopTabNavigationOptions,
    typeof Navigator,
    TabNavigationState<ParamListBase>,
    MaterialTopTabNavigationEventMap
>(Navigator)

export default TopTabs

Gebruik de nieuwe navigator tenslotte om onderstaande layout te bouwen. Probeer zo veel mogelijk zelf te doen, gebruik indien nodig onderstaande hints.

Implementatie hints

• Je moet een nieuwe subroute maken voor de drie tabs, zo blijven de create en edit routes bestaan in een stack navigator. Je kan hier eventueel gebruik maken van routing groups (zie backend les 1 voor meer info).
• Je kan eventueel gebruik maken van de Redirect component uit expo-router.
• Je moet de create knop verhuizen naar een ander navigator screen
• Je kan de headerShadowVisible property gebruiken om de schaduw van een header te verwijderen (zodat header en tabs één geheel zijn).

Figuur 0: Top tabs

useLabels

Schrijf een nieuwe hook waarmee labels beheerd kunnen worden, baseer je hiervoor op de useTasks hook die je in de oefeningen van les 1 gebouwd hebt. De labels worden gebruikt om de taken te categoriseren. Deze nieuwe hook moet alle CRUD-functionaliteiten implementeren voor de labels.

Een label heeft, naast een id, twee eigenschappen. Via het name attribuut kan de naam van een label bewaard worden en via het color attribuut wordt de kleur die aan het label gekoppeld is bewaard.

Als defaultwaarde kan je onderstaande data gebruiken.

[
    {id: randomUUID(), name: 'Work', color: '#625b71'},
    {id: randomUUID(), name: 'School', color: '#9a82db'},
    {id: randomUUID(), name: 'Urgent', color: '#e46962'},
]

Breid de ITask interface uit zodat er één of meerdere labels gelinkt kunnen worden aan een taak. Natuurlijk moeten de hooks ondersteuning bieden om labels toe te voegen en te verwijderen van een taak.

Labels pagina

Gebruik de useLabels hook om onderstaand overzicht te bouwen. Elk label wordt gekleurd in de bijhorende kleur, via de delete kan een label verwijderd kunnen worden.

Voeg in de header van de pagina alvast een knop toe waarmee een nieuw modaal venster geopend kan worden om een nieuw label aan te maken.

Figuur 0: Overzicht van de labels

Labels toevoegen

Bouw een nieuw modaal venster dat vanuit het overzicht van de labels pagina geopend kan worden en gebruikt kan worden om een nieuw label aan te maken en onderstaande lay-out heeft (lees verder onder het screenshot).

Figuur 0: Modaal venster voor het aanmaken van een nieuw label

Om het venster te bouwen is gebruik gemaakt van de ColorPicker en TextButton component die je vindt op GitPub. Deze component maakt gebruikt van de reanimated-color-picker library. Deze library moet nog geïnstalleerd worden en maakt gebruik van gestures en animations. Tijdens de installatie van deze libraries moet je babel.config.js aanpassen. Dit bestand wordt niet meer standaard aangemaakt in een Expo project, je zal dit dus zelf moeten doen. Een minimaal voorbeeld in te vinden in de Expo documentatie.

Gestures en animations worden volgende les besproken, je moet de code in de ColorPicker component dus nog niet begrijpen.

Onderstaande video illustreert de volledige werking van de labels pagina.

Figuur 0: Labels pagina

---

1. Merk op dat één van de dependencies react-native-pager-view is. Deze library kan gebruikt worden zonder de material-top-tab-navigator en is zeer handig als je een swipe-view wilt implementeren. ↩︎