fixed sliding, set buttons to circles

Expensify · Dec 8, 2022 · 2e56ef8 · 2e56ef8
1 parent 4dd29c6
commit 2e56ef8
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 23 deletions.
diff --git a/src/components/AttachmentCarousel/CarouselActions/index.native.js b/src/components/AttachmentCarousel/CarouselActions/index.native.js
@@ -35,20 +35,20 @@ class Carousel extends Component {
                     return this.props.onPress();
                 }
 
-                const deltaSlide = gestureState.dx > 0 ? -1 : 1;
-                if (Math.abs(gestureState.vx) < 1.6 || (deltaSlide === -1 && !this.props.canSwipeLeft) || (deltaSlide === 1 && !this.props.canSwipeRight)) {
+                const deltaSlide = gestureState.dx > 0 ? 1 : -1;
+                if (Math.abs(gestureState.vx) < 1 || (deltaSlide === 1 && !this.props.canSwipeLeft) || (deltaSlide === -1 && !this.props.canSwipeRight)) {
                     return Animated.spring(this.pan, {useNativeDriver: false, toValue: 0}).start();
                 }
 
                 const width = Dimensions.get('window').width;
-                const slideLength = deltaSlide * (width * (3 / 4));
-                Animated.timing(this.pan, {useNativeDriver: false, duration: 100, toValue: -slideLength}).start(({finished}) => {
+                const slideLength = deltaSlide * ((3 / 4) * width);
+                Animated.timing(this.pan, {useNativeDriver: false, duration: 100, toValue: slideLength}).start(({finished}) => {
                     if (!finished) {
                         return;
                     }
 
                     this.props.onCycleThroughAttachments(deltaSlide);
-                    this.pan.setValue(slideLength);
+                    this.pan.setValue(-slideLength);
                     Animated.timing(this.pan, {useNativeDriver: false, duration: 100, toValue: 0}).start();
                 });
             },

diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
@@ -170,24 +170,29 @@ class AttachmentCarousel extends React.Component {
             >
                 {this.state.shouldShowArrow && (
                     <>
-                        <Button
-                            medium
-                            style={[styles.leftAttachmentArrow]}
-                            icon={Expensicons.BackArrow}
-                            iconFill={themeColors.text}
-                            iconStyles={[styles.mr0]}
-                            onPress={() => this.cycleThroughAttachments(1)}
-                            isDisabled={this.state.isBackDisabled}
-                        />
-                        <Button
-                            medium
-                            style={[styles.rightAttachmentArrow]}
-                            icon={Expensicons.ArrowRight}
-                            iconFill={themeColors.text}
-                            iconStyles={[styles.mr0]}
-                            onPress={() => this.cycleThroughAttachments(-1)}
-                            isDisabled={this.state.isForwardDisabled}
-                        />
+                        {!this.state.isBackDisabled && (
+                            <Button
+                                medium
+                                style={[styles.leftAttachmentArrow]}
+                                innerStyles={[styles.arrowIcon]}
+                                icon={Expensicons.BackArrow}
+                                iconFill={themeColors.text}
+                                iconStyles={[styles.mr0]}
+                                onPress={() => this.cycleThroughAttachments(1)}
+                            />
+                        )}
+                        {!this.state.isForwardDisabled && (
+                            <Button
+                                medium
+                                style={[styles.rightAttachmentArrow]}
+                                innerStyles={[styles.arrowIcon]}
+                                icon={Expensicons.ArrowRight}
+                                iconFill={themeColors.text}
+                                iconStyles={[styles.mr0]}
+                                onPress={() => this.cycleThroughAttachments(-1)}
+                                isDisabled={this.state.isForwardDisabled}
+                            />
+                        )}
                     </>
                 )}
 

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2103,6 +2103,11 @@ const styles = {
         right: 32,
     },
 
+    arrowIcon: {
+        height: 52,
+        width: 52,
+    },
+
     detailsPageSectionVersion: {
         alignSelf: 'center',
         color: themeColors.textSupporting,