👍 User Experience: added flatlist horizontal, for search

Author: coderj001

app/_layout.js

@@ -1,7 +1,24 @@
 import { Stack } from 'expo-router'
+import { useCallback } from 'react'
+import { useFonts } from 'expo-font'
+import * as SplashScreen from 'expo-splash-screen';
+
+SplashScreen.preventAutoHideAsync()
 
 const Layout = () => {
-  return <Stack />;
+  const [fontLoaded] = useFonts({
+    DMBold: require('../assets/fonts/DMSans-Bold.ttf'),
+    DMMedium: require('../assets/fonts/DMSans-Medium.ttf'),
+    DMRegular: require('../assets/fonts/DMSans-Regular.ttf')
+  })
+
+  const onLayoutRootView = useCallback(async () => {
+    if (fontLoaded) {
+      await SplashScreen.hideAsync()
+    }
+  }, [fontLoaded])
+  if (!fontLoaded) return null;
+  return <Stack onLayout={onLayoutRootView}/>;
 }
 
 export default Layout;

app/index.js

@@ -22,7 +22,7 @@ const Home = () => {
       <ScrollView showsVerticalScrollIndicator={false}>
         <View style={{
           flex: 1,
-          padding: SIZES.medium
+          padding: SIZES.medium,
         }}>
           <Welcome />
           <Popularjobs />

components/home/popular/Popularjobs.jsx

@@ -1,14 +1,36 @@
-import React from 'react'
-import { View, Text } from 'react-native'
+import React, { useState } from 'react'
+import { View, Text, ActivityIndicator, FlatList } from 'react-native'
+import { COLORS, SIZES } from '../../../constants'
+import PopularJobCard from '../../common/cards/popular/PopularJobCard'
 
 import styles from './popularjobs.style'
+import { useRouter } from 'expo-router'
+import { TouchableOpacity } from 'react-native-gesture-handler'
 
 const Popularjobs = () => {
+  const router = useRouter();
+  const isLoading = false
+  const error = false
+
+
+
   return (
-    <View>
-      <Text>Popularjobs</Text>
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.headerTitle}>Popular Jobs</Text>
+        <TouchableOpacity><Text style={styles.headerBtn}>Show all</Text></TouchableOpacity>
+      </View>
+      <View style={styles.cardsContainer}>
+        {isLoading ? (
+          <ActivityIndicator size="large" color={COLORS.primary} />
+        ) : error ? (
+          <Text>Something went worng</Text>
+        ) : (
+          <FlatList />
+        )}
+      </View>
     </View>
   )
 }
 
-export default Popularjobs
+export default Popularjobs

components/home/welcome/Welcome.jsx

@@ -1,13 +1,59 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { View, Text, TextInput, TouchableOpacity, Image, FlatList } from 'react-native'
-import {icons, SIZES} from '../../../constants'
+import { icons, SIZES } from '../../../constants'
 
 import styles from './welcome.style'
 
+const jobType = ["Full-Time", "Part-Time", "Contractor"]
+
 const Welcome = () => {
+  const [activeJobType, setActiveJobType] = useState('Full-Time')
+
   return (
     <View>
-      <Text>Welcome</Text>
+      <View style={styles.container}>
+        <Text style={styles.userName}>Hello, Daniel Park</Text>
+        <Text style={styles.welcomeMessage}>Find Your Dream Job</Text>
+      </View>
+      <View style={styles.searchContainer}>
+        <View style={styles.searchWrapper}>
+          <TextInput
+            style={styles.searchInput}
+            value=""
+            onChange={() => { }}
+            placeholder='What are you looking for?'
+          />
+        </View>
+        <TouchableOpacity
+          style={styles.searchBtn}
+          onPress={() => { }}
+        >
+          <Image source={icons.search}
+            resizeMode='contain'
+            style={styles.searchBtnImage}
+          />
+        </TouchableOpacity>
+      </View>
+      <View style={styles.tabsContainer}>
+        <FlatList
+          data={jobType}
+          horizontal
+          ListHeaderComponent={() => null}
+          renderItem={({ item }) => (
+            <TouchableOpacity
+              style={styles.tab(activeJobType, item)}
+              onPress={() => {
+                setActiveJobType(item);
+                // router.push(`/search/\${item}`);
+              }}
+            >
+              <Text style={styles.tabText(activeJobType, item)}>{item}</Text>
+            </TouchableOpacity>
+          )}
+          keyExtractor={item => item}
+          contentContainerStyle={{ columnGap: SIZES.small }}
+        />
+      </View>
     </View>
   )
 }