REF: Use new icons package#8271
Conversation
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
✅ Build 7.2.4 (1770094673) has been uploaded to TestFlight and will be available for testing soon. |
|
✅ Build 7.2.4 (1770171049) has been uploaded to TestFlight and will be available for testing soon. |
|
✅ Build 7.2.4 (1770171341) has been uploaded to TestFlight and will be available for testing soon. |
|
✅ Build 7.2.4 (1770178938) has been uploaded to TestFlight and will be available for testing soon. |
|
✅ Build 7.2.4 (1770178538) has been uploaded to TestFlight and will be available for testing soon. |
There was a problem hiding this comment.
Pull request overview
This PR removes the React Native Elements UI dependency and migrates icon usage to @react-native-vector-icons/*, adding lightweight in-repo replacements for common UI primitives (Icon, ListItem, Avatar, Badge, Divider) and updating screens/components accordingly.
Changes:
- Removed
@rneui/base/@rneui/themedand replaced usages with local components. - Migrated vector icons to the per-family
@react-native-vector-icons/*packages; updated Metro + Jest config to support the new icon imports/mocks. - Updated several wallet/transaction screens and list rows (including sample-transaction handling and Coin Control list rendering).
Reviewed changes
Copilot reviewed 69 out of 72 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/unit/transaction-status.test.tsx | Removes RNEUI themed mock now that RNEUI is no longer used. |
| tests/mocks/vector-icons.js | Adds Jest mock for @react-native-vector-icons/* modules. |
| tests/e2e/bluewallet.spec.js | Cleans up commented assertion line. |
| screen/wallets/signVerify.tsx | Switches from RNEUI Icon to local components/Icon. |
| screen/wallets/addMultisigStep2.tsx | Switches to local Icon and fixes Octicons type string. |
| screen/wallets/WalletsList.tsx | Adds sample-transaction press behavior and disables navigation for samples. |
| screen/wallets/WalletTransactions.tsx | Adds sample-transaction press behavior and disables navigation for samples. |
| screen/wallets/WalletExport.tsx | Switches to local Icon. |
| screen/wallets/ViewEditMultisigCosigners.tsx | Replaces RNEUI Badge/Icon with local components. |
| screen/wallets/ProvideEntropy.tsx | Switches to local Icon. |
| screen/wallets/MultisigAdvanced.tsx | Switches to local Icon. |
| screen/transactions/TransactionStatus.tsx | Switches to local Icon. |
| screen/transactions/CPFP.js | Replaces RNEUI Text with react-native Text. |
| screen/settings/IsItMyAddress.tsx | Migrates icons to @react-native-vector-icons/* and divider to local Divider. |
| screen/settings/ElectrumSettings.tsx | Replaces RNEUI Divider and updates ListItem usage after refactor. |
| screen/settings/About.tsx | Migrates icons to @react-native-vector-icons/* and adjusts icon props. |
| screen/send/success.tsx | Replaces RNEUI Text with react-native Text. |
| screen/send/psbtMultisig.tsx | Switches to local Icon. |
| screen/send/create.tsx | Switches to local Icon. |
| screen/send/SendDetails.tsx | Switches to local Icon. |
| screen/send/Confirm.tsx | Replaces RNEUI Text with react-native Text. |
| screen/send/CoinControl.tsx | Replaces RNEUI components with local ones and refactors list row rendering. |
| screen/receive/AztecoRedeem.tsx | Switches to local Icon. |
| screen/lnd/lnurlPay.tsx | Switches to local Icon. |
| screen/lnd/lnurlAuth.tsx | Switches to local Icon. |
| screen/lnd/lndViewInvoice.tsx | Switches to local Icon. |
| screen/lnd/lndCreateInvoice.tsx | Switches to local Icon. |
| screen/lnd/ScanLNDInvoice.tsx | Switches to local Icon. |
| package.json | Removes RNEUI deps; adds per-family vector-icons deps; bumps react-native-screens. |
| package-lock.json | Locks dependency graph changes from removing RNEUI and adding vector-icons families. |
| navigation/helpers/getWalletTransactionsOptions.tsx | Switches to local Icon. |
| metro.config.js | Adds Metro aliases for legacy react-native-vector-icons/* import paths. |
| jest.config.js | Removes @rneui from transform allowlist and maps vector-icons packages to a mock. |
| ios/Podfile.lock | Updates pods for vector-icons family packages and react-native-screens. |
| ios/Localizable.xcstrings | Adds a new localization entry and bumps xcstrings version. |
| ios/BlueWallet/Info.plist | Adds FontAwesome6 + MaterialDesignIcons font entries. |
| components/platform/index.tsx | Migrates vector icon imports to @react-native-vector-icons/* and updates rendering. |
| components/icons/TransactionPendingIcon.tsx | Switches to local Icon. |
| components/icons/TransactionOutgoingIcon.tsx | Switches to local Icon. |
| components/icons/TransactionOnchainIcon.tsx | Switches to local Icon. |
| components/icons/TransactionOffchainIncomingIcon.tsx | Switches to local Icon. |
| components/icons/TransactionOffchainIcon.tsx | Switches to local Icon. |
| components/icons/TransactionIncomingIcon.tsx | Switches to local Icon. |
| components/icons/TransactionExpiredIcon.tsx | Switches to local Icon. |
| components/icons/SettingsButton.tsx | Switches to local Icon and fixes alignment style. |
| components/addresses/AddressItem.tsx | Removes RNEUI ListItem and renders a custom row layout. |
| components/WatchOnlyWarning.tsx | Switches to local Icon. |
| components/WalletToImport.tsx | Replaces RNEUI Text with react-native Text. |
| components/TransactionPendingIconBig.tsx | Switches to local Icon. |
| components/TransactionListItem.tsx | Extends item press behavior + props; integrates with refactored ListItem. |
| components/SettingsBlockExplorerCustomUrlListItem.tsx | Removes RNEUI ListItem usage and renders a custom row layout. |
| components/SecondButton.tsx | Switches to local Icon. |
| components/MultipleStepsListItem.tsx | Switches to local Icon. |
| components/ManageWalletsListItem.tsx | Replaces RNEUI swipeable list item with gesture-handler Swipeable. |
| components/ListItem.tsx | Replaces RNEUI ListItem with an in-repo Pressable-based implementation. |
| components/InputAccessoryAllFunds.tsx | Replaces RNEUI Text with react-native Text. |
| components/Icon.tsx | Introduces a local icon wrapper over @react-native-vector-icons/*. |
| components/HeaderMenuButton.tsx | Switches to local Icon. |
| components/DynamicQRCode.tsx | Replaces RNEUI Text with react-native Text. |
| components/Divider.tsx | Adds a local divider component. |
| components/CoinsSelected.tsx | Switches from RNEUI Avatar to local Avatar. |
| components/CameraScreen.tsx | Switches to local Icon. |
| components/Button.tsx | Switches to local Icon. |
| components/BottomModal.tsx | Switches to local Icon and updates FontAwesome6 type string. |
| components/BlurredBalanceView.tsx | Switches to local Icon. |
| components/BlueBigCheckmark.tsx | Switches to local Icon. |
| components/Badge.tsx | Adds a local badge component. |
| components/Avatar.tsx | Adds a local avatar component. |
| components/ArrowPicker.tsx | Switches to local Icon and react-native Text. |
| components/AmountInput.tsx | Switches RNEUI Badge/Icon to local components and updates badge styling. |
| components/AddWalletButton.tsx | Switches to local Icon and fixes alignment style. |
| BlueComponents.js | Replaces RNEUI Text/Icon usage with react-native Text + local Icon. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import { Dimensions, Platform, Pressable, StyleSheet, Text, TextInput, View } from 'react-native'; | ||
| import Icon from './components/Icon'; |
There was a problem hiding this comment.
BlueText previously wrapped @rneui/themed's Text, which supports heading props like h4. After switching to react-native's Text, those props are now forwarded to the native component (causing RN warnings about unknown props) and the heading styling is lost. Consider updating BlueText to explicitly support the subset of h* props used in the app (e.g., map h4 to a fontSize/fontWeight preset) and strip unsupported props before passing them to Text.
There was a problem hiding this comment.
@copilot open a new pull request to apply changes based on this feedback
| id: 'telegram', | ||
| title: loc.settings.about_sm_telegram, | ||
| leftIcon: <Icon name="telegram-plane" size={24} color={colors.foregroundColor} />, | ||
| leftIcon: <Icon name="telegram-plane" size={24} color={colors.foregroundColor} iconStyle="brand" />, | ||
| onPress: handleOnTelegramPress, |
There was a problem hiding this comment.
@react-native-vector-icons/fontawesome5 doesn't support an iconStyle="brand" prop (that was from the RNEUI Icon API). For FontAwesome5, brand icons typically require the boolean brand prop (or otherwise selecting the correct style), otherwise icons like telegram-plane/github may not render. Update these icon usages to the props supported by FontAwesome5.
There was a problem hiding this comment.
@copilot open a new pull request to apply changes based on this feedback
| id: 'github', | ||
| title: loc.settings.about_sm_github, | ||
| leftIcon: <Icon name="github" size={24} color={colors.foregroundColor} />, | ||
| leftIcon: <Icon name="github" size={24} color={colors.foregroundColor} iconStyle="brand" />, | ||
| onPress: handleOnGithubPress, |
There was a problem hiding this comment.
Same issue as above: iconStyle="brand" isn't a supported prop on @react-native-vector-icons/fontawesome5. Use the appropriate FontAwesome5 style-selection props (e.g. brand) so the github icon reliably renders.
There was a problem hiding this comment.
@copilot open a new pull request to apply changes based on this feedback
| const styles = StyleSheet.create({ | ||
| divider: { | ||
| height: StyleSheet.hairlineWidth, | ||
| backgroundColor: 'rgba(0,0,0,0.12)', | ||
| alignSelf: 'stretch', | ||
| }, |
There was a problem hiding this comment.
The divider color is hard-coded to rgba(0,0,0,0.12), which won't adapt to theming (and can be nearly invisible in dark mode). Since most components use themed border colors (e.g. colors.formBorder in components/ListItem.tsx), consider wiring this Divider to useTheme() or at least exposing a color prop and defaulting to the theme's border color.
There was a problem hiding this comment.
@copilot open a new pull request to apply changes based on this feedback
| "react-native-svg": "15.12.1", | ||
| "react-native-tcp-socket": "6.3.0", | ||
| "react-native-vector-icons": "10.2.0", | ||
| "@react-native-vector-icons/entypo": "^12.0.0", |
There was a problem hiding this comment.
This new dependency uses a caret range (^12.0.0) while the rest of dependencies are pinned to exact versions. Using a range here can lead to non-reproducible installs and unexpected icon/font changes; consider pinning it to an exact version for consistency with the rest of the file.
There was a problem hiding this comment.
@copilot open a new pull request to apply changes based on this feedback
| <SafeAreaFlatList | ||
| ListHeaderComponent={tipCoins} | ||
| data={utxos} | ||
| renderItem={renderItem} | ||
| keyExtractor={item => `${item.txid}:${item.vout}`} | ||
| contentInset={styles.listContent} | ||
| contentContainerStyle={styles.listContent} | ||
| /> |
There was a problem hiding this comment.
styles.listContent is now used for two different purposes: (1) as the inner row content wrapper in OutputList/OutputModal, and (2) as the contentContainerStyle for SafeAreaFlatList. Applying flex: 1 and marginLeft: 12 to the FlatList content container will shift/resize the entire list (including the header) and is unlikely to be intended. Consider splitting this into two separate styles (e.g. listContentContainer vs rowContent) and keep contentContainerStyle focused on padding/margins for the list as a whole.
There was a problem hiding this comment.
@copilot open a new pull request to apply changes based on this feedback
|
@marcosrdz I've opened a new pull request, #8276, to work on those changes. Once the pull request is ready, I'll request review from you. |
|
|
✅ Build 7.2.4 (1771252389) has been uploaded to TestFlight and will be available for testing soon. |
|
✅ Build 7.2.4 (1771253920) has been uploaded to TestFlight and will be available for testing soon. |
|
✅ Build 7.2.4 (1771254541) has been uploaded to TestFlight and will be available for testing soon. |
|
✅ Build 7.2.4 (1771254227) has been uploaded to TestFlight and will be available for testing soon. |
|
✅ Build 7.2.4 (1771265703) has been uploaded to TestFlight and will be available for testing soon. |
|
Squash it |
| stream: require.resolve('stream-browserify'), | ||
| crypto: require.resolve('crypto-browserify'), | ||
| net: require.resolve('react-native-tcp-socket'), | ||
| tls: require.resolve('react-native-tcp-socket'), |
There was a problem hiding this comment.
why did it move? wasnt supposed to
|
✅ Build 7.2.7 (1772325517) has been uploaded to TestFlight and will be available for testing soon. |
|
✅ Build 7.2.7 (1772400925) has been uploaded to TestFlight and will be available for testing soon. |
Upgrade icons package and remove rn elements