🖌️ User Interface: added profile and bar icons in title

Author: coderj001

app/index.js

@@ -0,0 +1,36 @@
+import { View, Text, ScrollView, SafeAreaView } from 'react-native'
+
+import { COLORS, icons, images, SIZES } from '../constants'
+import { Nearbyjobs, Popularjobs, ScreenHeaderBtn, Welcome } from '../components'
+import { Stack, useRouter } from 'expo-router'
+
+const Home = () => {
+  const router = useRouter()
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: COLORS.lightWhite }}>
+      <Stack.Screen options={{
+        headerStyle: { backgroundColor: COLORS.lightWhite },
+        headerShadowVisible: false,
+        headerLeft: () => (
+          <ScreenHeaderBtn iconUrl={icons.menu} dimension="60%" />
+        ),
+        headerRight: () => (
+          <ScreenHeaderBtn iconUrl={images.profile} dimension="100%" />
+        ),
+        headerTitle: ""
+      }} />
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <View style={{
+          flex: 1,
+          padding: SIZES.medium
+        }}>
+          <Welcome />
+          <Popularjobs />
+          <Nearbyjobs />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+export default Home;

components/common/header/ScreenHeaderBtn.jsx

@@ -1,14 +1,18 @@
 import React from 'react'
-import { View, Text } from 'react-native'
+import { View, Text, TouchableOpacity, Image } from 'react-native'
 
 import styles from './screenheader.style'
 
-const ScreenHeaderBtn = () => {
+const ScreenHeaderBtn = ({iconUrl, dimension, handlePress}) => {
   return (
-    <View>
-      <Text>ScreenHeaderBtn</Text>
-    </View>
+  <TouchableOpacity style={styles.btnContainer} onPress={handlePress}>
+      <Image
+        source={iconUrl}
+        resizeMode='cover'
+        style={styles.btnImg(dimension)}
+      />
+    </TouchableOpacity>
   )
 }
 
-export default ScreenHeaderBtn
+export default ScreenHeaderBtn;

components/home/welcome/Welcome.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { View, Text } from 'react-native'
+import { View, Text, TextInput, TouchableOpacity, Image, FlatList } from 'react-native'
+import {icons, SIZES} from '../../../constants'
 
 import styles from './welcome.style'
 
@@ -11,4 +12,4 @@ const Welcome = () => {
   )
 }
 
-export default Welcome
+export default Welcome

package-lock.json

@@ -6,15 +6,18 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "axios": "^1.3.6",
     "expo": "^48.0.7",
     "expo-constants": "~14.2.1",
+    "expo-font": "^11.1.1",
     "expo-linking": "~4.0.1",
     "expo-router": "^1.2.0",
     "expo-splash-screen": "~0.18.1",
     "expo-status-bar": "~1.4.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.71.3",
+    "react-native-dotenv": "^3.4.8",
     "react-native-gesture-handler": "~2.9.0",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",