@quintype/native-components 2.20.4 → 2.20.5

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [2.20.5](https://github.com/quintype/native-components/compare/v2.20.4...v2.20.5) (2023-03-21)
+
 ### [2.20.4](https://github.com/quintype/native-components/compare/v2.20.3...v2.20.4) (2023-02-01)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.20.4",
+  "version": "2.20.5",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/components/StorySlideshow/index.js

@@ -1,4 +1,3 @@
-
 import PropTypes from "prop-types";
 import React, { useContext, useRef, useState } from "react";
 import { TouchableOpacity, View } from "react-native";
@@ -23,15 +22,15 @@ export const StorySlideshow = ({ card, cdn }) => {
 
   const moveNext = () => {
     if (!lastSlide) {
-      flatlistRef.current.scrollToIndex({ index: currentIndex + 1 });
+      flatlistRef.current.scrollToIndex({ index: Math.floor(Math.min(currentIndex + 1, totalSlides - 1))});
       setCurrentTabIndex(currentIndex + 1);
     }
   };
 
   const movePrev = () => {
     if (!firstSlide) {
-      flatlistRef.current.scrollToIndex({ index: currentIndex - 1 });
-      setCurrentTabIndex(currentIndex - 1);
+      flatlistRef.current.scrollToIndex({ index: Math.ceil(Math.max(currentIndex - 1, 0)) });
+      setCurrentTabIndex(Math.max(currentIndex - 1, 0));
     }
   };
 
@@ -49,6 +48,23 @@ export const StorySlideshow = ({ card, cdn }) => {
     );
   };
 
+  const handleScroll = (event) => {
+    const xOffset = event.nativeEvent?.contentOffset?.x;
+    const contentWidth = event.nativeEvent?.contentSize?.width;
+    const layoutWidth = event.nativeEvent?.layoutMeasurement?.width;
+    const value = (xOffset / contentWidth);
+    const leftThreshold = contentWidth / ( 2 * totalSlides );
+    const rightThreshold = contentWidth - ( 1.5 ) * layoutWidth;
+
+    if((leftThreshold <= xOffset && (layoutWidth > xOffset || rightThreshold > xOffset ))){
+      setCurrentTabIndex(value * totalSlides);
+    } else if(xOffset < leftThreshold){
+      setCurrentTabIndex(0);
+    } else if(xOffset >= rightThreshold){
+      setCurrentTabIndex(totalSlides-1);
+    }
+  }
+
   return (
     <View style={styles.wrapper}>
       <Text primary style={styles.titleText}>
@@ -62,6 +78,7 @@ export const StorySlideshow = ({ card, cdn }) => {
         keyExtractor={(item) => item.id}
         horizontal
         extraData={currentIndex}
+        onScroll={handleScroll}
       />
 
       {!firstSlide && showArrow("left")}