FIX: ListItem overlap

components/ListItem.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { ActivityIndicator, I18nManager, Pressable, PressableProps, StyleSheet, Switch, TouchableOpacity } from 'react-native';
+import { ActivityIndicator, I18nManager, Pressable, PressableProps, StyleSheet, Switch, TouchableOpacity, View } from 'react-native';
 import { Avatar, ListItem as RNElementsListItem, Button } from '@rneui/themed'; // Replace with actual import paths
 
 import { useTheme } from './themes';
@@ -58,13 +58,6 @@ const DefaultRightContent: React.FC<{ reset: () => void; onDeletePressed?: () =>
   />
 );
 
-const styles = StyleSheet.create({
-  rightButton: {
-    minHeight: '100%',
-    backgroundColor: 'red',
-  },
-});
-
 const ListItem: React.FC<ListItemProps> = React.memo(
   ({
     swipeable = false,
@@ -107,9 +100,7 @@ const ListItem: React.FC<ListItemProps> = React.memo(
         fontWeight: '400',
         fontSize: 14,
       },
-      rightTitleContainer: {
-        flex: 1,
-      },
+
       containerStyle: {
         backgroundColor: colors.background,
       },
@@ -121,8 +112,18 @@ const ListItem: React.FC<ListItemProps> = React.memo(
 
     const renderContent = () => (
       <>
-        {leftIcon && <Avatar icon={leftIcon} />}
-        {leftAvatar && leftAvatar}
+        {leftIcon && (
+          <>
+            <View style={styles.width16} />
+            <Avatar icon={leftIcon} />
+          </>
+        )}
+        {leftAvatar && (
+          <>
+            {leftAvatar}
+            <View style={styles.width16} />
+          </>
+        )}
         <RNElementsListItem.Content>
           <RNElementsListItem.Title style={stylesHook.title} numberOfLines={0} accessible={switchProps === undefined}>
             {title}
@@ -137,12 +138,13 @@ const ListItem: React.FC<ListItemProps> = React.memo(
             </RNElementsListItem.Subtitle>
           )}
         </RNElementsListItem.Content>
+
         {rightTitle && (
-          <RNElementsListItem.Content right style={stylesHook.rightTitleContainer}>
-            <RNElementsListItem.Title style={rightTitleStyle} numberOfLines={0} right>
+          <View style={styles.margin8}>
+            <RNElementsListItem.Title style={rightTitleStyle} numberOfLines={0}>
               {rightTitle}
             </RNElementsListItem.Title>
-          </RNElementsListItem.Content>
+          </View>
         )}
         {isLoading ? (
           <ActivityIndicator />
@@ -197,3 +199,14 @@ const ListItem: React.FC<ListItemProps> = React.memo(
 );
 
 export default ListItem;
+
+const styles = StyleSheet.create({
+  rightButton: {
+    minHeight: '100%',
+    backgroundColor: 'red',
+  },
+  margin8: {
+    margin: 8,
+  },
+  width16: { width: 16 },
+});

components/TransactionListItem.tsx

@@ -42,9 +42,6 @@ export const TransactionListItem: React.FC<TransactionListItemProps> = React.mem
     () => ({
       backgroundColor: 'transparent',
       borderBottomColor: colors.lightBorder,
-      paddingTop: 16,
-      paddingBottom: 16,
-      paddingRight: 0,
     }),
     [colors.lightBorder],
   );
@@ -342,7 +339,6 @@ export const TransactionListItem: React.FC<TransactionListItemProps> = React.mem
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [item.hash, subtitle, rowTitle, subtitleNumberOfLines, txMetadata]);
   return (
-    <View style={styles.container}>
       <ToolTipMenu ref={menuRef} actions={toolTipActions} onPressMenuItem={onToolTipPress} onPress={onPress}>
         <ListItem
           leftAvatar={avatar}
@@ -357,7 +353,6 @@ export const TransactionListItem: React.FC<TransactionListItemProps> = React.mem
           containerStyle={containerStyle}
         />
       </ToolTipMenu>
-    </View>
   );
 });
 
@@ -395,5 +390,4 @@ const actionIcons = {
 
 const styles = StyleSheet.create({
   iconWidth: { width: 25 },
-  container: { marginHorizontal: 4 },
 });

components/WalletsCarousel.js

@@ -197,7 +197,7 @@ export const WalletCarouselItem = React.memo(({ item, _, onPress, handleLongPres
   return (
     <Animated.View
       style={[
-        isLargeScreen || !horizontal ? iStyles.rootLargeDevice : customStyle ?? { ...iStyles.root, width: itemWidth },
+        isLargeScreen || !horizontal ? [iStyles.rootLargeDevice, customStyle] : customStyle ?? { ...iStyles.root, width: itemWidth },
         { opacity, transform: [{ scale: scaleValue }] },
       ]}
     >
@@ -206,7 +206,9 @@ export const WalletCarouselItem = React.memo(({ item, _, onPress, handleLongPres
         testID={item.getLabel()}
         onPressIn={onPressedIn}
         onPressOut={onPressedOut}
-        onLongPress={handleLongPress}
+        onLongPress={() => {
+          handleLongPress();
+        }}
         onPress={() => {
           onPressedOut();
           setTimeout(() => {

screen/wallets/ReorderWallets.tsx

@@ -66,7 +66,7 @@ const ReorderWallets: React.FC = () => {
   const { colors } = useTheme();
   const { wallets, setWalletsWithNewOrder } = useStorage();
   const colorScheme = useColorScheme();
-  const { navigate, setOptions } = useExtendedNavigation();
+  const { navigate, setOptions, goBack } = useExtendedNavigation();
   const [state, dispatch] = useReducer(reducer, initialState);
 
   const stylesHook = {
@@ -109,6 +109,7 @@ const ReorderWallets: React.FC = () => {
   const navigateToWallet = useCallback(
     (wallet: any) => {
       const walletID = wallet.getID();
+      goBack()
       navigate('WalletTransactions', {
         walletID,
         walletType: wallet.type,