FIX: Wallet carousel was not rending properly on large screens

components/WalletsCarousel.js

@@ -12,6 +12,7 @@ import {
   TouchableWithoutFeedback,
   useWindowDimensions,
   View,
+  Dimensions,
   FlatList,
 } from 'react-native';
 import { useTheme } from '@react-navigation/native';
@@ -21,13 +22,11 @@ import { LightningCustodianWallet, MultisigHDWallet, PlaceholderWallet } from '.
 import WalletGradient from '../class/wallet-gradient';
 import { BluePrivateBalance } from '../BlueComponents';
 import { BlueStorageContext } from '../blue_modules/storage-context';
-import { isHandset } from '../blue_modules/environment';
+import { isHandset, isTablet, isDesktop } from '../blue_modules/environment';
 
 const nStyles = StyleSheet.create({
   root: {},
   container: {
-    paddingHorizontal: 24,
-    paddingVertical: 16,
     borderRadius: 10,
     minHeight: Platform.OS === 'ios' ? 164 : 181,
     justifyContent: 'center',
@@ -57,10 +56,31 @@ const NewWalletPanel = ({ onPress }) => {
   const { colors } = useTheme();
   const { width } = useWindowDimensions();
   const itemWidth = width * 0.82 > 375 ? 375 : width * 0.82;
+  const isLargeScreen = Platform.OS === 'android' ? isTablet() : width >= Dimensions.get('screen').width / 2 && (isTablet() || isDesktop);
+  const nStylesHooks = StyleSheet.create({
+    container: isLargeScreen
+      ? {
+          paddingHorizontal: 24,
+          marginVertical: 16,
+        }
+      : { paddingVertical: 16, paddingHorizontal: 24 },
+  });
 
   return (
-    <TouchableOpacity accessibilityRole="button" testID="CreateAWallet" onPress={onPress} style={{ width: itemWidth * 1.2 }}>
-      <View style={[nStyles.container, { backgroundColor: WalletGradient.createWallet(), width: itemWidth }]}>
+    <TouchableOpacity
+      accessibilityRole="button"
+      testID="CreateAWallet"
+      onPress={onPress}
+      style={isLargeScreen ? {} : { width: itemWidth * 1.2 }}
+    >
+      <View
+        style={[
+          nStyles.container,
+          nStylesHooks.container,
+          { backgroundColor: WalletGradient.createWallet() },
+          isLargeScreen ? {} : { width: itemWidth },
+        ]}
+      >
         <Text style={[nStyles.addAWAllet, { color: colors.foregroundColor }]}>{loc.wallets.list_create_a_wallet}</Text>
         <Text style={[nStyles.addLine, { color: colors.alternativeTextColor }]}>{loc.wallets.list_create_a_wallet_text}</Text>
         <View style={nStyles.button}>
@@ -77,6 +97,7 @@ NewWalletPanel.propTypes = {
 
 const iStyles = StyleSheet.create({
   root: { paddingRight: 20 },
+  rootLargeDevice: { marginVertical: 20 },
   grad: {
     padding: 15,
     borderRadius: 12,
@@ -131,7 +152,7 @@ const WalletCarouselItem = ({ item, index, onPress, handleLongPress, isSelectedW
   const { walletTransactionUpdateStatus } = useContext(BlueStorageContext);
   const { width } = useWindowDimensions();
   const itemWidth = width * 0.82 > 375 ? 375 : width * 0.82;
-
+  const isLargeScreen = Platform.OS === 'android' ? isTablet() : width >= Dimensions.get('screen').width / 2 && (isTablet() || isDesktop);
   const onPressedIn = () => {
     const props = { duration: 50 };
     props.useNativeDriver = true;
@@ -159,7 +180,7 @@ const WalletCarouselItem = ({ item, index, onPress, handleLongPress, isSelectedW
   if (item.type === PlaceholderWallet.type) {
     return (
       <Animated.View
-        style={[iStyles.root, { width: itemWidth }, { transform: [{ scale: scaleValue }] }]}
+        style={[isLargeScreen ? iStyles.rootLargeDevice : { ...iStyles.root, width: itemWidth }, { transform: [{ scale: scaleValue }] }]}
         shadowOpacity={40 / 100}
         shadowOffset={{ width: 0, height: 0 }}
         shadowRadius={5}
@@ -223,7 +244,10 @@ const WalletCarouselItem = ({ item, index, onPress, handleLongPress, isSelectedW
 
   return (
     <Animated.View
-      style={[iStyles.root, { width: itemWidth }, { opacity, transform: [{ scale: scaleValue }] }]}
+      style={[
+        isLargeScreen ? iStyles.rootLargeDevice : { ...iStyles.root, width: itemWidth },
+        { opacity, transform: [{ scale: scaleValue }] },
+      ]}
       shadowOpacity={25 / 100}
       shadowOffset={{ width: 0, height: 3 }}
       shadowRadius={8}
@@ -287,6 +311,9 @@ const cStyles = StyleSheet.create({
   content: {
     paddingTop: 16,
   },
+  contentLargeScreen: {
+    paddingHorizontal: 16,
+  },
   separatorStyle: { width: 16, height: 20 },
 });
 
@@ -324,6 +351,7 @@ const WalletsCarousel = forwardRef((props, ref) => {
   const { width } = useWindowDimensions();
   const sliderHeight = 190;
   const itemWidth = width * 0.82 > 375 ? 375 : width * 0.82;
+  const isLargeScreen = Platform.OS === 'android' ? isTablet() : width >= Dimensions.get('screen').width / 2 && (isTablet() || isDesktop);
 
   return (
     <FlatList
@@ -335,7 +363,7 @@ const WalletsCarousel = forwardRef((props, ref) => {
       disableIntervalMomentum={isHandset}
       snapToInterval={itemWidth} // Adjust to your content width
       decelerationRate="fast"
-      contentContainerStyle={cStyles.content}
+      contentContainerStyle={isLargeScreen ? cStyles.contentLargeScreen : cStyles.content}
       directionalLockEnabled
       showsHorizontalScrollIndicator={false}
       initialNumToRender={10}

components/addresses/AddressTypeTabs.js

@@ -51,7 +51,9 @@ const AddressTypeTabs = ({ currentTab, setCurrentTab }) => {
 
       return (
         <View key={tab.key} onPress={() => changeToTab(tab.key)} style={[styles.tab, tabStyle]}>
-          <Text onPress={() => changeToTab(tab.key)} style={textStyle}>{tab.name}</Text>
+          <Text onPress={() => changeToTab(tab.key)} style={textStyle}>
+            {tab.name}
+          </Text>
         </View>
       );
     });

ios/Podfile.lock

@@ -729,7 +729,7 @@ SPEC CHECKSUMS:
   Flipper-RSocket: 127954abe8b162fcaf68d2134d34dc2bd7076154
   FlipperKit: 8a20b5c5fcf9436cac58551dc049867247f64b00
   GCDWebServer: 2c156a56c8226e2d5c0c3f208a3621ccffbe3ce4
-  glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
+  glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   lottie-ios: 3a3758ef5a008e762faec9c9d50a39842f26d124
   lottie-react-native: 4dff8fe8d10ddef9e7880e770080f4a56121397e

screen/wallets/drawerList.js

@@ -3,7 +3,7 @@ import { StatusBar, View, StyleSheet, Alert } from 'react-native';
 import { DrawerContentScrollView } from '@react-navigation/drawer';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 import PropTypes from 'prop-types';
-import { useTheme } from '@react-navigation/native';
+import { useIsFocused, useTheme } from '@react-navigation/native';
 
 import { BlueHeaderDefaultMain, BlueSpacing20 } from '../../BlueComponents';
 import WalletsCarousel from '../../components/WalletsCarousel';
@@ -20,6 +20,7 @@ const DrawerList = props => {
   const [carouselData, setCarouselData] = useState([]);
   const { colors } = useTheme();
   const walletsCount = useRef(wallets.length);
+  const isFocused = useIsFocused();
   const stylesHook = StyleSheet.create({
     root: {
       backgroundColor: colors.brandingColor,
@@ -113,14 +114,16 @@ const DrawerList = props => {
 
   const renderWalletsCarousel = (
     <WalletsCarousel
-      removeClippedSubviews={false}
       data={carouselData}
+      extraData={carouselData}
       onPress={handleClick}
       handleLongPress={handleLongPress}
       ref={walletsCarousel}
       testID="WalletsList"
+      vertical
       selectedWallet={selectedWallet}
       ListHeaderComponent={ListHeaderComponent}
+      scrollEnabled={isFocused}
     />
   );