Kezia Gabanete/mobile 1-2

.expo/README.md

@@ -0,0 +1,8 @@
+> Why do I have a folder named ".expo" in my project?
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+> What do the files contain?
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+> Should I commit the ".expo" folder?
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

.expo/devices.json

@@ -0,0 +1,3 @@
+{
+  "devices": []
+}

mobile/app/(tabs)/_layout.tsx

@@ -12,11 +12,12 @@ export default function TabLayout() {
   const colorScheme = useColorScheme();
 
   return (
+    // @ts-ignore
     <Tabs
       screenOptions={{
         tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
         headerShown: false,
-        tabBarButton: HapticTab,
+        tabBarButton: HapticTab as any,
         tabBarBackground: TabBarBackground,
         tabBarStyle: Platform.select({
           ios: {
@@ -27,7 +28,7 @@ export default function TabLayout() {
         }),
       }}>
       <Tabs.Screen
-        name="index"
+        name="feed"
         options={{
           title: 'Home',
           tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
@@ -40,6 +41,6 @@ export default function TabLayout() {
           tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
         }}
       />
-    </Tabs>
+    </Tabs >
   );
 }

mobile/app/(tabs)/feed.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { View, SafeAreaView, ScrollView, FlatList, StatusBar } from 'react-native';
+import {
+  Header,
+  StoryItem,
+  PostCard,
+  BottomTabBar,
+  STORIES,
+  POSTS,
+  styles,
+} from '../../components/feed';
+
+export default function FeedScreen() {
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      <StatusBar barStyle="dark-content" />
+      <Header />
+
+      <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
+        {/* Stories Row */}
+        <View style={styles.storiesDivider} />
+        <FlatList
+          data={STORIES}
+          horizontal
+          keyExtractor={(item) => item.id}
+          renderItem={({ item }) => <StoryItem story={item} />}
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.storiesContainer}
+        />
+        <View style={styles.storiesDivider} />
+
+        {/* Feed Posts */}
+        {POSTS.map((post) => (
+          <PostCard key={post.id} post={post} />
+        ))}
+
+        <View style={styles.bottomPadding} />
+      </ScrollView>
+
+      <BottomTabBar />
+    </SafeAreaView>
+  );
+}

mobile/app/_layout.tsx

@@ -29,7 +29,8 @@ export default function RootLayout() {
 
   return (
     <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <Stack>
+      <Stack initialRouteName="login">
+        <Stack.Screen name="login" options={{ headerShown: false }} />
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
         <Stack.Screen name="+not-found" />
       </Stack>

mobile/app/index.tsx

@@ -0,0 +1,5 @@
+import { Redirect } from 'expo-router';
+
+export default function Index() {
+    return <Redirect href="/login" />;
+}