Skip to content

Commit 0339975

Browse files
gusgardgusgard
committed
Add SwiperFlatListWithGestureHandler
1 parent c00f1c4 commit 0339975

10 files changed

+360
-46
lines changed

‎README.md‎

Lines changed: 32 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -126,35 +126,40 @@ export default App;
126126

127127
[Code example](./example/README.md)
128128

129+
To use `react-native-gesture-handler` instead of FlatList import the library like:
130+
131+
```tsx
132+
import { SwiperFlatListWithGestureHandler } from 'react-native-swiper-flatlist/WithGestureHandler';
133+
```
134+
129135
## Props
130136

131-
| Prop | Default | Type | Description |
132-
| :--------------------------- | :------------------------------------------------: | :-------------------------------------: | :------------------------------------------------------------------------------------ |
133-
| data | _not required if children is used_ | `array` | Data to use in renderItem |
134-
| children | - | `node` | Children elements |
135-
| renderItem | _not required if children is used_ | `FlatListProps<T>['renderItem']` | Takes an item from data and renders it into the list |
136-
| onMomentumScrollEnd | - | `(item: { index: number }, event: any)` | Called after scroll end and the first parameter is the current index |
137-
| vertical | false | `boolean` | Show vertical swiper |
138-
| index | 0 | `number` | Index to start |
139-
| renderAll | false | `boolean` | Render all the items before display it |
140-
| **Pagination** |
141-
| showPagination | false | `boolean` | Show pagination |
142-
| paginationDefaultColor | gray | `string` | Pagination color |
143-
| paginationActiveColor | white | `string` | Pagination color |
144-
| paginationStyle | {} | `ViewStyle` | Style object for the container |
145-
| paginationStyleItem | {} | `ViewStyle` | Style object for the item (dot) |
146-
| paginationStyleItemActive | {} | `ViewStyle` | Style object for the active item (dot) |
147-
| paginationStyleItemInactive | {} | `ViewStyle` | Style object for the inactive item (dot) |
148-
| onPaginationSelectedIndex | - | `() => void` | Executed when the user presses the pagination index, similar properties onChangeIndex |
149-
| PaginationComponent | [Component](./src/components/Pagination/index.tsx) | `node` | Overwrite Pagination component |
150-
| **Autoplay** |
151-
| autoplay | false | `boolean` | Change index automatically |
152-
| autoplayDelay | 3 | `number` | Delay between every page in seconds |
153-
| autoplayLoop | false | `boolean` | Continue playing after reach end |
154-
| autoplayLoopKeepAnimation | false | `boolean` | Show animation when reach the end of the list |
155-
| autoplayInvertDirection | false | `boolean` | Invert auto play direction |
156-
| disableGesture | false | `boolean` | Disable swipe gesture |
157-
| useReactNativeGestureHandler | false | `boolean` | Use `react-native-gesture-handler` FlatList instead of the React Native FlatList |
137+
| Prop | Default | Type | Description |
138+
| :-------------------------- | :------------------------------------------------: | :-------------------------------------: | :------------------------------------------------------------------------------------ |
139+
| data | _not required if children is used_ | `array` | Data to use in renderItem |
140+
| children | - | `node` | Children elements |
141+
| renderItem | _not required if children is used_ | `FlatListProps<T>['renderItem']` | Takes an item from data and renders it into the list |
142+
| onMomentumScrollEnd | - | `(item: { index: number }, event: any)` | Called after scroll end and the first parameter is the current index |
143+
| vertical | false | `boolean` | Show vertical swiper |
144+
| index | 0 | `number` | Index to start |
145+
| renderAll | false | `boolean` | Render all the items before display it |
146+
| **Pagination** |
147+
| showPagination | false | `boolean` | Show pagination |
148+
| paginationDefaultColor | gray | `string` | Pagination color |
149+
| paginationActiveColor | white | `string` | Pagination color |
150+
| paginationStyle | {} | `ViewStyle` | Style object for the container |
151+
| paginationStyleItem | {} | `ViewStyle` | Style object for the item (dot) |
152+
| paginationStyleItemActive | {} | `ViewStyle` | Style object for the active item (dot) |
153+
| paginationStyleItemInactive | {} | `ViewStyle` | Style object for the inactive item (dot) |
154+
| onPaginationSelectedIndex | - | `() => void` | Executed when the user presses the pagination index, similar properties onChangeIndex |
155+
| PaginationComponent | [Component](./src/components/Pagination/index.tsx) | `node` | Overwrite Pagination component |
156+
| **Autoplay** |
157+
| autoplay | false | `boolean` | Change index automatically |
158+
| autoplayDelay | 3 | `number` | Delay between every page in seconds |
159+
| autoplayLoop | false | `boolean` | Continue playing after reach end |
160+
| autoplayLoopKeepAnimation | false | `boolean` | Show animation when reach the end of the list |
161+
| autoplayInvertDirection | false | `boolean` | Invert auto play direction |
162+
| disableGesture | false | `boolean` | Disable swipe gesture |
158163

159164
**More props**
160165

0 commit comments

Comments
 (0)