From bf3a0b65dc9821043bf59a327ecfd748353ec9ea Mon Sep 17 00:00:00 2001 From: Marcos Rodriguez Velez Date: Wed, 12 Jun 2024 17:50:11 -0400 Subject: [PATCH 1/3] REF: Use builtin large title for header --- loc/en.json | 1 + navigation/DetailViewScreensStack.tsx | 47 ++++++++++++++++++--------- screen/settings/Settings.js | 2 -- screen/wallets/WalletsList.tsx | 5 +-- screen/wallets/details.js | 1 + screen/wallets/transactions.js | 6 ++-- 6 files changed, 39 insertions(+), 23 deletions(-) diff --git a/loc/en.json b/loc/en.json index 2692da545..c9ca242bd 100644 --- a/loc/en.json +++ b/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", diff --git a/navigation/DetailViewScreensStack.tsx b/navigation/DetailViewScreensStack.tsx index b75b494f4..8a1f59ecf 100644 --- a/navigation/DetailViewScreensStack.tsx +++ b/navigation/DetailViewScreensStack.tsx @@ -1,6 +1,6 @@ import { NativeStackNavigationOptions } from '@react-navigation/native-stack'; -import React, { useMemo } from 'react'; -import { I18nManager, Platform, TouchableOpacity } from 'react-native'; +import React, { useCallback, useMemo } from 'react'; +import { I18nManager, TouchableOpacity, View } from 'react-native'; import { Icon } from 'react-native-elements'; import { isDesktop } from '../blue_modules/environment'; @@ -66,6 +66,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 +75,38 @@ const DetailViewStackScreensStack = () => { const SaveButton = useMemo(() => , []); const DetailButton = useMemo(() => , []); + const navigateToAddWallet = useCallback(() => { + navigation.navigate('AddWalletRoot'); + }, [navigation]); + const useWalletListScreenOptions = useMemo(() => { const SettingsButton = ( - navigation.navigate('Settings')} - > - - + <> + + + navigation.navigate('Settings')} + > + + + ); 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 +273,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 +393,9 @@ const DetailViewStackScreensStack = () => { }; export default DetailViewStackScreensStack; + +const styles = { + width28: { + width: 28, + }, +}; diff --git a/screen/settings/Settings.js b/screen/settings/Settings.js index 87833e54d..3a3c2a424 100644 --- a/screen/settings/Settings.js +++ b/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' ?
: <>} navigate('GeneralSettings')} testID="GeneralSettings" chevron /> navigate('Currency')} testID="Currency" chevron /> navigate('Language')} testID="Language" chevron /> diff --git a/screen/wallets/WalletsList.tsx b/screen/wallets/WalletsList.tsx index f96ceba7d..67381c4c1 100644 --- a/screen/wallets/WalletsList.tsx +++ b/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 :
navigate('AddWalletRoot')} />; case WalletsListSections.TRANSACTIONS: return renderListHeaderComponent(); default: return null; } }, - [isLargeScreen, navigate, renderListHeaderComponent], + [renderListHeaderComponent], ); const renderSectionFooter = useCallback( diff --git a/screen/wallets/details.js b/screen/wallets/details.js index cd71d1c6c..8a62f8468 100644 --- a/screen/wallets/details.js +++ b/screen/wallets/details.js @@ -202,6 +202,7 @@ const WalletDetails = () => { useEffect(() => { setOptions({ headerRight: () => SaveButton, + headerBackTitleVisible: true, }); }, [SaveButton, setOptions]); diff --git a/screen/wallets/transactions.js b/screen/wallets/transactions.js index d93424345..e8a6f547c 100644 --- a/screen/wallets/transactions.js +++ b/screen/wallets/transactions.js @@ -113,7 +113,6 @@ const WalletTransactions = ({ navigation }) => { setOptions({ headerTitle: loc.transactions.updating }); setIsRefreshing(true); } else { - setOptions({ headerTitle: '' }); } if (isRefreshing && walletTransactionUpdateStatus === WalletTransactionsStatus.NONE) { @@ -138,6 +137,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 +626,7 @@ WalletTransactions.navigationOptions = navigationStyle({}, (options, { theme, na ), title: '', + headerBackTitleStyle: { fontSize: 0 }, headerStyle: { backgroundColor: WalletGradient.headerColorFor(route.params.walletType), borderBottomWidth: 0, @@ -633,7 +635,7 @@ WalletTransactions.navigationOptions = navigationStyle({}, (options, { theme, na shadowOffset: { height: 0, width: 0 }, }, headerTintColor: '#FFFFFF', - headerBackTitleVisible: false, + headerBackTitleVisible: true, }; }); From bdb25c5a7f0d0010bf1de96fca280b4565f81142 Mon Sep 17 00:00:00 2001 From: Marcos Rodriguez Velez Date: Wed, 12 Jun 2024 18:12:37 -0400 Subject: [PATCH 2/3] FIX: Lint --- navigation/DetailViewScreensStack.tsx | 2 +- package-lock.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/navigation/DetailViewScreensStack.tsx b/navigation/DetailViewScreensStack.tsx index 775e3fd8a..b4403002e 100644 --- a/navigation/DetailViewScreensStack.tsx +++ b/navigation/DetailViewScreensStack.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react'; +import React, { useCallback, useMemo } from 'react'; import { NativeStackNavigationOptions } from '@react-navigation/native-stack'; import { I18nManager, TouchableOpacity, View } from 'react-native'; import { Icon } from '@rneui/themed'; diff --git a/package-lock.json b/package-lock.json index beeedcd10..3d055bf2b 100644 --- a/package-lock.json +++ b/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", From c9097491991214ac94d0b642b8cc06ad543c0b16 Mon Sep 17 00:00:00 2001 From: Marcos Rodriguez Velez Date: Wed, 12 Jun 2024 18:18:05 -0400 Subject: [PATCH 3/3] Update transactions.js --- screen/wallets/transactions.js | 1 + 1 file changed, 1 insertion(+) diff --git a/screen/wallets/transactions.js b/screen/wallets/transactions.js index fac6e4b35..2ca35df94 100644 --- a/screen/wallets/transactions.js +++ b/screen/wallets/transactions.js @@ -113,6 +113,7 @@ const WalletTransactions = ({ navigation }) => { setOptions({ headerTitle: loc.transactions.updating }); setIsRefreshing(true); } else { + setOptions({ headerTitle: '' }); } if (isRefreshing && walletTransactionUpdateStatus === WalletTransactionsStatus.NONE) {