Merge pull request #1660 from mendix/NC-773-issue-with-carousel-widget

[NC-773]: fix snapping issue in carousel native widget

Author: Ahmad-Elsayed

package-lock.json

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   Improved the snapping behavior on Android.
+
 ## [2.2.2] - 2022-9-20
 
 ### Fixed

packages/pluggableWidgets/carousel-native/CHANGELOG.md

@@ -1,7 +1,7 @@
 {
   "name": "carousel-native",
   "widgetName": "Carousel",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -27,7 +27,7 @@
   "dependencies": {
     "@mendix/piw-native-utils-internal": "^1.0.0",
     "@mendix/piw-utils-internal": "^1.0.0",
-    "react-native-snap-carousel": "^3.8.4"
+    "react-native-snap-carousel": "^3.9.1"
   },
   "devDependencies": {
     "@mendix/pluggable-widgets-tools": ">=8.9.2",

packages/pluggableWidgets/carousel-native/package.json

@@ -1,5 +1,5 @@
 import { createElement, Fragment, ReactElement, useCallback, useEffect, useState } from "react";
-import { ActivityIndicator, LayoutChangeEvent, Text, View } from "react-native";
+import { ActivityIndicator, LayoutChangeEvent, Platform, Text, View } from "react-native";
 import { CarouselProps } from "../typings/CarouselProps";
 import { CarouselStyle, defaultCarouselStyle, LayoutStyle } from "./ui/styles";
 import { default as NativeCarousel, Pagination } from "react-native-snap-carousel";
@@ -162,6 +162,8 @@ export const Carousel = (props: CarouselProps<CarouselStyle>): ReactElement => {
                             inactiveSlideOpacity={layoutSpecificStyle.inactiveSlideItem?.opacity}
                             onSnapToItem={onSnap}
                             ref={(r: any) => setCarouselRef(r)}
+                            enableMomentum={Platform.OS === "android"}
+                            decelerationRate={0.9}
                         />
                         {renderPagination()}
                     </Fragment>

packages/pluggableWidgets/carousel-native/src/Carousel.tsx

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Carousel" version="2.2.2" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Carousel" version="2.2.3" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Carousel.xml" />
         </widgetFiles>