meliorence / react-native-snap-carousel

Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.
BSD 3-Clause "New" or "Revised" License
10.36k stars 2.29k forks source link

Customizing Behaviour for Items In Infinite Loop and Auto Scroll #533

Open mawaisqr opened 5 years ago

mawaisqr commented 5 years ago

Is this a bug report, a feature request, or a question?

Question

Details

Hello folks, I'm developing an android application and have successfully implemented "react-native-snap-carousel" in my app. Please see the GIF on Actual Behavior, to quickly grasp what I have achieved so far.

You guys will notice that in that carousal shifting is happening for one complete item, e.g. Item at left goes out completely and next item came from right which is not our requirement. We want shifting in small steps e.g. maybe I can give some x step size which will move my carousal left for that step size within delay.

I also know that for my case react-native-snap-carousal is using Flastlist of React Native in background which has a method scrollToOffset https://facebook.github.io/react-native/docs/flatlist#scrolltooffset but I couldn't figure out how I can use this method here.

Environment

Environment: React: 16.8.3 React native: 0.59.5 react-native-snap-carousel: 3.7.5

Target Platform: Android (8.1) Android TV (already running successfully on Mi Box S and TCL 49" TV)

Expected Behavior

I just want my carousal to move with some defined step size instead of moving item by item. Though, I went through the documentation few times but couldn't get a clue of which property will be helpful for me here, I hope I haven't asked something really obvious.

Actual Behavior

I have achieved this so far, (though this looks good but we need to bring up next items slowly and gradually) gitissuecast

Reproducible Demo

Here's my code specific to "react-native-snap-carousel"

`<Carousel layout={'default'} ref={(c) => { this._carousel = c; }} data={this.state.careTeam} renderItem={this._renderItemWithParallax} sliderWidth={(this.props.width - 20)} itemWidth={(this.props.width / 5)} inactiveSlideScale={1} inactiveSlideOpacity={1}

      loop={true}
      loopClonesPerSide={this.state.careTeamSize}
      enableMomentum={true}
      activeSlideAlignment={'center'}
      activeAnimationType={'spring'}
      activeAnimationOptions={{
      friction: 4,
      tension: 40
      }}
      hasParallaxImages={true}
      autoplay={true}
      autoplayDelay={500}
      autoplayInterval={2500}
    />

`

dohooo commented 3 years ago

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2