feat: add screens and layout for managing gifts and recipients

Author: hardingadonis

src/app/(gifts)/_layout.tsx

@@ -0,0 +1,14 @@
+import { Stack } from 'expo-router';
+
+const Layout = () => {
+	return (
+		<Stack>
+			<Stack.Screen name="index" options={{ headerShown: false }} />
+			<Stack.Screen name="edit-gift" options={{ title: 'Edit Gift' }} />
+			<Stack.Screen name="add-gift" options={{ title: 'Add Gift' }} />
+			<Stack.Screen name="detail-gift" options={{ title: 'Gift Detail' }} />
+		</Stack>
+	);
+};
+
+export default Layout;

src/app/(gifts)/add-gift.tsx

@@ -0,0 +1,11 @@
+import { Text, View } from 'react-native';
+
+const AddGiftScreen = () => {
+	return (
+		<View>
+			<Text>Add Recipient Screen</Text>
+		</View>
+	);
+};
+
+export default AddGiftScreen;

src/app/(gifts)/detail-gift.tsx

@@ -0,0 +1,11 @@
+import { Text, View } from 'react-native';
+
+const DetailGiftScreen = () => {
+	return (
+		<View>
+			<Text>Edit Recipient Screen</Text>
+		</View>
+	);
+};
+
+export default DetailGiftScreen;

src/app/(gifts)/edit-gift.tsx

@@ -0,0 +1,11 @@
+import { Text, View } from 'react-native';
+
+const EditGiftScreen = () => {
+	return (
+		<View>
+			<Text>Edit Recipient Screen</Text>
+		</View>
+	);
+};
+
+export default EditGiftScreen;

src/app/(gifts)/index.tsx

@@ -0,0 +1,23 @@
+import { Link } from 'expo-router';
+import { StyleSheet, Text } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+const HomeScreen = () => {
+	return (
+		<SafeAreaView style={styles.container}>
+			<Text>Home Screen</Text>
+			<Link href="/(gifts)/edit-gift" push>
+				Edit Gift
+			</Link>
+		</SafeAreaView>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: '#FFFFFF',
+	},
+});
+
+export default HomeScreen;

src/app/_layout.tsx

@@ -1,36 +1,61 @@
 import AntDesign from '@expo/vector-icons/AntDesign';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import { Tabs } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
 import React from 'react';
+import { View } from 'react-native';
 
 import BottomTabBar from '@/components/tabbar/BottomTabBar';
 
 const RootLayout = () => {
 	return (
-		<React.Fragment>
+		<View style={styles.container}>
 			<StatusBar style="auto" />
 			<Tabs
 				tabBar={(props) => <BottomTabBar {...props} />}
 				screenOptions={{
-					// headerShown: false,
-					// tabBarStyle: { display: 'none' },
+					headerShown: false,
 					tabBarActiveTintColor: '#4B6BFB',
 					tabBarInactiveTintColor: '#666666',
 				}}
 			>
 				<Tabs.Screen
-					name="index"
+					name="recipients"
+					options={{
+						title: 'Recipients',
+						tabBarIcon: ({ color, size }) => (
+							<Ionicons name="people-outline" size={size} color={color} />
+						),
+					}}
+				/>
+				<Tabs.Screen
+					name="(gifts)"
 					options={{
 						title: 'Home',
 						tabBarIcon: ({ color, size }) => (
 							<AntDesign name="home" size={size} color={color} />
 						),
 					}}
 				/>
-				<Tabs.Screen name="second" options={{ title: 'Settings' }} />
+				<Tabs.Screen
+					name="settings"
+					options={{
+						title: 'Settings',
+						tabBarIcon: ({ color, size }) => (
+							<AntDesign name="setting" size={size} color={color} />
+						),
+					}}
+				/>
 			</Tabs>
-		</React.Fragment>
+		</View>
 	);
 };
 
+const styles = {
+	container: {
+		flex: 1,
+		backgroundColor: '#FFFFFF',
+	},
+};
+
 export default RootLayout;

src/app/index.tsx

@@ -0,0 +1,20 @@
+import { Stack } from 'expo-router';
+
+const Layout = () => {
+	return (
+		<Stack>
+			<Stack.Screen name="index" options={{ headerShown: false }} />
+			<Stack.Screen
+				name="edit-recipient"
+				options={{ title: 'Edit Recipient' }}
+			/>
+			<Stack.Screen name="add-recipient" options={{ title: 'Add Recipient' }} />
+			<Stack.Screen
+				name="detail-recipient"
+				options={{ title: 'Recipient Detail' }}
+			/>
+		</Stack>
+	);
+};
+
+export default Layout;

src/app/recipients/_layout.tsx

@@ -0,0 +1,11 @@
+import { Text, View } from 'react-native';
+
+const AddRecipientScreen = () => {
+	return (
+		<View>
+			<Text>Add Recipient Screen</Text>
+		</View>
+	);
+};
+
+export default AddRecipientScreen;

src/app/recipients/add-recipient.tsx

@@ -0,0 +1,11 @@
+import { Text, View } from 'react-native';
+
+const DetailRecipientScreen = () => {
+	return (
+		<View>
+			<Text>Detail Recipient Screen</Text>
+		</View>
+	);
+};
+
+export default DetailRecipientScreen;