1. Expo & Core Components
1. Expo & Core Components
In deze oefeningenreeks breid je het lesvoorbeeld uit met enkele nieuwe functionaliteiten. Je oefent op:
- Het gebruik van React Native
- Styling via StyleSheets
- De eerste drie lessen van frontend frameworks
Startbestanden
Theme uitbreiden
Tijdens het lesvoorbeeld hebben we enkel een donker en licht thema gedefinieerd, alhoewel dit een goed begin is, is het beter als alles gedefinieerd is in een thema. Breid de ThemeContext uit met minstens twee extra waarden, zowel de padding als de margin moeten bij in de context geplaatst worden.
Je mag hiervoor de defaultwaardes slechts één keer definiëren, de spacing instellingen moeten dus gedefinieerd worden in een apart object en daarna gecombineerd worden met de darkTheme en lightTheme variabelen.
Gebruik de ThemeContext vervolgens om de margin en padding properties in alle componenten aan te passen.
In de oplossingen is een padding van 10 gebruikt en een marge van 5, op enkele plaatsen hebben we in de oplossingen en marge of padding vermenigvuldigd met een bepaalde factor (e.g. 3 * padding) om de layout uit het lesvoorbeeld zo goed mogelijk te dupliceren.
Volgende componenten moeten aangepast worden:
- StyledModal
- StyledTextInput
ActionSheet
Doorheen dit deel van de oefeningen bouw je een ActionSheet component, zoals geïllustreerd in onderstaand screenshot. Dit proces wordt stap per stap beschreven.
IconTextButton
De ActionSheet component bevat verschillende opties, elk van deze opties bevat een icoon en een bijhorend label. Bouw een nieuwe component IconTextButton, hiervoor maak je natuurlijk gebruik van de IconButton component die in de les gebouwd is.
Afhankelijk van hoe je de component bouwt, kan het handig zijn om te weten dat de ComponentProps helper ook gebruikt kan worden om het type van een enkele property op te halen. Onderstaande code definieert bijvoorbeeld een interface waar exact één property in aanwezig is die hetzelfde type heeft als de size property van de LucideIcon component.
interface Example {
icon: ComponentProps<typeof LucideIcon>['size']
}Modaal venster
Om de ActionSheet component te bouwen kan je jezelf baseren op de StyledModal component die in de startbestanden aanwezig is. In tegenstelling tot de StyledModal component, moet de inhoud niet gecentreerd zijn, maar onderaan de pagina staan. De body van de ActionSheet moet mee groeien met de inhoud, er mag dus geen vaste hoogte gedefinieerd worden. Om dit te implementeren kan je gebruik maken van de flexGrow property en de height: 'auto' optie.
Properties
De ActionSheet component heeft minstens drie properties:
- actions: Via deze property kan een array van opties meegegeven worden die vervolgens in de ActionSheet component getoond moeten worden. De "X Cancel" knop moet altijd zichtbaar zijn en moet dus niet doorgegeven worden via deze property.
- onClose: Een functie die uitgevoerd wordt als de gebruiker op de "X Cancel" knop drukt.
- autoClose: Een optionele property, als deze niet meegegeven is, of op true staat, wordt de onClose functie automatisch opgeroepen als de gebruiker een actie selecteert. Als de optie op false staat, wordt de onClose functie enkel opgeroepen als de gebruiker op "X Cancel" klikt.
ActionSheet tonen
Vervang tenslotte het checkmark icoon in de ToDoItem component met het ellipsis-vertical icoon. Als op dit nieuwe icoon gedrukt wordt moet een ActionSheet verschijnen en kan de gebruiker kiezen om de status van een taak aan te passen, de taak te verwijderen, of de ActionSheet terug te sluiten.
Header aanpassen
Als er verschillende iconen toegevoegd worden aan de children property van de Header component, worden deze als volgt getoond.
Los dit visuele probleem op zodat deze iconen naast elkaar komen te staan (het filter icoon uit IonIcons wordt gebruikt in onderstaand screenshot).
Side menu
Het nieuwe filter icoon moet een side menu openen. Schrijf hiervoor een nieuwe component die onderstaande structuur heeft. Via de position property, kan het menu links of rechts geplaatst worden, standaard staat het menu links. Via de "X" knop kan het menu terug gesloten worden (je kan de Header component gebruiken om dit icoon op de juiste plaats te zetten).
Om de achtergrond van het transparante deel in te stellen, kan je gebruik maken van de hex2rgba functie die in de startbestanden te vinden is.
Filters
React Native bevat geen checkbox component, er is wel een switch component, maar dit is niet in alle situaties bruikbaar. Als we een checkbox nodig hebben, moeten we die dus zelf bouwen, via een combinatie van View en Pressable. We kunnen natuurlijk ook een third-party component gebruiken.
Installeer de react-native-bouncy-checkbox component en gebruik deze om een menu te bouwen waarmee de getoonde taken gefilterd kunnen worden.
De verschillende checkboxes moeten via de children property doorgegeven worden aan het de SideMenu component.
Om onderstaande lay-out na te bouwen, moet je enkele van de default styles en waarden van de checkbox overschrijven, ga in de documentatie op zoek naar de nodige properties.