Merge pull request #27 from RichardRNStudio/feat/26

feat(#26): add limitToSlide new property to change the limit of swipe animation

Author: RichardRNStudio

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`             | <a href="https://reactnative.dev/docs/colors">color</a>| #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 <a href="https://reactnative.dev/docs/panresponder">PanResponder's `gestureState.dx`</a> 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.  
 
 <h2>Examples</h2>
 <ul>

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;

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) => (
     <StatusBarContainer backgroundColor={backgroundColor} />
   ),
+  limitToSlide: deviceMaxWidth * 0.35,
 };
 
 export default defaultProps;

src/interfaces/ISliderIntro.interface.ts

@@ -67,4 +67,5 @@ export interface ISliderIntro {
   showStatusBar: boolean;
   statusBarColor: ColorValue;
   renderStatusBar: (backgroundColor: ColorValue) => React.ReactNode;
+  limitToSlide: number;
 }