Opdracht Contactformulier

Als laatste component in onze applicatie gaan we een pagina opzetten met een formulier. Gebruiker kunnen dit formulier invullen om contact op te nemen. Het uitwerken gaan we doen aan de hand van een opdracht waarbij je zelf aan de slag gaat met de implementatie. Probeer eerst het nodige aan te maken aan de hand van de documentatie van React of React Native voordat je gebruik maakt van generatieve AI. Dit gaat het leerproces alleen maar verbeteren.

Het component instellen

1. Maak een nieuw bestand met de naam Contact.tsx aan in app map.
2. Importeer de benodigde componenten van React Native:
   • React en useState van 'react'
   • StyleSheet, Text, View, TextInput, ScrollView en Pressable van 'react-native'.
3. Maak een functioneel component met de naam ContactPage.
4. Stel de initiële variabelen in (gebruik hiervoor de eerder behandelde useState hook:
   • name (string, intieel leeg)
   • email (string, initieel leeg)
   • phone (string, initieel leeg)
   • message (string, initieel leeg)
   • submitError (boolean, initieel false)
   • submitted (boolean, initieel false)

Logica voor formulierindiening

Maak een functie genaamd postMessage die:

• Controleert of verplichte velden (naam, e-mail, bericht) zijn ingevuld
• submitError op true zet als een verplicht veld leeg is
• submitError op false zet en submitted op true als alle verplichte velden zijn ingevuld

(Het is niet nodig om de daadwerkelijke indiening in deze oefening te implementeren)

De UI bouwen

Maak een formulier met de volgende componenten:

• Een View component waaraan je de container klasse meegeeft voor de stijl
  • Een ScrollView component die het hele formulier bevat
  • Labels (op basis van een Text Component waaraan je de label klasse meegeeft voor de stijl) en tekstinvoervelden ( op basis van een TextInput component waaraan je de input klasse meegeeft voor de stijl) voor:
    • Naam (verplicht)
    • E-mail (verplicht)
    • Telefoon (optioneel)
    • Bericht (verplicht, meerdere regels mogelijk maken)
  • Een verzendknop op basis van het Pressable component waaraan je de button klasse meegeeft voor de stijl
  • Voorwaardelijke foutmeldingen gebaseerd op de submitError status waaraan je de status klasse meegeeft voor de stijl
  • Voorwaardelijk succesbericht dat de formuliergegevens toont op de pagina als submitted waar is waaraan je de required klasse meegeeft voor de stijl van de foutmelding

De stijl

Om geen tijd te verliezen met het opmaken van de componenten kan je hieronder basis stijl terugvinden:

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingLeft: 20,
        paddingRight: 20,
        backgroundColor: '#FFF',
        alignItems: 'flex-start',
        justifyContent: 'flex-start'
    },
    status: {
        paddingTop: 10,
        paddingBottom: 15
    },
    required: {
        fontFamily: 'Poppins',
        paddingTop: 10,
        fontStyle: 'italic'
    },
    label: {
        fontSize: 18,
        fontFamily: 'Poppins',
        paddingTop: 20
    },
    input: {
        height: 40,
        borderColor: '#000',
        borderWidth: 1,
        fontSize: 18,
        fontFamily: 'Poppins',
        width: 250,
        padding: 0
    },
    multi: {
        borderColor: '#000',
        borderWidth: 1,
        padding: 10,
        fontSize: 16,
        fontFamily: 'Poppins',
        width: 300
    },
    button: {
        padding: 12,
        borderRadius: 8,
        alignItems: 'center',
        marginVertical: 10,
        backgroundColor: '#2196F3',
        elevation: 3,
        shadowOffset: {width: 0, height: 2},
        shadowOpacity: 0.3,
        shadowRadius: 3,
    }
})

Extra (optioneel)

• Voorzie basisformuliervalidatie voor het e-mailveld toe om na te gaan of er effectief een e-mailadres werd ingegeven
• Voorzie een resetknop om het formulier leeg te maken
• Voorzie een laadstatus tijdens het verzenden. Dit mag je nabootsen door een Timeout te gebruiken
• Voorzie een tellen voor het aantal karakters in berichtveld