REF: Use new ListItem

2025-01-18 21:35:21 +01:00 · 2020-09-21 21:53:28 -04:00 · 2020-09-21 21:53:28 -04:00 · a296e3073e
commit a296e3073e
parent 6314484aa5
13 changed files with 111 additions and 109 deletions
--- a/BlueComponents.js
+++ b/BlueComponents.js
@ -3,7 +3,7 @@
 import React, { Component, useState } from 'react';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import PropTypes from 'prop-types';
-import { Icon, Input, Text, Header, ListItem } from 'react-native-elements';
+import { Icon, Input, Text, Header, ListItem, Avatar } from 'react-native-elements';
 import {
  TouchableOpacity,
  TouchableWithoutFeedback,
@ -20,6 +20,7 @@ import {
  SafeAreaView,
  InputAccessoryView,
  Platform,
+  Switch,
  FlatList,
  TextInput,
  PixelRatio,
@ -699,55 +700,51 @@ export const BlueTextCenteredHooks = props => {
  return <Text {...props} style={{ color: colors.foregroundColor, textAlign: 'center' }} />;
 };

-export const BlueListItem = React.memo(props => (
-  <ListItem
-    testID={props.testID}
-    bottomDivider
-    containerStyle={{
-      backgroundColor: 'transparent',
-      borderBottomColor: BlueCurrentTheme.colors.lightBorder,
-      paddingTop: 16,
-      paddingBottom: 16,
-    }}
-    titleStyle={{
-      color: props.disabled ? BlueCurrentTheme.colors.buttonDisabledTextColor : BlueCurrentTheme.colors.foregroundColor,
-      fontSize: 16,
-      fontWeight: '500',
-    }}
-    subtitleStyle={{ flexWrap: 'wrap', color: BlueCurrentTheme.colors.alternativeTextColor, fontWeight: '400', fontSize: 14 }}
-    subtitleNumberOfLines={1}
-    titleNumberOfLines={0}
-    Component={TouchableOpacity}
-    {...props}
-  />
-));
-
-export const BlueListItemHooks = props => {
+export const BlueListItem = React.memo(props => {
  const { colors } = useTheme();
  return (
    <ListItem
-      testID={props.testID}
+      containerStyle={props.containerStyle ?? { backgroundColor: 'transparent' }}
+      Component={props.Component ?? TouchableOpacity}
      bottomDivider
-      containerStyle={{
-        backgroundColor: 'transparent',
-        borderBottomColor: colors.lightBorder,
-        paddingTop: 16,
-        paddingBottom: 16,
-      }}
-      titleStyle={{
-        color: props.disabled ? colors.buttonDisabledTextColor : colors.foregroundColor,
-        fontSize: 16,
-        fontWeight: '500',
-      }}
-      rightTitleStyle={{ flexWrap: 'wrap', color: colors.alternativeTextColor, fontWeight: '400', fontSize: 14 }}
-      subtitleStyle={{ flexWrap: 'wrap', color: colors.alternativeTextColor, fontWeight: '400', fontSize: 14 }}
-      subtitleNumberOfLines={1}
-      titleNumberOfLines={0}
-      Component={TouchableOpacity}
-      {...props}
-    />
+      testID={props.testID}
+      onPress={props.onPress}
+    >
+      {props.leftAvatar && <Avatar>{props.leftAvatar}</Avatar>}
+      {props.leftIcon && <Avatar icon={props.leftIcon} />}
+      <ListItem.Content>
+        <ListItem.Title
+          style={{
+            color: props.disabled ? colors.buttonDisabledTextColor : colors.foregroundColor,
+            fontSize: 16,
+            fontWeight: '500',
+          }}
+          numberOfLines={0}
+        >
+          {props.title}
+        </ListItem.Title>
+        {props.subtitle && (
+          <ListItem.Subtitle
+            numberOfLines={1}
+            style={{ flexWrap: 'wrap', color: colors.alternativeTextColor, fontWeight: '400', fontSize: 14 }}
+          >
+            {props.subtitle}
+          </ListItem.Subtitle>
+        )}
+      </ListItem.Content>
+      <ListItem.Content right>
+        {props.rightTitle && (
+          <ListItem.Title style={props.rightTitleStyle} numberOfLines={0} right>
+            {props.rightTitle}
+          </ListItem.Title>
+        )}
+      </ListItem.Content>
+      {props.chevron && <ListItem.Chevron />}
+      {props.rightIcon && <Avatar icon={props.rightIcon} />}
+      {props.switch && <Switch {...props.switch} />}
+    </ListItem>
  );
-};
+});

 export const BlueFormLabel = props => {
  const { colors } = useTheme();
@ -1866,6 +1863,12 @@ export const BlueTransactionListItem = React.memo(({ item, itemPriceUnit = Bitco
        Component={TouchableOpacity}
        rightTitle={rowTitle()}
        rightTitleStyle={rowTitleStyle()}
+        containerStyle={{
+          backgroundColor: 'transparent',
+          borderBottomColor: colors.lightBorder,
+          paddingTop: 16,
+          paddingBottom: 16,
+        }}
      />
    </View>
  );
--- a/package-lock.json
+++ b/package-lock.json
@ -6722,13 +6722,15 @@
          "version": "1.0.0",
          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "is-glob": {
          "version": "2.0.1",
          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
          "dev": true,
+          "optional": true,
          "requires": {
            "is-extglob": "^1.0.0"
          }
@ -9490,6 +9492,7 @@
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
      "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
      "dev": true,
+      "optional": true,
      "requires": {
        "is-glob": "^2.0.0"
      },
@ -9498,13 +9501,15 @@
          "version": "1.0.0",
          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "is-glob": {
          "version": "2.0.1",
          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
          "dev": true,
+          "optional": true,
          "requires": {
            "is-extglob": "^1.0.0"
          }
@ -13995,7 +14000,8 @@
          "version": "1.0.0",
          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "is-glob": {
          "version": "2.0.1",
@ -15537,7 +15543,8 @@
          "version": "5.1.2",
          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "string_decoder": {
          "version": "1.1.1",
--- a/screen/settings/GeneralSettings.js
+++ b/screen/settings/GeneralSettings.js
@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { ScrollView, Platform, TouchableWithoutFeedback, TouchableOpacity, StyleSheet } from 'react-native';
-import { BlueLoading, BlueTextHooks, BlueSpacing20, BlueListItemHooks, BlueNavigationStyle, BlueCard } from '../../BlueComponents';
+import { BlueLoading, BlueTextHooks, BlueSpacing20, BlueListItem, BlueNavigationStyle, BlueCard } from '../../BlueComponents';
 import { AppStorage } from '../../class';
 import { useNavigation, useTheme } from '@react-navigation/native';
 import HandoffSettings from '../../class/handoff';
@ -58,17 +58,12 @@ const GeneralSettings = () => {
    <ScrollView style={stylesWithThemeHook.scroll}>
      {BlueApp.getWallets().length > 1 && (
        <>
-          <BlueListItemHooks
-            component={TouchableOpacity}
-            onPress={() => navigate('DefaultView')}
-            title={loc.settings.default_title}
-            chevron
-          />
+          <BlueListItem component={TouchableOpacity} onPress={() => navigate('DefaultView')} title={loc.settings.default_title} chevron />
        </>
      )}
      {Platform.OS === 'ios' ? (
        <>
-          <BlueListItemHooks
+          <BlueListItem
            hideChevron
            title={loc.settings.general_continuity}
            Component={TouchableWithoutFeedback}
@ -80,7 +75,7 @@ const GeneralSettings = () => {
          <BlueSpacing20 />
        </>
      ) : null}
-      <BlueListItemHooks
+      <BlueListItem
        Component={TouchableWithoutFeedback}
        title={loc.settings.general_adv_mode}
        switch={{ onValueChange: onAdvancedModeSwitch, value: isAdancedModeEnabled }}
--- a/screen/settings/NetworkSettings.js
+++ b/screen/settings/NetworkSettings.js
@ -1,6 +1,6 @@
 import React from 'react';
 import { ScrollView, StyleSheet } from 'react-native';
-import { SafeBlueArea, BlueListItemHooks, BlueNavigationStyle } from '../../BlueComponents';
+import { SafeBlueArea, BlueListItem, BlueNavigationStyle } from '../../BlueComponents';
 import { useNavigation, useTheme } from '@react-navigation/native';
 import loc from '../../loc';

@ -29,9 +29,9 @@ const NetworkSettings = () => {
  return (
    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={styles.root}>
      <ScrollView>
-        <BlueListItemHooks title={loc.settings.network_electrum} onPress={navigateToElectrumSettings} chevron />
-        <BlueListItemHooks title={loc.settings.lightning_settings} onPress={navigateToLightningSettings} chevron />
-        <BlueListItemHooks title={loc.settings.network_broadcast} onPress={navigateToBroadcast} chevron />
+        <BlueListItem title={loc.settings.network_electrum} onPress={navigateToElectrumSettings} chevron />
+        <BlueListItem title={loc.settings.lightning_settings} onPress={navigateToLightningSettings} chevron />
+        <BlueListItem title={loc.settings.network_broadcast} onPress={navigateToBroadcast} chevron />
      </ScrollView>
    </SafeBlueArea>
  );
--- a/screen/settings/about.js
+++ b/screen/settings/about.js
@ -7,7 +7,7 @@ import {
  BlueButton,
  SafeBlueArea,
  BlueCard,
-  BlueListItemHooks,
+  BlueListItem,
  BlueNavigationStyle,
  BlueLoadingHook,
 } from '../../BlueComponents';
@ -115,7 +115,7 @@ const About = () => {
            <BlueButton onPress={handleOnRatePress} title={loc.settings.about_review + ' ⭐🙏'} />
          </View>
        </BlueCard>
-        <BlueListItemHooks
+        <BlueListItem
          leftIcon={{
            name: 'twitter',
            type: 'font-awesome',
@ -124,7 +124,7 @@ const About = () => {
          onPress={handleOnTwitterPress}
          title={loc.settings.about_sm_twitter}
        />
-        <BlueListItemHooks
+        <BlueListItem
          leftIcon={{
            name: 'telegram',
            type: 'font-awesome',
@ -133,7 +133,7 @@ const About = () => {
          onPress={handleOnTelegramPress}
          title={loc.settings.about_sm_telegram}
        />
-        <BlueListItemHooks
+        <BlueListItem
          leftIcon={{
            name: 'github',
            type: 'font-awesome',
@ -154,7 +154,7 @@ const About = () => {
            <BlueTextCentered>Electrum server</BlueTextCentered>
          </View>
        </BlueCard>
-        <BlueListItemHooks
+        <BlueListItem
          leftIcon={{
            name: 'book',
            type: 'font-awesome',
@ -164,7 +164,7 @@ const About = () => {
          onPress={handleOnReleaseNotesPress}
          title={loc.settings.about_release_notes}
        />
-        <BlueListItemHooks
+        <BlueListItem
          leftIcon={{
            name: 'law',
            type: 'octicon',
@ -174,7 +174,7 @@ const About = () => {
          onPress={handleOnLicensingPress}
          title="MIT License"
        />
-        <BlueListItemHooks
+        <BlueListItem
          leftIcon={{
            name: 'flask',
            type: 'font-awesome',
--- a/screen/settings/currency.js
+++ b/screen/settings/currency.js
@ -1,8 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { FlatList, TouchableOpacity, ActivityIndicator, View, StyleSheet } from 'react-native';
-import { SafeBlueArea, BlueListItemHooks, BlueTextHooks, BlueCard, BlueNavigationStyle } from '../../BlueComponents';
+import { SafeBlueArea, BlueListItem, BlueTextHooks, BlueCard, BlueNavigationStyle } from '../../BlueComponents';
 import PropTypes from 'prop-types';
-import { Icon } from 'react-native-elements';
 import { FiatUnit } from '../../models/fiatUnit';
 import loc from '../../loc';
 import { useTheme } from '@react-navigation/native';
@ -52,11 +51,11 @@ const Currency = () => {
          extraData={data}
          renderItem={({ item }) => {
            return (
-              <BlueListItemHooks
+              <BlueListItem
                disabled={isSavingNewPreferredCurrency}
                title={`${item.endPointKey} (${item.symbol})`}
                {...(selectedCurrency.endPointKey === item.endPointKey
-                  ? { rightIcon: <Icon name="check" type="octaicon" color="#0070FF" /> }
+                  ? { rightIcon: { name: 'check', type: 'octaicon', color: '#0070FF' } }
                  : { hideChevron: true })}
                Component={TouchableOpacity}
                onPress={async () => {
--- a/screen/settings/defaultView.js
+++ b/screen/settings/defaultView.js
@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { View, TouchableWithoutFeedback, StyleSheet } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { SafeBlueArea, BlueCard, BlueNavigationStyle, BlueListItemHooks, BlueTextHooks } from '../../BlueComponents';
+import { SafeBlueArea, BlueCard, BlueNavigationStyle, BlueListItem, BlueTextHooks } from '../../BlueComponents';
 import OnAppLaunch from '../../class/on-app-launch';
 import loc from '../../loc';
 const BlueApp = require('../../BlueApp');
@ -57,7 +57,7 @@ const DefaultView = () => {
  return (
    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={styles.flex}>
      <View>
-        <BlueListItemHooks
+        <BlueListItem
          title={loc.settings.default_wallets}
          Component={TouchableWithoutFeedback}
          switch={{
@ -70,7 +70,7 @@ const DefaultView = () => {
          <BlueTextHooks>{loc.settings.default_desc}</BlueTextHooks>
        </BlueCard>
        {!viewAllWalletsEnabled && (
-          <BlueListItemHooks title={loc.settings.default_info} onPress={selectWallet} rightTitle={defaultWalletLabel} chevron />
+          <BlueListItem title={loc.settings.default_info} onPress={selectWallet} rightTitle={defaultWalletLabel} chevron />
        )}
      </View>
    </SafeBlueArea>
--- a/screen/settings/encryptStorage.js
+++ b/screen/settings/encryptStorage.js
@ -8,7 +8,7 @@ import {
  SafeBlueArea,
  BlueSpacing20,
  BlueCard,
-  BlueListItemHooks,
+  BlueListItem,
  BlueHeaderDefaultSubHooks,
  BlueTextHooks,
  BlueNavigationStyle,
@ -150,7 +150,7 @@ const EncryptStorage = () => {
        {biometrics.isDeviceBiometricCapable && (
          <>
            <BlueHeaderDefaultSubHooks leftText="biometrics" rightComponent={null} />
-            <BlueListItemHooks
+            <BlueListItem
              title={loc.formatString(loc.settings.encrypt_use, { type: biometrics.biometricsType })}
              Component={TouchableWithoutFeedback}
              switch={{ value: biometrics.isBiometricsEnabled, onValueChange: onUseBiometricSwitch }}
@ -162,7 +162,7 @@ const EncryptStorage = () => {
          </>
        )}
        <BlueHeaderDefaultSubHooks leftText={loc.settings.encrypt_tstorage} rightComponent={null} />
-        <BlueListItemHooks
+        <BlueListItem
          testID="EncyptedAndPasswordProtected"
          hideChevron
          title={loc.settings.encrypt_enc_and_pass}
@ -170,7 +170,7 @@ const EncryptStorage = () => {
          switch={{ onValueChange: onEncryptStorageSwitch, value: storageIsEncrypted }}
        />
        {Platform.OS === 'ios' && (
-          <BlueListItemHooks
+          <BlueListItem
            hideChevron
            title={loc.settings.encrypt_del_uninstall}
            Component={TouchableWithoutFeedback}
@ -181,7 +181,7 @@ const EncryptStorage = () => {
          />
        )}
        {storageIsEncrypted && (
-          <BlueListItemHooks
+          <BlueListItem
            onPress={navigateToPlausibleDeniability}
            title={loc.settings.plausible_deniability}
            chevron
--- a/screen/settings/language.js
+++ b/screen/settings/language.js
@ -1,7 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { FlatList, StyleSheet } from 'react-native';
-import { SafeBlueArea, BlueListItemHooks, BlueCard, BlueLoadingHook, BlueNavigationStyle, BlueTextHooks } from '../../BlueComponents';
-import { Icon } from 'react-native-elements';
+import { SafeBlueArea, BlueListItem, BlueCard, BlueLoadingHook, BlueNavigationStyle, BlueTextHooks } from '../../BlueComponents';
 import { AvailableLanguages } from '../../loc/languages';
 import loc from '../../loc';

@ -22,7 +21,7 @@ const Language = () => {
  const renderItem = useCallback(
    ({ item }) => {
      return (
-        <BlueListItemHooks
+        <BlueListItem
          onPress={() => {
            console.log('setLanguage', item.value);
            loc.saveLanguage(item.value);
@ -31,7 +30,7 @@ const Language = () => {
          title={item.label}
          {...(language === item.value
            ? {
-                rightIcon: <Icon name="check" type="octaicon" color="#0070FF" />,
+                rightIcon: { name: 'check', type: 'octaicon', color: '#0070FF' },
              }
            : { hideChevron: true })}
        />
--- a/screen/settings/notificationSettings.js
+++ b/screen/settings/notificationSettings.js
@ -5,7 +5,7 @@ import {
  BlueLoading,
  BlueTextHooks,
  BlueSpacing20,
-  BlueListItemHooks,
+  BlueListItem,
  BlueNavigationStyle,
  BlueCard,
  BlueButton,
@ -101,7 +101,7 @@ const NotificationSettings = () => {
    <BlueLoading />
  ) : (
    <ScrollView style={stylesWithThemeHook.scroll}>
-      <BlueListItemHooks
+      <BlueListItem
        Component={TouchableWithoutFeedback}
        title={loc.settings.push_notifications}
        switch={{ onValueChange: onNotificationsSwitch, value: isNotificationsEnabled }}
--- a/screen/settings/settings.js
+++ b/screen/settings/settings.js
@ -1,6 +1,6 @@
 import React from 'react';
 import { ScrollView, TouchableOpacity, StyleSheet, StatusBar } from 'react-native';
-import { BlueListItemHooks, BlueHeaderDefaultSubHooks } from '../../BlueComponents';
+import { BlueListItem, BlueHeaderDefaultSubHooks } from '../../BlueComponents';
 import { useNavigation } from '@react-navigation/native';
 import loc from '../../loc';

@ -17,24 +17,24 @@ const Settings = () => {
    <ScrollView style={styles.root}>
      <StatusBar barStyle="default" />
      <BlueHeaderDefaultSubHooks leftText={loc.settings.header} rightComponent={null} />
-      <BlueListItemHooks title={loc.settings.general} component={TouchableOpacity} onPress={() => navigate('GeneralSettings')} chevron />
-      <BlueListItemHooks title={loc.settings.currency} component={TouchableOpacity} onPress={() => navigate('Currency')} chevron />
-      <BlueListItemHooks title={loc.settings.language} component={TouchableOpacity} onPress={() => navigate('Language')} chevron />
-      <BlueListItemHooks
+      <BlueListItem title={loc.settings.general} component={TouchableOpacity} onPress={() => navigate('GeneralSettings')} chevron />
+      <BlueListItem title={loc.settings.currency} component={TouchableOpacity} onPress={() => navigate('Currency')} chevron />
+      <BlueListItem title={loc.settings.language} component={TouchableOpacity} onPress={() => navigate('Language')} chevron />
+      <BlueListItem
        title={loc.settings.encrypt_title}
        onPress={() => navigate('EncryptStorage')}
        component={TouchableOpacity}
        testID="SecurityButton"
        chevron
      />
-      <BlueListItemHooks title={loc.settings.network} component={TouchableOpacity} onPress={() => navigate('NetworkSettings')} chevron />
-      <BlueListItemHooks
+      <BlueListItem title={loc.settings.network} component={TouchableOpacity} onPress={() => navigate('NetworkSettings')} chevron />
+      <BlueListItem
        title={loc.settings.notifications}
        component={TouchableOpacity}
        onPress={() => navigate('NotificationSettings')}
        chevron
      />
-      <BlueListItemHooks
+      <BlueListItem
        title={loc.settings.about}
        component={TouchableOpacity}
        onPress={() => navigate('About')}
--- a/screen/wallets/add.js
+++ b/screen/wallets/add.js
@ -16,7 +16,7 @@ import AsyncStorage from '@react-native-community/async-storage';
 import {
  BlueTextCenteredHooks,
  BlueTextHooks,
-  BlueListItemHooks,
+  BlueListItem,
  LightningButton,
  BitcoinButton,
  BlueFormLabel,
@ -27,7 +27,6 @@ import {
 } from '../../BlueComponents';
 import { HDSegwitBech32Wallet, SegwitP2SHWallet, HDSegwitP2SHWallet, LightningCustodianWallet, AppStorage } from '../../class';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
-import { Icon } from 'react-native-elements';
 import { useTheme, useNavigation } from '@react-navigation/native';
 import { Chain } from '../../models/bitcoinUnits';
 import loc from '../../loc';
@ -312,36 +311,36 @@ const WalletsAdd = () => {
                <View>
                  <BlueSpacing20 />
                  <Text style={[styles.advancedText, stylesHook.advancedText]}>{loc.settings.advanced_options}</Text>
-                  <BlueListItemHooks
+                  <BlueListItem
                    containerStyle={[styles.noPadding, stylesHook.noPadding]}
                    bottomDivider={false}
                    onPress={() => setSelectedIndex(0)}
                    title={HDSegwitBech32Wallet.typeReadable}
                    {...(selectedIndex === 0
                      ? {
-                          rightIcon: <Icon name="check" type="octaicon" color="#0070FF" />,
+                          rightIcon: { name: 'check', type: 'octaicon', color: '#0070FF' },
                        }
                      : { hideChevron: true })}
                  />
-                  <BlueListItemHooks
+                  <BlueListItem
                    containerStyle={[styles.noPadding, stylesHook.noPadding]}
                    bottomDivider={false}
                    onPress={() => setSelectedIndex(1)}
                    title={SegwitP2SHWallet.typeReadable}
                    {...(selectedIndex === 1
                      ? {
-                          rightIcon: <Icon name="check" type="octaicon" color="#0070FF" />,
+                          rightIcon: { name: 'check', type: 'octaicon', color: '#0070FF' },
                        }
                      : { hideChevron: true })}
                  />
-                  <BlueListItemHooks
+                  <BlueListItem
                    containerStyle={[styles.noPadding, stylesHook.noPadding]}
                    bottomDivider={false}
                    onPress={() => setSelectedIndex(2)}
                    title={HDSegwitP2SHWallet.typeReadable}
                    {...(selectedIndex === 2
                      ? {
-                          rightIcon: <Icon name="check" type="octaicon" color="#0070FF" />,
+                          rightIcon: { name: 'check', type: 'octaicon', color: '#0070FF' },
                        }
                      : { hideChevron: true })}
                  />
@ -351,7 +350,7 @@ const WalletsAdd = () => {
              return (
                <>
                  <BlueSpacing20 />
-                  <Text style={styles.advancedText}>{loc.settings.advanced_options}</Text>
+                  <Text style={[styles.advancedText, stylesHook.advancedText]}>{loc.settings.advanced_options}</Text>
                  <BlueSpacing20 />
                  <BlueTextHooks>Connect to your LNDHub</BlueTextHooks>
                  <View style={[styles.lndUri, stylesHook.lndUri]}>
--- a/screen/wallets/transactions.js
+++ b/screen/wallets/transactions.js
@ -26,7 +26,7 @@ import {
  BlueTransactionListItem,
  BlueWalletNavigationHeader,
  BlueAlertWalletExportReminder,
-  BlueListItemHooks,
+  BlueListItem,
 } from '../../BlueComponents';
 import WalletGradient from '../../class/wallet-gradient';
 import { Icon } from 'react-native-elements';
@ -376,7 +376,7 @@ const WalletTransactions = () => {
      >
        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'position' : null}>
          <View style={[styles.advancedTransactionOptionsModalContent, stylesHook.advancedTransactionOptionsModalContent]}>
-            <BlueListItemHooks
+            <BlueListItem
              hideChevron
              component={TouchableOpacity}
              onPress={() => {
@ -390,7 +390,7 @@ const WalletTransactions = () => {
              }}
              title={loc.lnd.refill}
            />
-            <BlueListItemHooks
+            <BlueListItem
              hideChevron
              component={TouchableOpacity}
              onPress={() => {
@ -403,7 +403,7 @@ const WalletTransactions = () => {
              title={loc.lnd.refill_external}
            />

-            <BlueListItemHooks
+            <BlueListItem
              hideChevron
              component={TouchableOpacity}
              onPress={() => {
@ -413,7 +413,7 @@ const WalletTransactions = () => {
              title={loc.lnd.refill_card}
            />

-            <BlueListItemHooks
+            <BlueListItem
              title={loc.lnd.exchange}
              hideChevron
              component={TouchableOpacity}