Merge branch 'main' into fix-bug

app/(tabs)/expenses/_layout.tsx

@@ -0,0 +1,31 @@
+import { TopTabs } from "@bacons/expo-router-top-tabs";
+import { useColorScheme } from "react-native";
+import Colors from "../../../constants/Colors";
+
+export default function ExpensesTabLayout() {
+  const colorScheme = useColorScheme();
+
+  return (
+    <TopTabs
+      options={{swipeEnabled: false}}
+      screenOptions={{
+        tabBarPressColor: Colors[colorScheme ?? 'light'].topNavBarIndicatorColorTurquoise,
+        tabBarIndicatorStyle: {backgroundColor: Colors[colorScheme ?? 'light'].topNavBarIndicatorColorTurquoise},
+      }}>
+      <TopTabs.Header>
+      </TopTabs.Header>
+      <TopTabs.Screen
+        name="index"
+        options={{
+          title: 'Settle'
+        }}
+      />
+      <TopTabs.Screen
+        name="balance"
+        options={{
+          title: 'Balance'
+        }}
+      />
+    </TopTabs>
+  );
+}

app/(tabs)/expenses/balance.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+
+import EditScreenInfo from '../../../components/EditScreenInfo';
+import { Text, View } from '../../../components/Themed';
+
+export default function BalanceScreen() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Balance</Text>
+      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
+      <EditScreenInfo path="app/(tabs)/expenses/balance.tsx" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 48,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  separator: {
+    marginVertical: 30,
+    height: 1,
+    width: '80%',
+  },
+});

app/(tabs)/expenses/index.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+
+import EditScreenInfo from '../../../components/EditScreenInfo';
+import { Text, View } from '../../../components/Themed';
+
+export default function SettleScreen() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Settle</Text>
+      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
+      <EditScreenInfo path="app/(tabs)/expenses/index.tsx" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 48,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  separator: {
+    marginVertical: 30,
+    height: 1,
+    width: '80%',
+  },
+});

app/(tabs)/index/_layout.tsx

@@ -0,0 +1,31 @@
+import { TopTabs } from "@bacons/expo-router-top-tabs";
+import { useColorScheme } from "react-native";
+import Colors from "../../../constants/Colors";
+
+export default function ListTabLayout() {
+  const colorScheme = useColorScheme();
+
+  return (
+    <TopTabs
+      options={{swipeEnabled: false}}
+      screenOptions={{
+        tabBarPressColor: Colors[colorScheme ?? 'light'].topNavBarIndicatorColorTurquoise,
+        tabBarIndicatorStyle: {backgroundColor: Colors[colorScheme ?? 'light'].topNavBarIndicatorColorTurquoise},
+      }}>
+      <TopTabs.Header>
+      </TopTabs.Header>
+      <TopTabs.Screen
+        name="index"
+        options={{
+          title: 'To Be Bought'
+        }}
+      />
+      <TopTabs.Screen
+        name="bought"
+        options={{
+          title: 'Bought'
+        }}
+      />
+    </TopTabs>
+  );
+}

app/(tabs)/expenses.tsx → app/(tabs)/index/bought.tsx

@@ -1,20 +1,21 @@
 import { StyleSheet } from 'react-native';
 
-import EditScreenInfo from '../../components/EditScreenInfo';
-import { Text, View } from '../../components/Themed';
+import EditScreenInfo from '../../../components/EditScreenInfo';
+import { Text, View } from '../../../components/Themed';
 
-export default function ExpensesScreen() {
+export default function BoughtScreen() {
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>Expenses</Text>
+      <Text style={styles.title}>Bought</Text>
       <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
-      <EditScreenInfo path="app/(tabs)/expenses.tsx" />
+      <EditScreenInfo path="app/(tabs)/index/bought.tsx" />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
+    marginTop: 48,
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',

app/(tabs)/index.tsx → app/(tabs)/index/index.tsx

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { Text, View, } from '../../components/Themed';
+import { Text, View, } from '../../../components/Themed';
 import { Component } from 'react';
 import { FlatList } from 'react-native-gesture-handler';
 import { FontAwesome5 } from '@expo/vector-icons';
@@ -86,10 +86,11 @@ function swipeHandler(dir: 'left' | 'right') {
   }
 }
 
-export default class ListScreen extends Component {
+export default class ToBeBoughtScreen extends Component {
   render() {
     return (
       <FlatList
+        style={{marginTop: 48}}
         data={DATA}
         renderItem={renderItem}
       />

constants/Colors.ts

@@ -2,6 +2,7 @@ const tintColorLight = '#000';
 const tintColorDark = '#fff';
 const tintColorTurquoise = 'rgba(92, 188, 169, 0.27)';
 const accentColorTurquoise = 'rgba(92, 188, 169)';
+const topNavBarIndicatorColorTurquoise = '#5CBCA9';
 
 export default {
   light: {
@@ -12,6 +13,7 @@ export default {
     tabIconSelected: tintColorLight,
     tabIconSelectedBackground: tintColorTurquoise,
     accentColor: accentColorTurquoise,
+    topNavBarIndicatorColorTurquoise: topNavBarIndicatorColorTurquoise,
   },
   dark: {
     text: '#fff',
@@ -20,5 +22,6 @@ export default {
     tabIconDefault: '#ccc',
     tabIconSelected: tintColorLight,
     tabIconSelectedBackground: tintColorTurquoise,
+    topNavBarIndicatorColorTurquoise: topNavBarIndicatorColorTurquoise,
   },
 };