Add renderScrollComponent prop

martinezguillaume · Mar 27, 2019 · 88e7c82 · 88e7c82
1 parent 85980e5
commit 88e7c82
Showing 1 changed file with 8 additions and 7 deletions.
diff --git a/src/carousel/Carousel.js b/src/carousel/Carousel.js
@@ -16,7 +16,6 @@ const IS_IOS = Platform.OS === 'ios';
 
 // Native driver for scroll events
 // See: https://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html
-const AnimatedFlatList = FlatList ? Animated.createAnimatedComponent(FlatList) : null;
 const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
 
 // React Native automatically handles RTL layouts; unfortunately, it's buggy with horizontal ScrollView
@@ -64,6 +63,7 @@ export default class Carousel extends Component {
         slideStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
         shouldOptimizeUpdates: PropTypes.bool,
         swipeThreshold: PropTypes.number,
+        renderScrollComponent: PropTypes.func,
         useScrollView: PropTypes.bool,
         vertical: PropTypes.bool,
         onBeforeSnapToItem: PropTypes.func,
@@ -98,7 +98,8 @@ export default class Carousel extends Component {
         slideStyle: {},
         shouldOptimizeUpdates: true,
         swipeThreshold: 20,
-        useScrollView: !AnimatedFlatList,
+        renderScrollComponent: AnimatedScrollView,
+        useScrollView: !FlatList,
         vertical: false
     }
 
@@ -301,7 +302,7 @@ export default class Carousel extends Component {
 
     _needsScrollView () {
         const { useScrollView } = this.props;
-        return useScrollView || !AnimatedFlatList || this._shouldUseStackLayout() || this._shouldUseTinderLayout();
+        return useScrollView || !FlatList || this._shouldUseStackLayout() || this._shouldUseTinderLayout();
     }
 
     _needsRTLAdaptations () {
@@ -1284,7 +1285,7 @@ export default class Carousel extends Component {
     }
 
     render () {
-        const { data, renderItem } = this.props;
+        const { data, renderItem, renderScrollComponent = ScrollComponent } = this.props;
 
         if (!data || !renderItem) {
             return false;
@@ -1297,15 +1298,15 @@ export default class Carousel extends Component {
         };
 
         return this._needsScrollView() ? (
-            <AnimatedScrollView {...props}>
+            <ScrollComponent {...props}>
                 {
                     this._getCustomData().map((item, index) => {
                         return this._renderItem({ item, index });
                     })
                 }
-            </AnimatedScrollView>
+            </ScrollComponent>
         ) : (
-            <AnimatedFlatList {...props} />
+            <FlatList {...props} />
         );
     }
 }