file structure update

Native/AlfaPrentice/.expo-shared/README.md

@@ -0,0 +1,11 @@
+> Why do I have a folder named ".expo-shared" in my project?
+
+The ".expo-shared" folder is created when running commands that produce state that is intended to be shared with all developers on the project. For example, "npx expo-optimize".
+
+> What does the "assets.json" file contain?
+
+The "assets.json" file describes the assets that have been optimized through "expo-optimize" and do not need to be processed again.
+
+> Should I commit the ".expo-shared" folder?
+
+Yes, you should share the ".expo-shared" folder with your collaborators.

Native/AlfaPrentice/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

Native/AlfaPrentice/.gitignore

@@ -0,0 +1,13 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

Native/AlfaPrentice/App.js

@@ -0,0 +1,10 @@
+import { StatusBar } from 'expo-status-bar';
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Routes from "./App/index";
+
+export default function App() {
+  return (
+      <Routes />
+  );
+}

Native/AlfaPrentice/App/Cards/CompanyResultCard.js

@@ -0,0 +1,100 @@
+//Modules
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Component, Button } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+//Components
+
+function Navigate(props) {
+    const navigation = useNavigation();
+    return(
+        <TouchableOpacity style={Styles.Btn} onPress = {() => navigation.navigate('Companyprofile', { CompanyDetails: props.Details })}>
+            <Text style={Styles.white}>Bekijk bedrijf</Text>
+        </TouchableOpacity>
+    )
+}
+
+class CompanyResultCard extends React.Component{
+    constructor (props) {
+        super(props);
+        this.state = {
+
+        }
+        
+    }
+    
+
+    render() {
+        
+        return (
+            <ScrollView>
+            <View style={Styles.ResultCard}>
+                <View style={Styles.Row}>
+                    <Text style={Styles.HeroHeading}>Bedrijfsnaam 1</Text>
+                   <Navigate Details = {this.props.details}/>
+                </View>
+                <View style={Styles.ContentRow}>
+                    <Text>Locatie: Groningen</Text>
+                    <Text>Opleding: AO</Text>
+                </View>
+                <View style={Styles.ContentRowRa}>
+                    <Text>Beschikbaarheid: 2 plekken over</Text>
+                </View>
+                
+            </View>
+            <View style={Styles.HR}/>
+            </ScrollView>
+        )
+    }
+}
+
+
+
+const Styles = StyleSheet.create ({
+    ResultCard: {
+        padding: 30,
+    },
+    HeroHeading: {
+        color: "#DE0000",
+        fontSize: 20,
+    },
+    Btn: {
+        backgroundColor: '#DE0000',
+        paddingVertical: 10,
+        paddingHorizontal: 15,
+        borderRadius: 5,
+       
+    },
+    white: {
+        color: '#ffffff',
+    },
+    Row: {
+        display: 'flex',
+        flexDirection: 'row',
+        width: '100%',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between'
+    },
+    ContentRow: {
+        display: 'flex',
+        flexDirection: 'row',
+        width: '100%',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+        marginTop: 15,
+    },
+    ContentRowRa: {
+        display: 'flex',
+        flexDirection: 'row',
+        width: '100%',
+        flexWrap: 'wrap',
+        justifyContent: 'flex-end',
+        marginTop: 15,
+    },
+    HR: {
+        height: 2,
+        backgroundColor: '#DE0000',
+        
+    }
+})
+
+export default CompanyResultCard;

Native/AlfaPrentice/App/Cards/ProfileLinks.js

@@ -0,0 +1,57 @@
+//Modules
+import React from 'react';
+import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+function Navigate(props) {
+    const navigation = useNavigation();
+    return(
+        <View>
+            <TouchableOpacity onPress = {() => navigation.navigate(props.Page)}>
+                <Text style={Styles.ProfileText}>{props.Title}</Text>
+            </TouchableOpacity>
+        </View>
+    )
+}
+
+    function HrCheck(props) {
+        var x = props.hr;
+        if (x == "false"){
+            return <View></View>
+        }
+        else {
+            return(
+                <View style={Styles.HR}/>
+            )
+        }
+    }
+
+const ProfileLink = (props) => {
+
+    return (
+        <View>
+            <View style={Styles.Profilelink}>
+                <Navigate Page={props.Page} Title={props.Title}/>
+            </View>
+            <HrCheck hr = {props.hr}/>
+        </View>
+    )
+}
+
+const Styles = StyleSheet.create ({
+    Profilelink: {
+        paddingVertical: 30,
+        paddingHorizontal: 60,
+        width: '100%'
+    },
+    ProfileText:{
+        color: '#DE0000',
+    },
+    HR: {
+        height: 2,
+        backgroundColor: '#DE0000',
+        
+    }
+})
+
+export default ProfileLink;

Native/AlfaPrentice/App/Cta/Cta.js

@@ -0,0 +1,58 @@
+//Modules
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+
+function Navigate(props) {
+    const navigation = useNavigation();
+    return(
+            <TouchableOpacity style={Styles.Btn} onPress = {() => navigation.navigate('Search')}>
+                <Text style={Styles.white}>Klik hier en begin met zoeken</Text>
+            </TouchableOpacity>    
+    )
+}
+
+const Cta = (props) => {
+    return (
+        <View style={Styles.Cta}>
+            <Text style={Styles.WhiteAlert}>Wacht niet te lang!</Text>
+            <Navigate/>
+        </View>
+    )
+}
+
+const Styles = StyleSheet.create ({
+    Cta: {
+        backgroundColor: "#DE0000a9",
+        paddingTop: 15,
+        paddingBottom: 30,
+        display: 'flex',
+        alignItems: 'center',
+        flex: 1,
+        justifyContent: 'center'
+    },
+    Btn: {
+        borderStyle: 'solid',
+        borderWidth: 2,
+        borderColor: '#ffffff',
+        flex: 1,
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: 250,
+        paddingVertical: 5,
+
+    },
+    white: {
+        color: '#ffffff',
+
+    },
+    WhiteAlert: {
+        color: '#ffffff',
+        fontSize: 20,
+        marginBottom: 15
+    }
+})
+
+export default Cta;

Native/AlfaPrentice/App/Footer/Footer.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { Icon } from 'react-native-elements'
+import { useNavigation } from '@react-navigation/native';
+
+function Navigate(props) {
+    const navigation = useNavigation();
+    return(
+        <View style={Styles.IconRow}>
+            <TouchableOpacity onPress = {() => navigation.navigate('Home')}>
+                <Icon
+                name='home'
+                color='#fff' />
+            </TouchableOpacity>
+            <TouchableOpacity onPress = {() => navigation.navigate('Search')}>
+                <Icon
+                name='search'
+                color='#fff' />
+            </TouchableOpacity>
+            <TouchableOpacity onPress = {() => navigation.navigate('Userprofile')}>
+                <Icon
+                name='mail'
+                color='#fff' />
+            </TouchableOpacity>
+            <TouchableOpacity onPress = {() => navigation.navigate('Userprofile')}>
+                <Icon
+                name='person'
+                color='#fff' />
+            </TouchableOpacity>
+            
+        </View>
+        
+    )
+}
+
+const Footer = () => {
+    return (
+        <View style={Styles.MainFooter}>
+            <Navigate/>
+           
+        </View>
+    )
+}
+
+const Styles = StyleSheet.create({
+    MainFooter: {
+        width: '100%',
+        height: 50,
+        color: '#ffffff',
+        backgroundColor: '#003581',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute', //Here is the trick
+        bottom: 0, //Here is the trick
+    },
+    IconRow: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        width: '80%',
+    }
+})
+
+export default Footer;

Native/AlfaPrentice/App/Header/Header.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { StyleSheet, Text, View, Image} from 'react-native';
+import { block } from 'react-native-reanimated';
+
+class Header extends React.Component {
+    render() {
+        return(
+            <View style={Styles.Header}>
+                <Image style={Styles.HeaderLogo} source={require('../Images/logo.png')} />
+            </View>
+        )
+    }
+}
+
+const Styles = StyleSheet.create({
+    Header: {
+        color: '#ffffff',
+        textAlign: 'center',
+        display: 'flex',
+        alignItems: 'center',
+        paddingVertical: 15,
+        paddingHorizontal: 10,
+        marginTop: 10,
+        height: 60,
+
+    },
+    HeaderLogo: {
+        width: '40%',
+        height: '100%',
+        
+    },
+  });
+  
+export default Header;

Native/AlfaPrentice/App/Hero/Hero.js

@@ -0,0 +1,81 @@
+//Modules
+import React from 'react';
+import { View, Text, StyleSheet, ImageBackground, Image, TextInput } from 'react-native';
+const image = { uri: "https://reactjs.org/logo-og.png" };
+
+class Hero extends React.Component {
+    constructor (props) {
+        super(props);
+    }
+    render() {
+        return (
+            <View>
+                <ImageBackground style={Styles.image} source={require('../Images/Stock.png')}>
+                    <View>
+                        <Text style={Styles.HeroHeading}>{this.props.HeroHeading}</Text>
+                        <Text style={Styles.HeroText}>{this.props.HeroText}</Text>
+                    </View>
+                </ImageBackground>
+            </View>
+                
+        );
+    }
+}
+
+const HeroSearch = (props) => {
+    const [SearchBar, onChangeSearch] = React.useState('');
+        return (
+            <View>
+                <ImageBackground style={Styles.image} source={require('../Images/Stock.png')}>
+                    <View style={Styles.InputContainer}>
+                        <TextInput 
+                         style={Styles.Input} 
+                         onChangeText={text => onChangeSearch(text)}
+                         placeholder="Zoek"
+                         placeholderTextColor="#DE0000"
+                         value={SearchBar}
+                        />
+                    </View>
+                </ImageBackground>
+            </View>
+                
+        );
+    
+}
+
+const Styles = StyleSheet.create ({
+    image: {
+        resizeMode: "cover",
+        width: '100%',
+        backgroundColor: "#DE0000a0",
+      },
+    HeroHeading: {
+        color: "white",
+        fontSize: 30,
+        textAlign: "center",
+        backgroundColor: "#DE0000a0",
+        paddingTop: 10,
+    },
+    HeroText: {
+        color: "white",
+        backgroundColor: "#DE0000a0",
+        textAlign: "center",
+        height: 55,
+    },
+    InputContainer: {
+        height: 100,
+        backgroundColor: "#DE0000a0",
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    Input: {
+        height: 40,
+        backgroundColor: '#ffffff',
+        width: '60%',
+        paddingHorizontal: 10,
+    }
+})
+
+export {HeroSearch};
+export default Hero;

Native/AlfaPrentice/App/Layouts/DefaultLayout.js

@@ -0,0 +1,26 @@
+//Mopdules
+import React from 'react';
+import {View, Text, ScrollView} from 'react-native';
+
+//Components
+import {Header, Footer} from '../index';
+
+class DefaultLayout extends React.Component {
+constructor(props){
+    super(props);
+}
+
+    render() {
+        return (
+            <View>
+            <ScrollView style={{marginBottom: 50,}}>
+                <Header/>
+                {this.props.children} 
+            </ScrollView>
+            <Footer/>
+            </View>
+        );
+    }
+}
+
+export default DefaultLayout;

Native/AlfaPrentice/App/Router/Router.js

@@ -0,0 +1,93 @@
+//Modules
+import 'react-native-gesture-handler';
+import * as React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+
+//Pages
+import { 
+    Home, 
+    SearchPage, 
+    Login, 
+    CompanyProfile, 
+    UserProfile,
+    AccountSettings,
+    Agenda,
+    Contact,
+    InternStatus,
+    OutgoingSolicitation,
+    Suggestions,
+    Weekscedule,
+  } from '../index';
+
+const Stack = createStackNavigator();
+
+class Routes extends React.Component {
+   constructor(props){
+      super(props);
+      this.state = {
+         items: this.props.item,
+      }
+   }
+
+   render() {
+    return (
+      <NavigationContainer>
+      <Stack.Navigator screenOptions={{
+            headerShown: false
+          }}>
+        <Stack.Screen
+          name="Login"
+          component={Login}
+        />
+        <Stack.Screen
+          name="Home"
+          component={Home}
+        />
+        <Stack.Screen
+          name="Search"
+          component={SearchPage}
+        />
+        <Stack.Screen
+          name="Companyprofile"
+          component={CompanyProfile}
+        />
+        <Stack.Screen
+          name="Userprofile"
+          component={UserProfile}
+        />
+        <Stack.Screen
+          name="Accountinstellingen"
+          component={AccountSettings}
+        />
+        <Stack.Screen
+          name="Agenda"
+          component={Agenda}
+        />
+        <Stack.Screen
+          name="Contact"
+          component={Contact}
+        />
+        <Stack.Screen
+          name="Stagestatus"
+          component={InternStatus}
+        />
+        <Stack.Screen
+          name="Verzondensolicitaties"
+          component={OutgoingSolicitation}
+        />
+        <Stack.Screen
+          name="Suggesties"
+          component={Suggestions}
+        />
+        <Stack.Screen
+          name="Weekstaten"
+          component={Weekscedule}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+    )
+    }
+   
+    }
+export default Routes;

Native/AlfaPrentice/App/Views/Home.js

@@ -0,0 +1,141 @@
+//Modules
+import React from 'react'
+import { TouchableOpacity, Text, StyleSheet, View, Dimensions } from 'react-native';
+import Swiper from 'react-native-swiper-hooks'
+import { useNavigation } from '@react-navigation/native';
+
+//Components
+import { DefaultLayout, Hero, Cta } from '../index';
+
+
+function Navigate(props) {
+    const navigation = useNavigation();
+    return(
+        <TouchableOpacity style={styles.Btn} onPress = {() => navigation.navigate('Companyprofile', { CompanyDetails: props.Details })}>
+            <Text style={styles.white}>Bekijk bedrijf</Text>
+        </TouchableOpacity>
+    )
+}
+
+const windowWidth = Dimensions.get('window').width;
+
+const _renderList = ()=>{
+    
+  let listData = [
+      {
+        title:'Bedrijf 1',
+        content:'blablablablablablablablablablablablablablablablablablablablablablablablabla',
+        discription:'Gespecialiseerd in Ict communicatie',
+      },
+      {
+        title:'Bedrijf 2',
+        content:'blablablablablablablablablablablablablablablablablablablablablablablablabla',
+        discription:'Gespecialiseerd in Ict communicatie',
+      },
+      {
+        title:'Bedrijf 3',
+        content:'blablablablablablablablablablablablablablablablablablablablablablablablabla',
+        discription:'Gespecialiseerd in Ict communicatie',
+      },
+    ]
+    return (
+      listData.map((item,idx)=>{
+        return (
+          <View style={styles.carouselwrapper}>
+            <View style={styles.carousel} key={idx}>
+                <Text style={styles.CarouselText}> {item.title}</Text>
+                <Text style={styles.CarouselContent}>{item.content}</Text>
+                <View style={{display:'flex', flexDirection:'row'}}>
+                  <Text style={{width:'50%'}}>{item.discription}</Text>
+                  <View style={{display:'flex', justifyContent: 'center', width:'50%'}}>
+                    <Navigate Details={item.title}/>
+                  </View>
+                </View>
+            </View>
+          </View>
+        )
+      })
+    )
+}
+
+
+class Home extends React.Component {
+  
+    render() {
+        const windowWidth = Dimensions.get('window').width;
+   return (
+       <DefaultLayout>
+           <Hero HeroHeading="AlfaPrentice" HeroText="De plek ow je ideale stageplek te vinden"/>
+           <Text style={styles.SecondaireHeader}>Uitgeligte bedrijven</Text>
+           <View>
+               <Swiper 
+                  height={200}
+                  paginationSelectedColor={'#DE0000'}
+                  autoplay={true}
+                  loop={true}
+                  showPagination={true}
+                  direction={'row'}
+                  >
+                  {_renderList()}
+                </Swiper>
+           </View>
+           <Text style={styles.SecondaireHeader}>Nog geen stage gevonden?</Text>
+          <Cta/>
+          <Text style={styles.SecondaireHeader}>Tips</Text>
+      </DefaultLayout>
+   )
+}
+}
+
+const styles = StyleSheet.create({
+    carousel: {
+        height:'100%',
+        width:windowWidth,
+        display: 'flex',
+        justifyContent: 'center',
+        paddingHorizontal: 30,
+
+    },
+    CarouselText: {
+        fontSize: 18,
+        color: '#DE0000',
+        marginBottom: 10,
+    },
+    CarouselContent: {
+        marginBottom:10,
+    },
+    SecondaireHeader: {
+        color: "#003581",
+        textAlign: 'center',
+        fontSize: 20,
+        marginTop: 30,
+        marginBottom: 15
+    },
+    carouselwrapper: {
+      
+      display: 'flex',
+      borderTopColor: "#DE0000",
+      borderTopWidth: 2,
+      borderBottomColor: "#DE0000",
+      borderBottomWidth: 2,
+      
+    },
+    Btn: {
+      backgroundColor: '#DE0000',
+      paddingVertical: 10,
+      paddingHorizontal: 15,
+      borderRadius: 5,
+      width: 120,
+      alignSelf: 'flex-end'
+    },
+    white: {
+        color: '#ffffff',
+    },
+      Heading: {
+        fontSize: 20,
+        color: '#DE0000',
+        marginBottom: 10
+    },
+  });
+
+export default Home;

Native/AlfaPrentice/App/Views/Login.js

@@ -0,0 +1,87 @@
+//Modules
+import React from 'react';
+import {View, Text, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
+
+
+//Components
+import {Header} from '../index';
+
+const Login = ({ navigation }) => {
+        const [UserName, onChangeUserName] = React.useState('');
+        const [PassWord, onChangePassWord] = React.useState('');
+
+        return ( 
+            <View>
+                <Header/>
+                <View style={Styles.Container}>
+                    <TextInput 
+                    style={Styles.Input} 
+                    onChangeText={text => onChangeUserName(text)}
+                    placeholder="Gebruikersnaam"
+                    value={UserName}
+                    />
+                    <TextInput 
+                    style={Styles.Input} 
+                    onChangeText={text => onChangePassWord(text)}
+                    placeholder="Wachtwoord"
+                    value={PassWord}
+                    secureTextEntry={true}
+                    />
+                    <View style={Styles.BtnWrapper}>
+                        <TouchableOpacity style={Styles.BtnOutline}>
+                            <Text>Annuleren</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity style={Styles.Btn}>
+                            <Text style={Styles.white} onPress={() =>
+                                navigation.navigate('Home')
+                            }>Login</Text>
+                        </TouchableOpacity>
+                    </View>
+                </View>
+            </View>
+        );
+    
+}
+
+const Styles = StyleSheet.create ({
+    Container: {
+        marginTop: '50%',
+        display: 'flex',
+        alignItems: 'center',
+        
+    },
+    Input: {
+        height: 40, 
+        borderColor: '#DE0000', 
+        borderRadius: 5,
+        borderWidth: 1,
+        width: '60%',
+        marginTop: 30,
+        padding: 10.
+    },
+    Btn: {
+        backgroundColor: '#DE0000',
+        paddingVertical: 10,
+        paddingHorizontal: 15,
+        borderRadius: 5,
+        marginLeft: 50,
+    },
+    BtnOutline: {
+        borderColor: '#DE0000',
+        borderRadius: 5,
+        borderWidth: 1,
+        paddingVertical: 10,
+        paddingHorizontal: 15,
+        borderRadius: 5,
+    },
+    white: {
+        color: '#ffffff',
+    },
+    BtnWrapper: {
+        display: 'flex',
+        flexDirection: 'row',
+        marginTop: 30,
+    },
+})
+
+export default Login;

Native/AlfaPrentice/App/Views/Profiles/CompanyProfile.js

@@ -0,0 +1,89 @@
+//Modules
+import React from 'react';
+import {View, Text, StyleSheet, TouchableOpacity, Image} from 'react-native';
+
+//Components
+import { DefaultLayout, Hero } from '../../index'
+
+const CompanyProfile = ({navigation, route}) => {
+
+        return(
+            <DefaultLayout>
+                <Hero HeroHeading={route.params.CompanyDetails} HeroText="Ict en meer"/>
+                <View  style={{paddingHorizontal:30, paddingVertical:15}}>
+                    <View style={{marginBottom:30}}>
+                        <Text style={Styles.CompanyHeading}>Wie zijn wij</Text>
+                        <Text>
+                        Wij zijn appels en peren in een schaal om de fruit fliegjes te bestrijden in de oorlog die gevoert word in china om de bedrijven overal in de ruimte te krijgen voor de genetische modificatie van baby's
+                        </Text>    
+                    </View>
+                    <View style={{marginBottom:30}}>
+                    <Text style={Styles.CompanyHeading}>Eisen</Text>
+                    <View>
+                        <Text>- Moet appels eten</Text>
+                        <Text>- Moet poepen om bomen</Text>
+                        <Text>- Haat duiven</Text>
+                    </View>    
+                    </View>
+                    <View style={{marginBottom:30}}>
+                        <Text style={Styles.CompanyHeading}>Intresse?</Text>
+                        <TouchableOpacity style={Styles.Btn}>
+                            <Text style={Styles.white}>Soliciteer direct</Text>
+                        </TouchableOpacity>    
+                    </View>
+                </View>    
+                <View>
+                    <View style={Styles.CompanyContact}>
+                        <Text style={Styles.CompanyHeading}>Contact persoon</Text>
+                        <Image style={Styles.CompanyImage} source={require('../../Images/stock2.png')}/>
+                        <Text style={Styles.CompanyHeading2}>Frits Haringa</Text>
+                    </View>
+                    
+                </View>
+            </DefaultLayout>
+        );
+    
+}
+
+const Styles = StyleSheet.create({
+    CompanyHeading: {
+        fontSize: 20,
+        color: '#DE0000',
+        marginBottom: 10
+    },
+    CompanyHeading2: {
+        fontSize: 18,
+        color: '#DE0000',
+        marginVertical: 10
+    },
+    Btn: {
+        backgroundColor: '#DE0000',
+        paddingVertical: 10,
+        paddingHorizontal: 15,
+        borderRadius: 5,
+        maxWidth: 140,
+        width: '50%'
+    },
+    white: {
+        color: '#ffffff',
+    },
+    CompanyImage: {
+        width:150,
+        height: 150,
+        borderRadius: 100
+    },
+    CompanyContact: {
+        display: 'flex',
+        alignItems: 'center',
+        marginBottom: 30,
+        marginTop: 15
+    },
+    SecondaireHeader: {
+        color: "#003581",
+        textAlign: 'center',
+        fontSize: 20,
+        marginVertical: 15
+    },
+})
+
+export default CompanyProfile;

Native/AlfaPrentice/App/Views/Profiles/UserProfile.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { View, Text,TouchableOpacity, StyleSheet} from 'react-native';
+
+//Components
+import { DefaultLayout, Hero, ProfileLink } from '../../index';
+
+
+
+class UserProfile extends React.Component {
+    constructor(props){
+        super(props);
+    }
+
+    render() {
+        return (
+            <DefaultLayout>
+                <View>
+                    <Hero HeroHeading="Frits Haringa" HeroText="Student Applicatie en Mediaontwikkeling jaar 3"/>
+                    <ProfileLink Page="Stagestatus" Title="Status van je stageplek zien"/>
+                    <ProfileLink Page="Verzondensolicitaties" Title="Uitgaande solicitaites bekijken"/>
+                    <ProfileLink Page="Accountinstellingen" Title="Account instellingen"/>
+                    <ProfileLink Page="Suggesties" Title="Suggesties"/>
+                    <ProfileLink Page="Weekstaten" Title="Weekstaten"/>
+                    <ProfileLink Page="Agenda" Title="Agenda"/>
+                    <ProfileLink Page="Contact" Title="Contact opnemen"/>
+                    <ProfileLink Page="Home" Title="Uitloggen" hr="false"/>
+                </View>
+                
+            </DefaultLayout>
+        )
+    }
+}
+
+
+export default UserProfile;

Native/AlfaPrentice/App/Views/Profiles/Userfunctions/AccountSettings.js

@@ -0,0 +1,18 @@
+//Modules
+import React from 'react';
+import {View, Text} from 'react-native';
+
+//Components
+import { DefaultLayout } from '../../../index';
+
+class AccountSettings extends React.Component {
+    render() {
+        return (
+                <DefaultLayout>
+                    <Text>Account instellingen</Text>
+                </DefaultLayout>
+        )
+    }
+}
+
+export default AccountSettings;

Native/AlfaPrentice/App/Views/Profiles/Userfunctions/Agenda.js

@@ -0,0 +1,18 @@
+//Modules
+import React from 'react';
+import {View, Text} from 'react-native';
+
+//Components
+import { DefaultLayout } from '../../../index';
+
+class Agenda extends React.Component {
+    render() {
+        return (
+                <DefaultLayout>
+                    <Text>Agenda</Text>
+                </DefaultLayout>
+        )
+    }
+}
+
+export default Agenda;

Native/AlfaPrentice/App/Views/Profiles/Userfunctions/Contact.js

@@ -0,0 +1,18 @@
+//Modules
+import React from 'react';
+import {View, Text} from 'react-native';
+
+//Components
+import { DefaultLayout } from '../../../index';
+
+class Contact extends React.Component {
+    render() {
+        return (
+                <DefaultLayout>
+                    <Text>Contact</Text>
+                </DefaultLayout>
+        )
+    }
+}
+
+export default Contact;

Native/AlfaPrentice/App/Views/Profiles/Userfunctions/InternStatus.js

@@ -0,0 +1,18 @@
+//Modules
+import React from 'react';
+import {View, Text} from 'react-native';
+
+//Components
+import { DefaultLayout } from '../../../index';
+
+class InternStatus extends React.Component {
+    render() {
+        return (
+                <DefaultLayout>
+                    <Text>Status stage pagina</Text>
+                </DefaultLayout>
+        )
+    }
+}
+
+export default InternStatus;

Native/AlfaPrentice/App/Views/Profiles/Userfunctions/OutgoingSolicitation.js

@@ -0,0 +1,18 @@
+//Modules
+import React from 'react';
+import {View, Text} from 'react-native';
+
+//Components
+import { DefaultLayout } from '../../../index';
+
+class OutgoingSolicitation extends React.Component {
+    render() {
+        return (
+                <DefaultLayout>
+                    <Text>UItgaande solicitaties</Text>
+                </DefaultLayout> 
+        )
+    }
+}
+
+export default OutgoingSolicitation;

Native/AlfaPrentice/App/Views/Profiles/Userfunctions/Suggestions.js

@@ -0,0 +1,18 @@
+//Modules
+import React from 'react';
+import {View, Text} from 'react-native';
+
+//Components
+import { DefaultLayout } from '../../../index';
+
+class Suggestions extends React.Component {
+    render() {
+        return (
+                <DefaultLayout>
+                    <Text>Suggesties</Text>
+                </DefaultLayout>
+        )
+    }
+}
+
+export default Suggestions;

Native/AlfaPrentice/App/Views/Profiles/Userfunctions/Weekstaten.js

@@ -0,0 +1,18 @@
+//Modules
+import React from 'react';
+import {View, Text} from 'react-native';
+
+//Components
+import { DefaultLayout } from '../../../index';
+
+class Weekscedule extends React.Component {
+    render() {
+        return (
+                <DefaultLayout>
+                    <Text>Weekstaten</Text>
+                </DefaultLayout>
+        )
+    }
+}
+
+export default Weekscedule;

Native/AlfaPrentice/App/Views/SearchPage.js

@@ -0,0 +1,40 @@
+//Modules
+import React from 'react'
+import { TouchableOpacity, Text } from 'react-native'
+import { Actions } from 'react-native-router-flux'
+import { Router, Scene } from 'react-native-router-flux';
+import { useNavigation } from '@react-navigation/native';
+
+//Components
+import { DefaultLayout, HeroSearch, CompanyResultcard } from '../index';
+
+//Pages
+import { CompanyProfile} from '../index';
+
+
+class SearchPage extends React.Component {
+   constructor(props){
+      super(props);
+      this.state = {
+         
+      }
+      
+   }
+     
+
+   render(){
+     
+   return (
+      <DefaultLayout>
+         <HeroSearch/>
+         <CompanyResultcard details = "Bedrijf 1"/>
+         <CompanyResultcard details = "Bedrijf 2"/>
+         <CompanyResultcard details = "Bedrijf 3"/>
+         <CompanyResultcard details = "Bedrijf 4"/>
+      </DefaultLayout>
+   )
+   }
+
+}   
+
+export default SearchPage;

Native/AlfaPrentice/App/index.js

@@ -0,0 +1,54 @@
+//Components
+import Header from './Header/Header';
+import Routes from './Router/Router';
+import DefaultLayout from './Layouts/DefaultLayout';
+import Hero from './Hero/Hero';
+import {HeroSearch} from './Hero/Hero';
+import CompanyResultcard from './Cards/CompanyResultCard';
+import Footer from './Footer/Footer';
+import ProfileLink from './Cards/ProfileLinks';
+import Cta from './Cta/Cta';
+
+//Pages
+import Home from "./Views/Home";
+import SearchPage from './Views/SearchPage';
+import Login from './Views/Login';
+import CompanyProfile from './Views/Profiles/CompanyProfile';
+import UserProfile from './Views/Profiles/UserProfile';
+import AccountSettings from './Views/Profiles/Userfunctions/AccountSettings';
+import Agenda from './Views/Profiles/Userfunctions/Agenda';
+import Contact from './Views/Profiles/Userfunctions/Contact';
+import InternStatus from './Views/Profiles/Userfunctions/InternStatus';
+import OutgoingSolicitation from './Views/Profiles/Userfunctions/OutgoingSolicitation';
+import Suggestions from './Views/Profiles/Userfunctions/Suggestions';
+import Weekscedule from './Views/Profiles/Userfunctions/Weekstaten';
+
+//Components export
+export {
+    Header,
+    DefaultLayout,
+    Hero,
+    HeroSearch,
+    CompanyResultcard,
+    Footer,
+    ProfileLink,
+    Cta,
+}
+
+//Pages export
+export {
+    Home,
+    SearchPage,
+    Login,
+    CompanyProfile,
+    UserProfile,
+    AccountSettings,
+    Agenda,
+    Contact,
+    InternStatus,
+    OutgoingSolicitation,
+    Suggestions,
+    Weekscedule,
+}
+
+export default Routes; 

Native/AlfaPrentice/app.json

@@ -0,0 +1,33 @@
+{
+  "expo": {
+    "name": "AlfaPrentice",
+    "slug": "AlfaPrentice",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "description": ""
+  }
+}

Native/AlfaPrentice/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

Native/AlfaPrentice/package.json

@@ -0,0 +1,37 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "@react-native-community/masked-view": "^0.1.10",
+    "@react-navigation/native": "^5.8.10",
+    "@react-navigation/stack": "^5.12.8",
+    "@types/react-native-snap-carousel": "^3.8.2",
+    "expo": "^39.0.5",
+    "expo-status-bar": "~1.0.2",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
+    "react-native-anchor-carousel": "^3.1.2",
+    "react-native-carousel": "^0.12.0",
+    "react-native-carousel-view": "^0.5.1",
+    "react-native-elements": "^3.0.0-alpha.1",
+    "react-native-gesture-handler": "^1.9.0",
+    "react-native-reanimated": "^1.13.2",
+    "react-native-router-flux": "^4.2.0",
+    "react-native-safe-area-context": "^3.1.9",
+    "react-native-screens": "^2.15.0",
+    "react-native-snap-carousel": "^3.9.1",
+    "react-native-swiper-hooks": "^1.2.5",
+    "react-native-web": "~0.13.12"
+  },
+  "devDependencies": {
+    "@babel/core": "~7.9.0"
+  },
+  "private": true
+}