Merge pull request #57 from sperezm97/fix-category-screen

package.json

@@ -8,9 +8,9 @@
     "eject": "expo eject",
     "test": "jest . --collectCoverage --passWithNoTests",
     "test:update": "jest -u ",
-    "build:apk": "expo build:android -t apk",
-    "build:aab": "expo build:android -t app-bundle",
-    "build:ios": "expo build:ios"
+    "build:apk": "npx expo build:android -t apk",
+    "build:aab": "npx expo build:android -t app-bundle",
+    "build:ios": "npx expo build:ios"
   },
   "dependencies": {
     "@expo/vector-icons": "^10.2.0",

src/component/ActiveAccount/index.js

@@ -23,7 +23,14 @@ const ActiveAccount = () => {
           </View>
           <View style={styles.containerAccount}>
             <Text type="body">Actual Account</Text>
-            <Text type="bodyBold">{activeAccount?.name}</Text>
+            <Text
+              type="bodyBold"
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={styles.actualAccountText}
+            >
+              {activeAccount?.name}
+            </Text>
           </View>
         </View>
         <View>

src/component/ActiveAccount/styles.js

@@ -11,4 +11,7 @@ export default StyleSheet.create({
   totalText: {
     textAlign: 'right',
   },
+  actualAccountText: {
+    width: 200,
+  },
 });

src/navigation/AuthNavigator.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
 import TabNavigator from './TabNavigator';
+import { CategoriesScreen } from '../screens';
 
 const AuthStack = createStackNavigator();
 
@@ -17,6 +18,7 @@ const AuthNavigator = () => (
     keyboardHandlingEnabled
   >
     <AuthStack.Screen name="Main" component={TabNavigator} />
+    <AuthStack.Screen name="Categories" component={CategoriesScreen} />
   </AuthStack.Navigator>
 );
 export default AuthNavigator;

src/navigation/TabNavigator.js

@@ -1,6 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import { useNavigation } from '@react-navigation/native';
-import { useSelector } from 'react-redux';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { AsyncStorage } from 'react-native';
 import AccountsNavigator from './AccountsNavigator';
@@ -10,15 +8,14 @@ import TransactionsNavigator from './TransactionNavigator';
 import { Icon } from '../component';
 import { colors, fonts } from '../styles';
 import layout from '../styles/layout';
-import { getFirstUser } from '../store/common/selectors';
 
 const Tab = createBottomTabNavigator();
 
 const defaultOption = {
   activeTintColor: colors.primaryColor,
-  activeBackgroundColor: 'transparent',
+  activeBackgroundColor: colors.white,
   inactiveTintColor: colors.grey,
-  inactiveBackgroundColor: 'transparent',
+  inactiveBackgroundColor: colors.white,
   showLabel: true,
   showIcon: true,
   adaptive: true,
@@ -32,10 +29,6 @@ const defaultOption = {
   },
   style: {
     ...layout.boxShadow,
-    height: 60,
-    // backgroundColor: colors.black,
-    borderTopLeftRadius: 30,
-    borderTopRightRadius: 30,
   },
 };
 

src/navigation/TransactionNavigator.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
-import { TransactionsCreateScreen, TransactionsListScreen, CategoriesScreen } from '../screens';
+import { TransactionsCreateScreen, TransactionsListScreen } from '../screens';
 
 const TransactionsStack = createStackNavigator();
 
@@ -35,7 +35,6 @@ const TransactionsNavigator = () => (
         gestureDirection: 'vertical',
       }}
     />
-    <TransactionsStack.Screen name="Categories" component={CategoriesScreen} />
   </TransactionsStack.Navigator>
 );
 

src/navigation/index.js

@@ -2,6 +2,7 @@ import 'react-native-gesture-handler';
 import * as React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import RootNavigator from './RootNavigator';
+
 const AppNavigator = () => {
   return (
     <NavigationContainer>

src/styles/layout.js

@@ -20,8 +20,8 @@ export default {
       height: 1,
     },
     shadowOpacity: 0.2,
-    shadowRadius: 3,
-    elevation: 4,
+    shadowRadius: 6,
+    elevation: 6,
   },
 
   isAndroid: Platform.OS == 'android',