Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom Scroll Component #498

Merged
merged 4 commits into from
May 21, 2019

Conversation

martinezguillaume
Copy link
Contributor

@martinezguillaume martinezguillaume commented Mar 27, 2019

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 martinezguillaume changed the title Custom scroll component Custom Scroll Component Mar 27, 2019
@martinezguillaume
Copy link
Contributor Author

What do you guys think about it ?

@bd-arc
Copy link
Contributor

bd-arc commented Apr 10, 2019

@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
Copy link
Contributor Author

@bd-arc Yep, all is good

@bd-arc bd-arc merged commit 7bba5ac into meliorence:master May 21, 2019
@bd-arc
Copy link
Contributor

bd-arc commented May 21, 2019

Available in version 3.8.0.

@meiqi1992
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants