De chat applicatie

Inhoud

• Een nieuw React Native project

Take The Wheel

Voer de volgende stappen uit om jouw app op te zetten.

Een nieuw React Native project

Maak een nieuw React Native project aan met Expo. Zorg ervoor dat je een 'leeg' project aanmaakt. Test uit of je project correct werd aangemaakt door het op te starten.

Voorzie vervolgens:

• Een Header
• Een Footer
• Een startpagina

Zodat je ongeveer het volgende resultaat bekomt:

De navigatie moet momenteel nog niet werken. Enkel de startpagina moet getoond kunnen worden.

Uitgewerkte Code Header

import {StyleSheet, View, Image, Text} from 'react-native';
import {useRouter} from 'expo-router';
import {FontAwesome6} from '@expo/vector-icons';
import logo from '../assets/logo.png';

export default function Header() {
    const router = useRouter();
    let userDisplay = <FontAwesome6 name="user-circle" size={30} color="#00bda5"/>;

    return (
        <View style={styles.header}>
            <Image
                source={logo}
                style={styles.logoStyle}
            />
            <Text style={styles.menu}>
                Web Expert
            </Text>
            <Text style={styles.menu}>
                Chat
            </Text>
            <Text
                style={styles.menu}
            >
                Registreer
            </Text>
            <Text
                style={styles.menu}
            >
                {userDisplay}
            </Text>
        </View>
    );
};

const styles = StyleSheet.create({
    header: {
        alignItems: 'center',
        backgroundColor: '#212121',
        height: 120,
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingHorizontal: 5
    },
    logoStyle: {
        height: 50,
        width: 50,
        resizeMode: 'stretch'
    },
    menu: {
        color: '#00bda5',
        fontSize: 16,
        alignSelf: 'center',
        paddingHorizontal: 5
    }
});

Uitgewerkte Code Footer

import {StyleSheet, View, Image, Text, Dimensions, Platform} from 'react-native';
import logo from '../assets/logo.png';

const windowDimensions = Dimensions.get('window');
const WinHeight = windowDimensions.height;

export default function Footer() {
    return (
        <View style={styles.footer}>
            <Image
                source={logo}
                style={styles.smallLogoStyle}
            />
            <Text style={styles.menu}>
                Over ons
            </Text>
            <Text style={styles.menu}>
                PXL
            </Text>
            <Text style={styles.menu}>
                Opleidingen
            </Text>
        </View>
    );
};

const styles = StyleSheet.create({
    footer: {
        alignItems: 'center',
        justifyContent: 'center',
        borderWidth: 1,
        height: 50,
        flexDirection: 'row',
        width: '100%',
        ...Platform.select({
            android: {
                position: 'absolute',
                top: WinHeight - 50
            },
            ios: {
                position: 'absolute',
                top: WinHeight - 50
            },
            default: {
                position: 'relative',
                bottom: 0
            },
        })
    },
    smallLogoStyle: {
        height: 30,
        width: 30,
        ...Platform.select({
            android: {
                marginLeft: 23,
            },
            ios: {
                marginLeft: 23,
            },
            default: {
                left: '-35%'
            },
        })
    },
    menu: {
        paddingLeft: 25,
        paddingRight: 25,
    }
});

Voor de opbouw van het project heb ik gekozen om een expo-router project aan te maken. Je zal zien dat de namen van templates en de projectstructuur iets of wat afwijkt van het eerder gebouwde project. De expo routerzal namelijk instaan voor de routering. Je moet dan alleen rekening houden dat structuur van je project voldoet aan de vereisten van de expo router. Meer informatie over deze structuur kan je altijd terugvinden in de documentatie.

Uitgewerkte Code _layout template

import {Slot} from 'expo-router';
import {SafeAreaView} from 'react-native-safe-area-context';
import Header from '../components/Header';
import Footer from '../components/Footer';

export default function Layout() {
    return (
        <SafeAreaView>
            <Header/>
            <Slot/>
            <Footer/>
        </SafeAreaView>
    );
};

Uitgewerkte Code index template (startpagina)

import {View, Image, StyleSheet} from 'react-native';
import banner from '../assets/mobileBanner.jpg';

export default function Home() {
    return (
        <View>
            <Image
                source={banner}
                style={styles.banner}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    banner: {
        width: '100%',
        height: 300,
        resizeMode: 'stretch'
    }
});