Allow passing flatListProps

README.md

@@ -66,11 +66,12 @@ Prop | Description | Type | Default
 `initialPage` | Image displayed first | `number` | `0`
 `imageComponent` | Custom function to render your images, 1st param is the image props, 2nd is its dimensions | `function` | `<Image>` component
 `errorComponent` | Custom function to render the page of an image that couldn't be displayed | `function` | A `<View>` with a stylized error
+`flatListProps` | Props to be passed to the underlying `FlatList` | `object` | `{windowSize: 3}`
 `pageMargin` | Blank space to show between images | `number` | `0`
 `onPageSelected` | Fired with the index of page that has been selected | `function`
 `onPageScrollStateChanged` | Called when page scrolling state has changed, see [scroll state and events](#scroll-state-and-events) | `function`
 `onPageScroll` | Scroll event, see [scroll state and events](#scroll-state-and-events) | `function`
-`scrollViewStyle` | Custom style for the `FlastList` component | `object` | `{}`
+`scrollViewStyle` | Custom style for the `FlatList` component | `object` | `{}`
 `onSingleTapConfirmed` | Fired after a single tap | `function`
 `onLongPress` | Fire after a long press | `function`
 
@@ -90,4 +91,4 @@ Prop | Description | Type | Default
 
   * `'idle'`: there is no interaction with the page scroller happening at the time.
   * `'dragging'`: there is currently an interaction with the page scroller.
-  * `'settling'`: there was an interaction with the page scroller, and the page scroller is now finishing it's closing or opening animation.
+  * `'settling'`: there was an interaction with the page scroller, and the page scroller is now finishing it's closing or opening animation.

src/Gallery.js

@@ -4,6 +4,10 @@ import { createResponder } from 'react-native-gesture-responder';
 import TransformableImage from './libraries/TransformableImage';
 import ViewPager from './libraries/ViewPager';
 
+const DEFAULT_FLAT_LIST_PROPS = {
+    windowSize: 3,
+};
+
 export default class Gallery extends PureComponent {
     static propTypes = {
         ...View.propTypes,
@@ -19,13 +23,15 @@ export default class Gallery extends PureComponent {
         onLongPress: PropTypes.func,
         removeClippedSubviews: PropTypes.bool,
         imageComponent: PropTypes.func,
-        errorComponent: PropTypes.func
+        errorComponent: PropTypes.func,
+        flatListProps: PropTypes.object,
     };
 
     static defaultProps = {
         removeClippedSubviews: true,
         imageComponent: undefined,
-        scrollViewStyle: {}
+        scrollViewStyle: {},
+        flatListProps: DEFAULT_FLAT_LIST_PROPS,
     };
 
     imageRefs = new Map();
@@ -261,9 +267,12 @@ export default class Gallery extends PureComponent {
             gestureResponder = {};
         }
 
+        const flatListProps = {...DEFAULT_FLAT_LIST_PROPS, ...this.props.flatListProps};
+
         return (
             <ViewPager
               {...this.props}
+              flatListProps={flatListProps}
               ref={'galleryViewPager'}
               scrollViewStyle={this.props.scrollViewStyle}
               scrollEnabled={false}

src/libraries/ViewPager/index.js

@@ -18,7 +18,8 @@ export default class ViewPager extends PureComponent {
         removeClippedSubviews: PropTypes.bool,
         onPageSelected: PropTypes.func,
         onPageScrollStateChanged: PropTypes.func,
-        onPageScroll: PropTypes.func
+        onPageScroll: PropTypes.func,
+        flatListProps: PropTypes.object,
     };
 
     static defaultProps = {
@@ -27,7 +28,8 @@ export default class ViewPager extends PureComponent {
         scrollEnabled: true,
         pageDataArray: [],
         initialListSize: 10,
-        removeClippedSubviews: true
+        removeClippedSubviews: true,
+        flatListProps: {},
     };
 
     pageCount = 0; // Initialize to avoid undefined error
@@ -255,6 +257,7 @@ export default class ViewPager extends PureComponent {
               style={[style, { flex: 1 }]}
               {...gestureResponder}>
                 <FlatList
+                  {...this.props.flatListProps}
                   style={[{ flex: 1 }, scrollViewStyle]}
                   ref={'innerFlatList'}
                   keyExtractor={this.keyExtractor}