ENGB2C-115 Bug fixes (#1998)

* fix: use safe area views from react-native-safe-area-context (#1995)

gets along better with react navigation, see https://reactnavigation.org/docs/handling-safe-area/

* fix: exclude empty buttons generated by separator components (#1993)

* fix(router): add accounts route to AccountSettingsNavigator (#2000)

* fix lint

Co-authored-by: Julien Elbaz <[email protected]>
Co-authored-by: J <[email protected]>

src/components/AnimatedHeader.js

@@ -1,12 +1,7 @@
 // @flow
 import React, { useState, useCallback } from "react";
-import {
-  View,
-  StyleSheet,
-  Platform,
-  SafeAreaView,
-  TouchableOpacity,
-} from "react-native";
+import { View, StyleSheet, Platform, TouchableOpacity } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 import {
   useNavigation,
   useTheme,

src/components/FabActions.js

@@ -97,10 +97,25 @@ function FabAccountActions({ account, parentAccount }: FabAccountActionsProps) {
     ...useActions({ account, parentAccount, colors }),
   ];
 
-  const buttons = allActions.slice(0, 2);
+  // Do not display separators as buttons. (they do not have a label)
+  //
+  // First, count the index at which there are 2 valid buttons.
+  let counter = 0;
+  const sliceIndex =
+    allActions.findIndex(action => {
+      if (action.label) counter++;
+      return counter === 2;
+    }) + 1;
+
+  // Then slice from 0 to the index and ignore invalid button elements.
+  // Chaining methods should not be a big deal given the size of the actions array.
+  const buttons = allActions
+    .slice(0, sliceIndex || undefined)
+    .filter(action => !!action.label)
+    .slice(0, 2);
 
   const actions = {
-    default: allActions.slice(2),
+    default: sliceIndex ? allActions.slice(sliceIndex) : [],
     lending: useLendingActions({ account }),
   };
 

src/components/RootNavigator/AccountSettingsNavigator.js

@@ -4,10 +4,13 @@ import { createStackNavigator } from "@react-navigation/stack";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@react-navigation/native";
 import { ScreenName } from "../../const";
+import Accounts from "../../screens/Accounts";
 import AccountSettingsMain from "../../screens/AccountSettings";
 import EditAccountUnits from "../../screens/AccountSettings/EditAccountUnits";
 import EditAccountName from "../../screens/AccountSettings/EditAccountName";
 import AdvancedLogs from "../../screens/AccountSettings/AdvancedLogs";
+import AccountOrder from "../../screens/Accounts/AccountOrder";
+import AddAccount from "../../screens/Accounts/AddAccount";
 import CurrencySettings from "../../screens/Settings/CryptoAssets/Currencies/CurrencySettings";
 import { getStackNavigatorConfig } from "../../navigation/navigatorConfig";
 
@@ -56,6 +59,15 @@ export default function AccountSettingsNavigator() {
         name={ScreenName.AccountCurrencySettings}
         component={CurrencySettings}
       />
+      <Stack.Screen
+        name={ScreenName.Accounts}
+        component={Accounts}
+        options={{
+          title: t("accounts.title"),
+          headerLeft: () => <AccountOrder />,
+          headerRight: () => <AddAccount />,
+        }}
+      />
     </Stack.Navigator>
   );
 }

src/screens/Portfolio/index.js

@@ -1,7 +1,8 @@
 // @flow
 import React, { useRef, useCallback, useMemo } from "react";
 import { useSelector } from "react-redux";
-import { StyleSheet, FlatList, SafeAreaView, View } from "react-native";
+import { StyleSheet, FlatList, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 import Animated, { interpolateNode } from "react-native-reanimated";
 import { createNativeWrapper } from "react-native-gesture-handler";
 import { useTranslation } from "react-i18next";