temp update

ReactJS/Native/AlfaPrentice/App/Views/Home.js

@@ -1,18 +1,60 @@
 //Modules
 import React from 'react'
-import { TouchableOpacity, Text, StyleSheet } from 'react-native';
+import { TouchableOpacity, Text, StyleSheet, View, Dimensions } from 'react-native';
+import Swiper from 'react-native-swiper-hooks'
 
 //Components
 import { DefaultLayout, Hero, } from '../index';
 
+const windowWidth = Dimensions.get('window').width;
+
+const _renderList = ()=>{
+    
+  let listData = [
+      {
+        title:'Bedrijf 1',
+      },
+      {
+        title:'Bedrijf 2',
+      },
+      {
+        title:'Bedrijf 3',
+      },
+    ]
+    return (
+      listData.map((item,idx)=>{
+        return (
+          <View style={styles.carouselwrapper}>
+            <View style={styles.carousel} key={idx}>
+                <Text style={styles.CarouselText}> {item.title}</Text>
+            </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"/>
-            <TouchableOpacity style = {{ margin: 128 }} >
+           <Text style={styles.SecondaireHeader}>Uitgeligte bedrijven</Text>
-                <Text>Terug naar login</Text>
+           <View>
-            </TouchableOpacity>
+               <Swiper 
+                  height={250}
+                  paginationSelectedColor={'#CCFF66'}
+                  autoplay={true}
+                  loop={true}
+                  showPagination={true}
+                  direction={'row'}
+                  >
+                  {_renderList()}
+                </Swiper>
+           </View>
       </DefaultLayout>
    )
 }
@@ -20,15 +62,24 @@ class Home extends React.Component {
 
 const styles = StyleSheet.create({
     carousel: {
-        height: 200, 
+        height:250,
-        width: '100%',
+        borderColor: "#DE0000",
+        borderWidth: 2,
+        borderStyle: 'solid',
+        width:windowWidth,
     },
-    container: {
+    CarouselText: {
-        width: 375,
+        color: "black"
-        flex: 1,
+    },
-        justifyContent: 'center',
+    SecondaireHeader: {
-        alignItems: 'center',
+        color: "#003581",
-        backgroundColor: 'transparent',
+        textAlign: 'center',
+        fontSize: 20,
+        marginVertical: 15
+    },
+    carouselwrapper: {
+      padding: 15,
+      display: 'flex'
     },
   });