diff --git a/README.md b/README.md
index 6094b78..05cc103 100644
--- a/README.md
+++ b/README.md
@@ -117,6 +117,7 @@ The package includes two render options. Besides the `default render` when you c
| `showStatusBar` | boolean | false | Show status bar on top of screen. You can make your own status bar outside of this component |
| `statusBarColor` | color| #febe29 | Background color of status bar |
| `renderStatusBar` | function | Default status bar renderer | Use to supply your own status bar component |
+| `limitToSlide` | number | (Device max width) * 0.35 | Use to change the limit of the slide animation. It is calculated based on the PanResponder's `gestureState.dx` property. For example, your device's width: 400px, the limit is 400 * 0.35 = 140px, so you need to swipe at least 140px to left or right to reach the next slide in the row.
Examples
diff --git a/src/components/SliderProvider.tsx b/src/components/SliderProvider.tsx
index 6595749..afd0d05 100644
--- a/src/components/SliderProvider.tsx
+++ b/src/components/SliderProvider.tsx
@@ -66,6 +66,7 @@ const SliderProvider = (props: ISliderProviderProps) => {
useCustomBackHandlerEffect,
isCustomRender,
data,
+ limitToSlide,
} = props;
const numberOfSlides = isCustomRender
? props?.numberOfSlides
@@ -233,7 +234,6 @@ const SliderProvider = (props: ISliderProviderProps) => {
return true;
};
- const limitToSlide = deviceMaxWidth * 0.5;
const slidesMaxWidth = (numberOfSlides - 1) * deviceMaxWidth;
const navContainerMaxSize = deviceMaxWidth * navContainerMaxSizePercent;
const buttonsMaxSize = (deviceMaxWidth - navContainerMaxSize) / 2 - 1;
diff --git a/src/defaultProps.tsx b/src/defaultProps.tsx
index 484753d..d3e4431 100644
--- a/src/defaultProps.tsx
+++ b/src/defaultProps.tsx
@@ -1,9 +1,11 @@
import React from 'react';
-import type { ColorValue } from 'react-native';
+import { Dimensions, type ColorValue } from 'react-native';
import Button from './components/Button';
import StatusBarContainer from './components/StatusBarContainer';
import type { ISliderIntro } from './interfaces/ISliderIntro.interface';
+const deviceMaxWidth = Dimensions.get('window').width;
+
const defaultProps: ISliderIntro = {
data: [],
children: null,
@@ -43,6 +45,7 @@ const defaultProps: ISliderIntro = {
renderStatusBar: (backgroundColor: ColorValue) => (
),
+ limitToSlide: deviceMaxWidth * 0.35,
};
export default defaultProps;
diff --git a/src/interfaces/ISliderIntro.interface.ts b/src/interfaces/ISliderIntro.interface.ts
index 2121722..2cd739f 100644
--- a/src/interfaces/ISliderIntro.interface.ts
+++ b/src/interfaces/ISliderIntro.interface.ts
@@ -67,4 +67,5 @@ export interface ISliderIntro {
showStatusBar: boolean;
statusBarColor: ColorValue;
renderStatusBar: (backgroundColor: ColorValue) => React.ReactNode;
+ limitToSlide: number;
}