WIP

Navigation.js

@@ -347,14 +347,14 @@ const Drawer = createDrawerNavigator();
 function DrawerRoot() {
   const dimensions = useWindowDimensions();
   const isLargeScreen =
-    Platform.OS === 'android' ? isTablet() : dimensions.width >= Dimensions.get('screen').width / 2 ;
+    Platform.OS === 'android' ? isTablet() : dimensions.width >= Dimensions.get('screen').width / 2 && (isTablet() || isDesktop);
   const drawerStyle = { width: '0%' };
 
   return (
     <Drawer.Navigator
-      drawerStyle={null}
-      drawerType={'permanent'}
-      drawerContent={props => ( <DrawerList {...props} /> )}
+      drawerStyle={isLargeScreen ? null : drawerStyle}
+      drawerType={isLargeScreen ? 'permanent' : null}
+      drawerContent={props => (isLargeScreen ? <DrawerList {...props} /> : null)}
       drawerPosition={I18nManager.isRTL ? 'right' : 'left'}
     >
       <Drawer.Screen name="Navigation" component={Navigation} options={{ headerShown: false, gestureEnabled: false }} />

components/WalletsCarousel.js

@@ -288,7 +288,7 @@ const cStyles = StyleSheet.create({
 
     paddingTop: 16,
   },
-  separatorStyle: { width: 16 },
+  separatorStyle: { width: 16, height: 20 },
 });
 
 const WalletsCarousel = forwardRef((props, ref) => {
@@ -311,8 +311,16 @@ const WalletsCarousel = forwardRef((props, ref) => {
 
   useImperativeHandle(ref, () => ({
     scrollToItem: ({ item }) => {
-      flatListRef?.current?.scrollToItem({ item });
+      setTimeout(() => {
+        flatListRef?.current?.scrollToItem({ item, viewPosition: 0.3 });
+      }, 300)
+     
     },
+    scrollToIndex: (index) => {
+      setTimeout(() => {
+        flatListRef?.current?.scrollToIndex({ index, viewPosition: 0.3 });
+      }, 300)
+    }
   }));
 
   const { width } = useWindowDimensions();
@@ -326,7 +334,6 @@ const WalletsCarousel = forwardRef((props, ref) => {
       keyExtractor={(_, index) => index.toString()}
       showsVerticalScrollIndicator={false}
       pagingEnabled
-      removeClippedSubviews={false}
       snapToAlignment="start"
       snapToInterval={itemWidth + 20} // Adjust to your content width
       ItemSeparatorComponent={ItemSeparatorComponent}
@@ -335,7 +342,7 @@ const WalletsCarousel = forwardRef((props, ref) => {
       directionalLockEnabled
       showsHorizontalScrollIndicator={false}
       initialNumToRender={10}
-      style={{ height: sliderHeight + 16 }}
+      style={props.horizontal ? {   height: sliderHeight + 9 }: {}}
       {...props}
     />
   );

screen/wallets/drawerList.js

@@ -1,12 +1,11 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import { StatusBar, View, StyleSheet, Alert, useWindowDimensions } from 'react-native';
+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 { SafeAreaView } from 'react-native-safe-area-context';
 
-import { BlueHeaderDefaultMain } from '../../BlueComponents';
+import { BlueHeaderDefaultMain, BlueSpacing20 } from '../../BlueComponents';
 import WalletsCarousel from '../../components/WalletsCarousel';
 import { PlaceholderWallet } from '../../class';
 import WalletImport from '../../class/wallet-import';
@@ -19,7 +18,6 @@ const DrawerList = props => {
   const walletsCarousel = useRef();
   const { wallets, selectedWallet, pendingWallets, isDrawerListBlurred } = useContext(BlueStorageContext);
   const [carouselData, setCarouselData] = useState([]);
-  const height = useWindowDimensions().height;
   const { colors } = useTheme();
   const walletsCount = useRef(wallets.length);
   const stylesHook = StyleSheet.create({
@@ -38,14 +36,14 @@ const DrawerList = props => {
 
   useEffect(() => {
     if (walletsCount.current < wallets.length) {
-      walletsCarousel.current?.snapToItem(walletsCount.current);
+      walletsCarousel.current?.scrollToItem({ item: wallets[walletsCount.current] });
     }
     walletsCount.current = wallets.length;
   }, [wallets]);
 
   useEffect(() => {
     if (pendingWallets.length > 0) {
-      walletsCarousel.current?.snapToItem(carouselData.length - pendingWallets.length);
+      walletsCarousel.current?.scrollToItem(carouselData.length - pendingWallets.length);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pendingWallets]);
@@ -100,34 +98,37 @@ const DrawerList = props => {
     }
   };
 
-  const renderWalletsCarousel = () => {
-    return (
-      <WalletsCarousel
-        removeClippedSubviews={false}
-        data={carouselData}
-        onPress={handleClick}
-        handleLongPress={handleLongPress}
-        ref={walletsCarousel}
-        testID="WalletsList"
-        vertical
-        contentContainerCustomStyle={styles.contentContainerCustomStyle}
-        selectedWallet={selectedWallet}
-      />
-    );
-  };
-
   const onNewWalletPress = () => {
     return !carouselData.some(wallet => wallet.type === PlaceholderWallet.type) ? props.navigation.navigate('AddWalletRoot') : null;
   };
 
+  const ListHeaderComponent = () => {
+    return (
+      <>
+        <BlueHeaderDefaultMain leftText={loc.wallets.list_title} onNewWalletPress={onNewWalletPress} isDrawerList />
+        <BlueSpacing20 />
+      </>
+    );
+  };
+
+  const renderWalletsCarousel = (
+    <WalletsCarousel
+      removeClippedSubviews={false}
+      data={carouselData}
+      onPress={handleClick}
+      handleLongPress={handleLongPress}
+      ref={walletsCarousel}
+      testID="WalletsList"
+      selectedWallet={selectedWallet}
+      ListHeaderComponent={ListHeaderComponent}
+    />
+  );
+
   return (
-    <DrawerContentScrollView {...props} scrollEnabled={false}>
+    <DrawerContentScrollView {...props}>
       <View styles={[styles.root, stylesHook.root]}>
         <StatusBar barStyle="default" />
-        <SafeAreaView style={styles.root}>
-          <BlueHeaderDefaultMain leftText={loc.wallets.list_title} onNewWalletPress={onNewWalletPress} isDrawerList />
-        </SafeAreaView>
-        {renderWalletsCarousel()}
+        {renderWalletsCarousel}
       </View>
       {isDrawerListBlurred && (
         <BlurView style={styles.absolute} blurType="light" blurAmount={10} reducedTransparencyFallbackColor="white" />
@@ -139,19 +140,10 @@ const DrawerList = props => {
 export default DrawerList;
 
 const styles = StyleSheet.create({
-  contentContainerCustomStyle: {
-    paddingRight: 10,
-    paddingLeft: 20,
-  },
   root: {
     flex: 1,
   },
-  headerTouch: {
-    height: 48,
-    paddingRight: 16,
-    paddingLeft: 32,
-    paddingVertical: 10,
-  },
+
   absolute: {
     position: 'absolute',
     top: 0,

screen/wallets/list.js

@@ -95,7 +95,7 @@ const WalletsList = () => {
 
   useEffect(() => {
     if (walletsCount.current < wallets.length) {
-      walletsCarousel.current?.scrollToItem({item: wallets[walletsCount.current]});
+      walletsCarousel.current?.scrollToItem({ item: wallets[walletsCount.current] });
     }
     walletsCount.current = wallets.length;
   }, [wallets]);
@@ -201,7 +201,12 @@ const WalletsList = () => {
     }
   };
 
-  const onSnapToItem = index => {
+  const onSnapToItem = e => {
+    const contentOffset = e.nativeEvent.contentOffset;
+    const viewSize = e.nativeEvent.layoutMeasurement;
+    // If the lateral slide is
+    // Math.floor(contentOffset.x/viewSize.width);
+    const index = Math.floor(contentOffset.x / viewSize.width);
     console.log('onSnapToItem', index);
     if (wallets[index] && (wallets[index].timeToRefreshBalance() || wallets[index].timeToRefreshTransaction())) {
       console.log(wallets[index].getLabel(), 'thinks its time to refresh either balance or transactions. refetching both');
@@ -270,7 +275,7 @@ const WalletsList = () => {
         extraData={carouselData}
         onPress={handleClick}
         handleLongPress={handleLongPress}
-        onSnapToItem={onSnapToItem}
+        onMomentumScrollEnd={onSnapToItem}
         ref={walletsCarousel}
         testID="WalletsList"
         horizontal