[home] Implement home screen frontend #19

src/app/(tabs)/_layout.tsx

@@ -1,5 +1,5 @@
-import { Tabs } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
+import { Tabs } from 'expo-router';
 
 function HomeIcon({ color }: { color: string }) {
   return <Ionicons name="home-outline" color={color} size={26} />;
@@ -17,7 +17,6 @@ function TabNav() {
   return (
     <Tabs
       screenOptions={{
-        tabBarStyle: { height: 60 },
         tabBarLabelStyle: { fontSize: 14 },
       }}
     >

src/app/(tabs)/home/_layout.tsx

@@ -0,0 +1,11 @@
+import { Stack } from 'expo-router';
+
+function StackLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" options={{ headerShown: false }} />
+    </Stack>
+  );
+}
+
+export default StackLayout;

src/app/(tabs)/home/index.tsx

@@ -0,0 +1,104 @@
+import { Link } from 'expo-router';
+import { Button, ScrollView, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import ContentCard from '../../../components/ContentCard/ContentCard';
+import SearchCard from '../../../components/SearchCard/SearchCard';
+import globalStyles from '../../../styles/globalStyles';
+import styles from './styles';
+
+const dummyStories = [
+  {
+    title: 'The Witch and Her Wings',
+    author: 'Victoria V.',
+    image: '',
+    author_image: '',
+    tags: ['Non-fiction', 'Mysterious', 'Goofy', 'Silly', 'Adventurous'],
+  },
+  {
+    title: "It's Carnival",
+    author: 'Victoria V.',
+    image: '',
+    author_image: '',
+    tags: ['Non-fiction', 'Mysterious'],
+  },
+  {
+    title: "Akshay's Adventures",
+    author: 'Victoria V.',
+    image: '',
+    author_image: '',
+    tags: ['Non-fiction', 'Mysterious'],
+  },
+];
+
+function HomeScreen() {
+  return (
+    <SafeAreaView style={globalStyles.container}>
+      <ScrollView
+        horizontal={false}
+        showsVerticalScrollIndicator={false}
+        bounces={false}
+      >
+        <View style={styles.headerContainer}>
+          <Text style={globalStyles.h4}>Welcome, Brenda</Text>
+          <Link href="/settings" asChild>
+            <Button title="Settings" />
+          </Link>
+        </View>
+        <Text style={styles.featuredSubheading}>Featured Stories</Text>
+        <Text style={[globalStyles.body2, styles.featuredDescription]}>
+          Celebrate lorem ipsum by diving into related stories from our talented
+          authors.
+        </Text>
+        <View style={styles.featuredContainer}>
+          {dummyStories.map(story => (
+            <SearchCard
+              key={story.title}
+              title={story.title}
+              author={story.author}
+              image={story.image}
+              authorImage={story.author_image}
+              tags={story.tags}
+              pressFunction={() => null}
+            />
+          ))}
+        </View>
+        <Text style={styles.subheading}>Recommended For You</Text>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          bounces={false}
+          style={styles.scrollView}
+        >
+          {dummyStories.map(story => (
+            <ContentCard
+              key={story.title}
+              title={story.title}
+              author={story.author}
+              pressFunction={() => null}
+              image={story.image}
+            />
+          ))}
+        </ScrollView>
+        <Text style={styles.subheading}>New Stories</Text>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          bounces={false}
+          style={styles.scrollView}
+        >
+          {dummyStories.map(story => (
+            <ContentCard
+              key={story.title}
+              title={story.title}
+              author={story.author}
+              pressFunction={() => null}
+              image={story.image}
+            />
+          ))}
+        </ScrollView>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+export default HomeScreen;

src/app/(tabs)/home/styles.ts

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  subheading: {
+    fontSize: 16,
+    fontWeight: '800',
+    textAlign: 'left',
+    lineHeight: 24,
+    color: 'black',
+    marginBottom: 12,
+  },
+  featuredSubheading: {
+    fontSize: 16,
+    fontWeight: '800',
+    textAlign: 'left',
+    lineHeight: 24,
+    color: 'black',
+    marginBottom: 8,
+  },
+  scrollView: {
+    marginBottom: 20,
+    flexGrow: 0,
+  },
+  headerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 24,
+    marginBottom: 12,
+  },
+  featuredDescription: {
+    marginBottom: 16,
+  },
+  featuredContainer: {},
+});
+
+export default styles;

src/app/(tabs)/mycontent.tsx

@@ -1,6 +1,6 @@
 import { Text } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import globalStyles from '../../../globalStyles';
+import globalStyles from '../../styles/globalStyles';
 
 function MyContentScreen() {
   return (

src/app/(tabs)/search/index.tsx

@@ -1,7 +1,7 @@
-import { Text, Button } from 'react-native';
 import { Link } from 'expo-router';
+import { Button, Text } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import globalStyles from '../../../../globalStyles';
+import globalStyles from '../../../styles/globalStyles';
 
 function SearchScreen() {
   return (

src/app/(tabs)/search/story.tsx

@@ -1,8 +1,8 @@
-import { ActivityIndicator, ScrollView, Text, View } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import { useEffect, useState } from 'react';
+import { ActivityIndicator, ScrollView } from 'react-native';
 import HTMLView from 'react-native-htmlview';
-import globalStyles from '../../../../globalStyles';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import globalStyles from '../../../styles/globalStyles';
 
 function StoryScreen() {
   const [isLoading, setLoading] = useState(true);

src/app/auth/index.tsx

@@ -1,7 +1,7 @@
 import { router } from 'expo-router';
 import { Button, Text } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import globalStyles from '../../../globalStyles';
+import globalStyles from '../../styles/globalStyles';
 
 function LoginScreen() {
   return (

src/app/settings.tsx

@@ -1,6 +1,6 @@
 import { Text } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import globalStyles from '../../globalStyles';
+import globalStyles from '../styles/globalStyles';
 
 function SettingsScreen() {
   return (

src/components/ContentCard/ContentCard.tsx

@@ -0,0 +1,41 @@
+import {
+  GestureResponderEvent,
+  Image,
+  Pressable,
+  Text,
+  View,
+} from 'react-native';
+import globalStyles from '../../styles/globalStyles';
+import styles from './styles';
+
+type ContentCardProps = {
+  title: string;
+  author: string;
+  image: string;
+  pressFunction: (event: GestureResponderEvent) => void;
+};
+
+function ContentCard({
+  title,
+  author,
+  image,
+  pressFunction,
+}: ContentCardProps) {
+  return (
+    <Pressable onPress={pressFunction}>
+      <View style={styles.contentCard}>
+        <Image style={styles.image} source={{ uri: image }} />
+        <View style={styles.textContainer}>
+          <Text style={[globalStyles.body1, styles.title]} numberOfLines={1}>
+            {title}
+          </Text>
+          <Text style={globalStyles.body1} numberOfLines={1}>
+            {author}
+          </Text>
+        </View>
+      </View>
+    </Pressable>
+  );
+}
+
+export default ContentCard;

src/components/ContentCard/styles.ts

@@ -0,0 +1,24 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  contentCard: {
+    marginRight: 20,
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  },
+  image: {
+    height: 140,
+    width: 148,
+    backgroundColor: '#D9D9D9',
+    borderRadius: 4,
+    marginBottom: 8,
+  },
+  textContainer: {
+    width: 148,
+  },
+  title: {
+    marginBottom: 4,
+  },
+});
+
+export default styles;

src/components/SearchCard/SearchCard.tsx

@@ -0,0 +1,50 @@
+import {
+  GestureResponderEvent,
+  Image,
+  Pressable,
+  Text,
+  View,
+} from 'react-native';
+import styles from './styles';
+
+type SearchCardProps = {
+  title: string;
+  author: string;
+  image: string;
+  authorImage: string;
+  tags: string[];
+  pressFunction: (event: GestureResponderEvent) => void;
+};
+
+function SearchCard({
+  title,
+  author,
+  image,
+  authorImage,
+  tags,
+  pressFunction,
+}: SearchCardProps) {
+  return (
+    <Pressable onPress={pressFunction}>
+      <View style={styles.card}>
+        <Image style={styles.image} source={{ uri: image }} />
+        <View style={styles.cardTextContainer}>
+          <Text style={styles.title}>{title}</Text>
+          <View style={styles.authorContainer}>
+            <Image style={styles.authorImage} source={{ uri: authorImage }} />
+            <Text style={styles.author}>{author}</Text>
+          </View>
+          <View style={styles.tagsContainer}>
+            {tags.map(tag => (
+              <Text key={tag} style={styles.tag}>
+                {tag}
+              </Text>
+            ))}
+          </View>
+        </View>
+      </View>
+    </Pressable>
+  );
+}
+
+export default SearchCard;