diff --git a/Navigation.js b/Navigation.js index f0039fed0..68b197ef6 100644 --- a/Navigation.js +++ b/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 ( ( )} + drawerStyle={isLargeScreen ? null : drawerStyle} + drawerType={isLargeScreen ? 'permanent' : null} + drawerContent={props => (isLargeScreen ? : null)} drawerPosition={I18nManager.isRTL ? 'right' : 'left'} > diff --git a/components/WalletsCarousel.js b/components/WalletsCarousel.js index 6020d88c7..f3dd0c546 100644 --- a/components/WalletsCarousel.js +++ b/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} /> ); diff --git a/screen/wallets/drawerList.js b/screen/wallets/drawerList.js index 8579a0d72..c14812665 100644 --- a/screen/wallets/drawerList.js +++ b/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 ( - - ); - }; - const onNewWalletPress = () => { return !carouselData.some(wallet => wallet.type === PlaceholderWallet.type) ? props.navigation.navigate('AddWalletRoot') : null; }; + const ListHeaderComponent = () => { + return ( + <> + + + + ); + }; + + const renderWalletsCarousel = ( + + ); + return ( - + - - - - {renderWalletsCarousel()} + {renderWalletsCarousel} {isDrawerListBlurred && ( @@ -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, diff --git a/screen/wallets/list.js b/screen/wallets/list.js index bcc34a43f..1bbe5361c 100644 --- a/screen/wallets/list.js +++ b/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