Custom Scroll Component

[martinezguillaume]

Platforms affected

iOS & Android

What does this PR do?

User can provide custom scroll component with useScrollView prop.

What testing has been done on this change?

If previous layouts (layout, stack or tinder) are still working with useScrollView of values: false, true or custom component.

Example

import { ScrollView } from 'react-native-gesture-handler'

const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);

// render
        <Carousel
          useScrollView={AnimatedScrollView}
          renderItem={this.renderItem}
          itemWidth={250}
          sliderWidth={windowWidth}
          data={data}
          {...props}
        />

why useScrollView

I choose to use the already existing prop useScrollView because I think it suits well the feature needed and it's pretty transparent of what this prop can do.

Previously, I wanted to use the same props as FlatList renderScrollComponent but I encounter conflicts between the way that ScrollView & FlatList are handled in the code logic.
Use a different prop is the best way to handle this case.

ref: #466 (comment)

[martinezguillaume]

What do you guys think about it ?

[bd-arc]

@martinezguillaume Thanks for the PR!

It looks good to me, but can you confirm that you've run tests with both the default behavior and with a custom scroll component?

[martinezguillaume]

@bd-arc Yep, all is good

[bd-arc]

Available in version 3.8.0.

[meiqi1992]

const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
and then
<Carousel
useScrollView={AnimatedScrollView}
renderItem={this.renderItem}
itemWidth={250}
sliderWidth={windowWidth}
data={data}
{...props}
/>
console.warn(typeof useScrollView === 'function') result is false
console.warn(typeof useScrollView) result is object