Fix issues related to creating apk

.gitignore

@@ -24,6 +24,9 @@ npm-debug.*
 yarn-debug.*
 yarn-error.*
 
+# Android
+android/
+
 # macOS
 .DS_Store
 *.pem

app.json

@@ -18,12 +18,32 @@
     ],
     "ios": {
       "supportsTablet": true,
-      "bundleIdentifier": "com.CoShare.CoShare"
+      "bundleIdentifier": "com.CoShare.CoShare",
+      "splash": {
+        "image": "./assets/images/splash.png",
+        "resizeMode": "contain",
+        "backgroundColor": "#ffffff",
+        "dark": {
+          "image": "./assets/images/splash.png",
+          "resizeMode": "contain",
+          "backgroundColor": "#404040"
+        }
+      }
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/adaptive-icon.png",
-        "backgroundColor": "#ffffff"
+        "backgroundColor": "#404040"
+      },
+      "splash": {
+        "image": "./assets/images/splash.png",
+        "resizeMode": "contain",
+        "backgroundColor": "#ffffff",
+        "dark": {
+          "image": "./assets/images/splash.png",
+          "resizeMode": "contain",
+          "backgroundColor": "#404040"
+        }
       },
       "package": "com.CoShare.CoShare"
     },
@@ -33,7 +53,12 @@
       "favicon": "./assets/images/favicon.png"
     },
     "plugins": [
-      "expo-router"
+      "expo-router",
+      ["expo-build-properties", {
+        "android": {
+          "usesCleartextTraffic": true
+        }
+      }]
     ],
     "experiments": {
       "typedRoutes": true

app/(login)/(groupScreen)/group.tsx

@@ -40,9 +40,6 @@ export default function GroupScreen() {
   function getButtonsComponent() {
     return (
       <>
-          <Pressable style={styles.button}>
-            <Text style={styles.buttonText} onPress={() => {setCurrentState(State.bluetooth)}}> Join with bluetooth </Text>
-          </Pressable>
           <Pressable style={styles.button} onPress={() => {setCurrentState(State.id)}}>
             <Text style={styles.buttonText}> Join with group id </Text>
           </Pressable>

app/(tabs)/expenses/_layout.tsx

@@ -1,31 +1,39 @@
-import { TopTabs } from "@bacons/expo-router-top-tabs";
 import { useColorScheme } from "react-native";
 import Colors from "../../../constants/Colors";
+import { useState } from 'react';
+import { TabView, SceneMap, TabBar } from 'react-native-tab-view';
+import BalanceScreen from "./balance";
+import SettleScreen from ".";
+
+const renderScene = SceneMap({
+  index: SettleScreen,
+  balance: BalanceScreen,
+});
 
 export default function ExpensesTabLayout() {
   const colorScheme = useColorScheme() ?? 'light';
 
+  const [index, setIndex] = useState(0);
+  const [routes] = useState([
+    { key: 'index', title: 'Settle' },
+    { key: 'balance', title: 'Balance' },
+  ]);
+
+  const renderTabBar = (props: any) => (
+    <TabBar {...props} 
+      style={{backgroundColor: Colors[colorScheme].topNavBarBackgroundColor}}
+      activeColor={Colors[colorScheme].text}
+      inactiveColor="gray"
+      pressColor={Colors[colorScheme].topNavBarIndicatorColorTurquoise} 
+      indicatorStyle={{backgroundColor: Colors[colorScheme].topNavBarIndicatorColorTurquoise}} />
+  );
+
   return (
-    <TopTabs
-      options={{swipeEnabled: false}}
-      screenOptions={{
-        tabBarPressColor: Colors[colorScheme].topNavBarIndicatorColorTurquoise,
-        tabBarIndicatorStyle: {backgroundColor: Colors[colorScheme].topNavBarIndicatorColorTurquoise},
-      }}>
-      <TopTabs.Header>
-      </TopTabs.Header>
-      <TopTabs.Screen
-        name="index"
-        options={{
-          title: 'Settle'
-        }}
-      />
-      <TopTabs.Screen
-        name="balance"
-        options={{
-          title: 'Balance'
-        }}
-      />
-    </TopTabs>
+    <TabView
+      swipeEnabled={false}
+      renderTabBar={renderTabBar}
+      navigationState={{ index, routes }}
+      renderScene={renderScene}
+      onIndexChange={setIndex} />
   );
 }

app/(tabs)/expenses/balance.tsx

@@ -53,7 +53,7 @@ export default function BalanceScreen() {
       <View style={[styles.container, { backgroundColor: index % 2 == 0 ? Colors[colorScheme].listBackgroundColor1 : Colors[colorScheme].listBackgroundColor2 }]}>
         <View style={styles.item}>
           <Text style={styles.itemText}>{item.user}</Text>
-          <Text style={[styles.itemAmount, { color: item.amount >= 0 ? (item.amount == 0 ? 'black' : '#5CBCA9') : '#E35F52' }]}>
+          <Text style={[styles.itemAmount, { color: item.amount >= 0 ? (item.amount == 0 ? Colors[colorScheme].text : '#5CBCA9') : '#E35F52' }]}>
             {item.amount > 0 ? "+" + item.amount : item.amount} kr.
           </Text>
         </View>
@@ -62,9 +62,8 @@ export default function BalanceScreen() {
   };
 
   return (
-    <View>
+    <View style={{flex: 1}}>
       <FlatList
-        style={{marginTop: 48}}
         data={previousBalance = calculateBalance(data, members, previousBalance)}
         renderItem={renderItem}
       />

app/(tabs)/expenses/index.tsx

@@ -99,9 +99,8 @@ export default function SettleScreen() {
   };
 
   return (
-    <View>       
+    <View style={{flex: 1}}>       
       <FlatList
-        style={{marginTop: 48}}
         data={calculateExpenses(previousBalance = calculateBalance(data, members, previousBalance))}
         renderItem={renderItem}        
       />

app/(tabs)/shoppingList/_layout.tsx

@@ -1,31 +1,39 @@
-import { TopTabs } from "@bacons/expo-router-top-tabs";
 import { useColorScheme } from "react-native";
 import Colors from "../../../constants/Colors";
+import BoughtScreen from './bought';
+import ToBeBoughtScreen from '.';
+import { useState } from 'react';
+import { TabView, SceneMap, TabBar } from 'react-native-tab-view';
+
+const renderScene = SceneMap({
+  index: ToBeBoughtScreen,
+  bought: BoughtScreen,
+});
 
 export default function ListTabLayout() {
   const colorScheme = useColorScheme() ?? 'light';
 
+  const [index, setIndex] = useState(0);
+  const [routes] = useState([
+    { key: 'index', title: 'To Be Bought' },
+    { key: 'bought', title: 'Bought' },
+  ]);
+
+  const renderTabBar = (props: any) => (
+    <TabBar {...props} 
+      style={{backgroundColor: Colors[colorScheme].topNavBarBackgroundColor}}
+      activeColor={Colors[colorScheme].text}
+      inactiveColor="gray"
+      pressColor={Colors[colorScheme].topNavBarIndicatorColorTurquoise} 
+      indicatorStyle={{backgroundColor: Colors[colorScheme].topNavBarIndicatorColorTurquoise}} />
+  );
+
   return (
-    <TopTabs
-      options={{swipeEnabled: false}}
-      screenOptions={{
-        tabBarPressColor: Colors[colorScheme].topNavBarIndicatorColorTurquoise,
-        tabBarIndicatorStyle: {backgroundColor: Colors[colorScheme].topNavBarIndicatorColorTurquoise},
-      }}>
-      <TopTabs.Header>
-      </TopTabs.Header>
-      <TopTabs.Screen
-        name="index"
-        options={{
-          title: 'To Be Bought'
-        }}
-      />
-      <TopTabs.Screen
-        name="bought"
-        options={{
-          title: 'Bought'
-        }}
-      />
-    </TopTabs>
+    <TabView
+      swipeEnabled={false}
+      renderTabBar={renderTabBar}
+      navigationState={{ index, routes }}
+      renderScene={renderScene}
+      onIndexChange={setIndex} />
   );
 }

app/(tabs)/shoppingList/bought.tsx

@@ -71,7 +71,6 @@ export default function BoughtScreen() {
   return (
     <View style={{flex: 1}}>
       <FlatList
-        style={{marginTop: 48}}
         data={products}
         renderItem={renderItem}
       />

app/(tabs)/shoppingList/index.tsx

@@ -219,7 +219,6 @@ export default function ToBeBoughtScreen() {
   return (
     <View style={{flex: 1}}>
       <FlatList
-        style={{marginTop: 48}}
         data={products}
         renderItem={renderItem}
       />

components/LogoAndName.tsx

@@ -8,7 +8,7 @@ export function LogoAndName(
   return (
     <View style={styles.container}>
       <Image style={styles.logo} source={require("../assets/images/coshareLogo.png")} />
-      <Text style={styles.title}> Co-Living </Text>
+      <Text style={styles.title}> CoShare </Text>
     </View>
   );
 }

constants/Colors.ts

@@ -13,6 +13,7 @@ export default {
     tabIconSelected: tintColorLight,
     tabIconSelectedBackground: tintColorTurquoise,
     accentColor: accentColorTurquoise,
+    topNavBarBackgroundColor: '#fff',
     topNavBarIndicatorColorTurquoise: topNavBarIndicatorColorTurquoise,
     listBackgroundColor1: '#eeeeee',
     listBackgroundColor2: '#D3D3D3',
@@ -24,6 +25,7 @@ export default {
     tabIconDefault: '#ccc',
     tabIconSelected: tintColorDark,
     tabIconSelectedBackground: tintColorTurquoise,
+    topNavBarBackgroundColor: '#121212',
     topNavBarIndicatorColorTurquoise: topNavBarIndicatorColorTurquoise,
     listBackgroundColor1: '#282828',
     listBackgroundColor2: '#404040',

handlers/expenses.ts

@@ -42,7 +42,10 @@ class ExpensesHandle implements IExpenses{
                 if(data[key].members != undefined)
                 {
                     this.gun.user(data[key].members).get('fullName').once((name: string) => {
-                        callback(name)
+                        if (name != null)
+                        {
+                            callback(name)
+                        }
                     })
                 }
             }
@@ -58,7 +61,6 @@ class ExpensesHandle implements IExpenses{
         expense.user != undefined &&
         expense.amount != undefined;
     }
-
 }
 
 export function expensesHandle(gun: Gun): IExpenses{

handlers/list.ts

@@ -73,7 +73,10 @@ class ShoppingListHandler implements IShoppingList {
                 if(data[key].members != undefined)
                 {
                     this.gun.user(data[key].members).get('fullName').once((name: string) => {
-                        callback(name)
+                        if (name != null)
+                        {
+                            callback(name)
+                        }
                     })
                 }
             }
@@ -137,7 +140,6 @@ class ShoppingListHandler implements IShoppingList {
         item.data.users != null &&
         item.data.bought != null;
     }
-
 }
 
 export function shoppingListHandler(gun: Gun): IShoppingList {