Merge pull request #6700 from BlueWallet/headernative

Headernative

loc/en.json

@@ -428,6 +428,7 @@
     "details_show_xpub": "Show Wallet XPUB",
     "details_show_addresses": "Show addresses",
     "details_title": "Wallet",
+    "wallets": "Wallets",
     "details_type": "Type",
     "details_use_with_hardware_wallet": "Use with Hardware Wallet",
     "details_wallet_updated": "Wallet updated",

navigation/DetailViewScreensStack.tsx

@@ -1,8 +1,7 @@
+import React, { useCallback, useMemo } from 'react';
 import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
-import React, { useMemo } from 'react';
-import { I18nManager, Platform, TouchableOpacity } from 'react-native';
+import { I18nManager, TouchableOpacity, View } from 'react-native';
 import { Icon } from '@rneui/themed';
-
 import { isDesktop } from '../blue_modules/environment';
 import HeaderRightButton from '../components/HeaderRightButton';
 import navigationStyle, { CloseButtonPosition } from '../components/navigationStyle';
@@ -66,6 +65,7 @@ import SignVerifyStackRoot from './SignVerifyStack';
 import ViewEditMultisigCosignersStackRoot from './ViewEditMultisigCosignersStack';
 import WalletExportStack from './WalletExportStack';
 import WalletXpubStackRoot from './WalletXpubStack';
+import PlusIcon from '../components/icons/PlusIcon';
 
 const DetailViewStackScreensStack = () => {
   const theme = useTheme();
@@ -74,30 +74,38 @@ const DetailViewStackScreensStack = () => {
   const SaveButton = useMemo(() => <HeaderRightButton testID="SaveButton" disabled={true} title={loc.wallets.details_save} />, []);
   const DetailButton = useMemo(() => <HeaderRightButton testID="DetailButton" disabled={true} title={loc.send.create_details} />, []);
 
+  const navigateToAddWallet = useCallback(() => {
+    navigation.navigate('AddWalletRoot');
+  }, [navigation]);
+
   const useWalletListScreenOptions = useMemo<NativeStackNavigationOptions>(() => {
     const SettingsButton = (
-      <TouchableOpacity
-        accessibilityRole="button"
-        accessibilityLabel={loc._.more}
-        testID="SettingsButton"
-        onPress={() => navigation.navigate('Settings')}
-      >
-        <Icon size={22} name="more-horiz" type="material" color={theme.colors.foregroundColor} />
-      </TouchableOpacity>
+      <>
+        <PlusIcon accessibilityRole="button" accessibilityLabel={loc.wallets.add_title} onPress={navigateToAddWallet} />
+        <View style={styles.width28} />
+        <TouchableOpacity
+          accessibilityRole="button"
+          accessibilityLabel={loc._.more}
+          testID="SettingsButton"
+          onPress={() => navigation.navigate('Settings')}
+        >
+          <Icon size={22} name="more-horiz" type="material" color={theme.colors.foregroundColor} />
+        </TouchableOpacity>
+      </>
     );
 
     return {
-      title: '',
-      headerBackTitle: loc.wallets.list_title,
+      title: loc.wallets.wallets,
       navigationBarColor: theme.colors.navigationBarColor,
       headerShown: !isDesktop,
+      headerLargeTitle: true,
       headerStyle: {
         backgroundColor: theme.colors.customHeader,
       },
       headerRight: I18nManager.isRTL ? undefined : () => SettingsButton,
       headerLeft: I18nManager.isRTL ? () => SettingsButton : undefined,
     };
-  }, [navigation, theme.colors.customHeader, theme.colors.foregroundColor, theme.colors.navigationBarColor]);
+  }, [navigateToAddWallet, navigation, theme.colors.customHeader, theme.colors.foregroundColor, theme.colors.navigationBarColor]);
 
   const walletListScreenOptions = useWalletListScreenOptions;
   return (
@@ -264,8 +272,10 @@ const DetailViewStackScreensStack = () => {
         component={SettingsComponent}
         options={navigationStyle({
           headerTransparent: true,
-          title: Platform.select({ ios: loc.settings.header, default: '' }),
-          headerLargeTitle: true,
+          title: loc.settings.header,
+          // workaround to deal with the flicker when headerBackTitleVisible is false
+          headerBackTitleStyle: { fontSize: 0 },
+          headerBackTitleVisible: true,
           headerShadowVisible: false,
           animationTypeForReplace: 'push',
         })(theme)}
@@ -382,3 +392,9 @@ const DetailViewStackScreensStack = () => {
 };
 
 export default DetailViewStackScreensStack;
+
+const styles = {
+  width28: {
+    width: 28,
+  },
+};

package-lock.json

@@ -23,8 +23,8 @@
         "@react-navigation/native": "6.1.17",
         "@react-navigation/native-stack": "6.9.26",
         "@remobile/react-native-qrcode-local-image": "https://github.com/BlueWallet/react-native-qrcode-local-image",
-        "@rneui/base": "^4.0.0-rc.8",
-        "@rneui/themed": "^4.0.0-rc.8",
+        "@rneui/base": "4.0.0-rc.8",
+        "@rneui/themed": "4.0.0-rc.8",
         "@spsina/bip47": "github:BlueWallet/bip47#f4b8047",
         "aezeed": "0.0.5",
         "assert": "2.1.0",

screen/settings/Settings.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Platform, ScrollView, StyleSheet } from 'react-native';
-import { Header } from '../../components/Header';
 import ListItem from '../../components/ListItem';
 import { useExtendedNavigation } from '../../hooks/useExtendedNavigation';
 import loc from '../../loc';
@@ -31,7 +30,6 @@ const Settings = () => {
       contentInsetAdjustmentBehavior="automatic"
       automaticallyAdjustContentInsets
     >
-      {Platform.OS === 'android' ? <Header leftText={loc.settings.header} /> : <></>}
       <ListItem title={loc.settings.general} onPress={() => navigate('GeneralSettings')} testID="GeneralSettings" chevron />
       <ListItem title={loc.settings.currency} onPress={() => navigate('Currency')} testID="Currency" chevron />
       <ListItem title={loc.settings.language} onPress={() => navigate('Language')} testID="Language" chevron />

screen/wallets/WalletsList.tsx

@@ -10,7 +10,6 @@ import DeeplinkSchemaMatch from '../../class/deeplink-schema-match';
 import { ExtendedTransaction, Transaction, TWallet } from '../../class/wallets/types';
 import presentAlert from '../../components/Alert';
 import { FButton, FContainer } from '../../components/FloatButtons';
-import { Header } from '../../components/Header';
 import { useTheme } from '../../components/themes';
 import { TransactionListItem } from '../../components/TransactionListItem';
 import WalletsCarousel from '../../components/WalletsCarousel';
@@ -279,15 +278,13 @@ const WalletsList: React.FC = () => {
   const renderSectionHeader = useCallback(
     (section: { section: { key: any } }) => {
       switch (section.section.key) {
-        case WalletsListSections.CAROUSEL:
-          return isLargeScreen ? null : <Header leftText={loc.wallets.list_title} onNewWalletPress={() => navigate('AddWalletRoot')} />;
         case WalletsListSections.TRANSACTIONS:
           return renderListHeaderComponent();
         default:
           return null;
       }
     },
-    [isLargeScreen, navigate, renderListHeaderComponent],
+    [renderListHeaderComponent],
   );
 
   const renderSectionFooter = useCallback(

screen/wallets/details.js

@@ -202,6 +202,7 @@ const WalletDetails = () => {
   useEffect(() => {
     setOptions({
       headerRight: () => SaveButton,
+      headerBackTitleVisible: true,
     });
   }, [SaveButton, setOptions]);
 

screen/wallets/transactions.js

@@ -138,6 +138,8 @@ const WalletTransactions = ({ navigation }) => {
     setSelectedWalletID(wallet.getID());
     setDataSource([...getTransactionsSliced(limit)]);
     setOptions({
+      headerBackTitle: wallet.getLabel(),
+      headerBackTitleVisible: true,
       headerStyle: {
         backgroundColor: WalletGradient.headerColorFor(wallet.type),
         borderBottomWidth: 0,
@@ -625,6 +627,7 @@ WalletTransactions.navigationOptions = navigationStyle({}, (options, { theme, na
       </TouchableOpacity>
     ),
     title: '',
+    headerBackTitleStyle: { fontSize: 0 },
     headerStyle: {
       backgroundColor: WalletGradient.headerColorFor(route.params.walletType),
       borderBottomWidth: 0,
@@ -633,7 +636,7 @@ WalletTransactions.navigationOptions = navigationStyle({}, (options, { theme, na
       shadowOffset: { height: 0, width: 0 },
     },
     headerTintColor: '#FFFFFF',
-    headerBackTitleVisible: false,
+    headerBackTitleVisible: true,
   };
 });